Agave Modal

Inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Usage

Basic Modal

pages/index.tsx
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e,reason) => toggleModal(reason)}
        onOk={() => toggleModal()}
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  )
}

Modal with two actions

pages/index.tsx
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e,reason) => toggleModal(reason)}
        onCancel={() => toggleModal()}
        onOk={() => alert('Hola')}
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  )
}

Custom label action buttons

pages/index.tsx
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e,reason) => toggleModal(reason)}
        onCancel={() => toggleModal()}
        onOk={() => alert('Hola')}
        onCancelText="Secondary button"
        onOkText="Main button"
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  )
}

Live editor

https://driver-scheduling-frontend.vercel.app/

Live Editor

function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e,reason) => toggleModal(reason)}
        onOk={() => console.log('hola')}
        onCancel={() => toggleModal()}
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  )
}
Result
Loading...

Props

Props

Name	Type	Default	Description
showModal	boolean	false	If true, the component is shown.
title	string		The main title of the modal.
children	node		The content of the modal component.
onOk	func	{}	Callback fired when the main button is clicked.
onCancel	func	{}	Callback fired when the secondary button is clicked.
onOkText	string	Confirmar	Text label of the main button.
onCancelText	string	Cancelar	Text label of the secondary button.
dialogProps	object	{}	See material-ui API documentation for the React Dialog component.
dialogTitleProps	object	{}	See material-ui API documentation for the React DialogTitle component.
dialogContentProps	object	{}	See material-ui API documentation for the React DialogContent component.
dialogActionsProps	object	{}	See material-ui API documentation for the React DialogActions component.