Modal

A pop up Modal

Usage

A modal displays content that temporarily blocks interactions with the main view of a site

import { Modal } from @motor-js/core
//...
    <Modal
      header={...}
      footer={...}
      isShowing={isShowing}
    >
      Modal Content, like some filters...
    </Modal>

Props

Prop	Description	Options / Example
children	Contents of the modal.	node
footer	Footer of the modal.	node
header	Header of the modal.	node
width	Width of the modal.	oneOf '10%' '20%' '30%' '40%' '50%' '60%' '70%' '80%' '90%' '100%' '10vw' '20vw' '30vw' '40vw' '50vw' '60vw' '70vw' '80vw' '90vw' '10vw'
zIndex	zIndex of the modal.	string
isShowing	Is the modal showing.	bool
onOutsideClick	Function to execute when user clicks outside the sidebar	function

Sample Syntax

Modal configuration

<Modal
      header={...}
      footer={...}
      isShowing={isShowing}
    >
      Modal Content, like some filters...
    </Modal>

Example

Simple Modal

Render a simple Modal

function ModalDemo() {
  const { isShowing, toggle } = useModal();
  return (
    <Motor config={config}>
      <Modal
        header={
          <div style={{ fontSize: "20px", fontWeight: "bold" }}>
            Modal Title
          </div>
        }
        footer={
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button width="100px" onClick={toggle}>
              Close
            </Button>
          </div>
        }
        isShowing={isShowing}
      >
        <div style={{ display: "flex", height: "50px", padding: "20px 0px" }}>
          <Filter
            label="Product Sub Group"
            dimension={["Product Sub Group Desc"]}
            size="small"
          />
        </div>
      </Modal>
      <Button onClick={toggle}>Show Modal</Button>
    </Motor>
  );
}

Modal with outsideClick

Render a Modal with outsideCLick functionality

function ModalDemo() {
  const { isShowing, toggle } = useModal();
  const handleClick = () => {
    toggle();
  };
  return (
    <Motor config={config}>
      <Modal
        header={
          <div style={{ fontSize: "20px", fontWeight: "bold" }}>
            Modal Title
          </div>
        }
        footer={
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button width="100px" onClick={toggle}>
              Close
            </Button>
          </div>
        }
        isShowing={isShowing}
        onOutsideClick={handleClick}
      >
        <div style={{ display: "flex", height: "50px", padding: "20px 0px" }}>
          <Filter
            label="Product Sub Group"
            dimension={["Product Sub Group Desc"]}
            size="small"
          />
        </div>
      </Modal>
      <Button onClick={toggle}>Show Modal</Button>
    </Motor>
  );
}