Modals

Modals

More documentation can be found on MDB's site, here .

Modals should adhere to the same rules that cards adhere to.

= modal_trigger_button "Show modal", "my-modal", add_class: "btn-primary"

= modal_wrapper "my-modal" do
  = modal do
    = modal_header "Permissions"
    = modal_body do
      = modal_p do
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie
        quis dolor ac auctor. Donec ex justo, semper quis facilisis in, aliquet
        eu magna. Integer nec ante a enim fermentum dictum eu et nibh. Proin
        id consequat erat.
    = modal_footer do
      = modal_dismiss_button "Dismiss"

Modal with Dismiss Icon

Modals can optionally have a dismiss 'X' button in the upper corner

= modal_trigger_button "Show modal with X to dismiss", "my-modal-with-dismiss", add_class: "btn-primary"

= modal_wrapper "my-modal-with-dismiss" do
  = modal do
    = modal_header "Permissions" do
      = modal_dismiss_icon

    = modal_body do
      = modal_p do
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie
        quis dolor ac auctor. Donec ex justo, semper quis facilisis in, aliquet
        eu magna. Integer nec ante a enim fermentum dictum eu et nibh. Proin
        id consequat erat.
    = modal_footer do
      = modal_dismiss_button "Dismiss"

Modals in JS

Modals can also be activated or dismissed with JS functions

-# Listener to open the modal
N2Handle("click", "#show-my-modal-button", function(){
  -# function to open the modals
  new N2Styles.modalOpener($("my-modal"), {
    -# Accepts keywords skip_init:[default false] and options:[default {}]
    skip_init: false,
    options: {
      keyboard: false,
      backdrop: 'static',
    }
  });
});

-# Listener to close the modal
N2Handle("click", "#dismiss-my-modal-button", function(){
  -# Accepts keywords skip_remove:[default false]
  new N2Styles.modalCloser($("my-modal"), skip_remove: false);
});

React Modal

Props for Modal:

• Required: modalSelectorClass: String class to be used for selecting the Modal (used by ModalTrigger).
• Optional: children: Array of nodes or a single node to display inside a modal
• Optional: Footer: Node to display as footer of modal, otherwise Submit (optional)/Dismiss (always) button(s) appear in footer
• Optional: className: String
• Optional: dismissText: String (defaults to Dismiss )
• Optional: submitText: String (defaults to Ok )
• Optional: onDismiss: Function callback for onDismiss
• Optional: onSubmit: Function callback for onSubmit. Must return a Promise.
• Optional: size: String of modal (options: default, small, large, or extraLarge)
• Optional: showDismissIcon: Boolean to show 'x' dismiss icon in upper right (default: false ). Will call onDismiss.

Props for ModalTrigger:

• Optional: children: Array of nodes or a single node to display inside a button
• Required: modalComponent: Node (the modal that should be triggered onClick)
• Required: modalSelector: String to select the modal
• Required: mountSelector: String to select the mounting point for the modal (must be in the DOM and outside of React)
• All other button props: style, className, type, disabled, etc.

React Modals must be mounted on a node outside React.

• Required: Mount Point: Node The mount point in this example is just below: a div with a class named '.js-modal-container'

import React, { useState } from 'react';
import {
  Modal,
  ModalTrigger,
} from 'n2-styles';

function ModalExample() {
  const [value, setValue] = useState(null);

  const mountSelector = '.js-modal-container';
  const modalSelectorClass = 'js-modal';
  const modalSelector = `.${modalSelectorClass}`;
  const title = 'React Modal';
  const contents = (
    <>
      <p>On submit, your response will be displayed the next time you show the modal.</p>
      <p>On dismiss, your response will be cleared the next time you show the modal.</p>
      <label>
        What would you like to say?
        <input type="text" defaultValue={value || ''} />
      </label>
    </>
  );

  const handleSubmit = () => {
    const input = document.querySelector(`${modalSelector} input`);
    return new Promise((resolve) => {
      resolve(setValue(input.value));
    });
  };

  const handleDismiss = () => {
    setValue('');
  };

  const modal = (
    <Modal
      title={title}
      modalSelectorClass={modalSelectorClass}
      onSubmit={handleSubmit}
      onDismiss={handleDismiss}
      className="mt-8"
      size="large"
      showDismissIcon
    >
      {contents}
    </Modal>
  );

  return (
    <ModalTrigger
      modalComponent={modal}
      modalSelector={modalSelector}
      mountSelector={mountSelector}
      style="primary" // eslint-disable-line
      className="ml-3"
    >
      Open Modal
    </ModalTrigger>
  );
}

export default ModalExample;

import React, { useEffect } from 'react';
import {
  Button,
  Modal,
  showModal,
  mountModal,
  hideModal,
} from 'n2-styles';

function ModalManualExample() {
  const mountSelector = '.js-modal-container';
  const modalManualSelectorClass = 'js-modal-class2';
  const modalManualSelector = `.${modalManualSelectorClass}`;
  const modalManual = (
    <Modal
      title="React Example"
      modalSelectorClass={modalManualSelectorClass}
      size="small"
    >
      <p>This modal will automatically hide itself after 1 second.</p>
    </Modal>
  );

  const triggerManualModal = () => {
    mountModal(mountSelector, modalManual);
    showModal(modalManualSelector);
    setTimeout(() => hideModal(modalManualSelector), 1000);
  };

  useEffect(() => {
    // Trigger once on load (after 1s)
    // Not implemented on the page, so as not to annoy
    // setTimeout(() => triggerManualModal(), 1000);
  }, []);


  return (
    // Also allow to be triggered from Button (could be anything)
    <Button onClick={() => triggerManualModal()}>Modal Triggered by JS</Button>
  );
}

export { ModalManualExample };