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>
  );
}