LEDA1.3.10

Modal

Props

NameTypeDescription
childrenReact.ReactNodeChild elements
classNamestringIn case you want to add some classes
isOpenbooleanWether the modal is open
onClose(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => voidClose handler, works ony type of closing
onCloseButtonClickCustomEventHandler<React.MouseEvent<HTMLElement>>Close button click handler
onEscapePressCustomEventHandler<React.KeyboardEvent<HTMLElement>>Escape press handler
onOverlayClickCustomEventHandler<React.MouseEvent<HTMLElement>>Click on the outside of the modal handler
theme...Theme
_[className]
[x: string]: unknown
E.g.: _w-48 adds a css class w-48 to the component's outer wrapper.

() => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <L.Modal
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
        // onCloseButtonClick={() => {
        //   console.log('click on close icon');
        //   setIsOpen(false);
        // }}
        // onOverlayClick={() => {
        //   console.log('click on overlay');
        //   setIsOpen(false);
        // }}
        // onEscapePress={() => {
        //   console.log('esc pressed');
        //   setIsOpen(false);
        // }}
      >
        <L.ModalHeader>New user</L.ModalHeader>
        <L.ModalBody>
          <L.Div _mb-2>
            <L.Span>Name</L.Span>
            <L.Input form="modal-form" name="first-name" isRequired />
          </L.Div>
          <L.Div _mb-2>
            <L.Span>Family name</L.Span>
            <L.Input form="modal-form" name="last-name" isRequired />
          </L.Div>
          <L.Div _mb-2>
            <L.Span>Date of birth</L.Span>
            <L.DatePicker _colMd10 isRequired form="modal-form" name="birth-date" />
          </L.Div>
          <L.Div>
            <L.Span>Passport</L.Span>
            <L.MaskedInput mask="####-######" form="modal-form" name="passport" isRequired />
          </L.Div>
        </L.ModalBody>
        <L.ModalFooter>
          <L.Button onClick={() => setIsOpen(false)}>Cancel</L.Button>
          {' '}
          <L.Button form="modal-form" onClick={() => setIsOpen(false)} onValidationFail={() => alert('Fill out the form please')}>Add</L.Button>
        </L.ModalFooter>
      </L.Modal>
      <br />
      <L.Button onClick={() => setIsOpen(true)}>Open</L.Button>
    </>
  );
}

Customization props

NameType
wrapperRender

CustomRender<ModalWindowProps, {}, WrapperProps>

CustomRender<ModalElementsProps, {}, React.HTMLAttributes<HTMLDivElement>>

...

Modal theme

Theme propCSS class name
body
ld-modal-body
cross
ld-modal-cross
footer
ld-modal-footer
header
ld-modal-header
window
ld-modal-window
wrapper
ld-modal-wrapper