модал не показан в сборнике рассказов - PullRequest
Новая
       11

модал не показан в сборнике рассказов

0 голосов
/ 09 мая 2019

У меня есть рабочий модальный компонент, который мне также нужно показать в сборнике рассказов. Это зависит от реквизита показать и закрыть. Например, если мне нужно показать модальный режим, мне нужно будет сделать следующее 

const Demo = () => {
    const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open Modal</button>
            <Modal open={open} onClose={() => setOpen(false)}>
                <Modal.Header>Modal Header goes here</Modal.Header>
                <Modal.Content>Modal Content goes here</Modal.Content>
                <Modal.Footer>Modal Footer goes here</Modal.Footer>
            </Modal>
        </>
    )
}

Я использую ReactDOM.createPortal для визуализации модальных, поэтому для этого я создал элемент div с идентификатором модальный и внутри него создается другой элемент div, где появляется модальный. Для такого я создал история о модале как следует 

storiesOf('Modals', module)
  .addDecorator(storyFn => (
    <>
      <div id="modal">
        <div>{storyFn()}</div>
      </div>
    </>
  ))
  .addDecorator(withKnobs)
  .add('Modals - Basic', () => (
    <>
      <button type="button">Show Modal</button>
      <Modal open={boolean('open', false)}>
        <Modal.Header>Modal Header goes here</Modal.Header>
        <Modal.Content>Modal Content goes here</Modal.Content>
        <Modal.Footer>Modal Footer goes here</Modal.Footer>
      </Modal>
    </>
  ))

Мой модал создается следующим образом 

const el = document.createElement('div')
const modal = document.getElementById('modal')

return ReactDOM.createPortal(
    <>
      <Backdrop onClick={e => closeModal(e)}>
        <ModalBox>
          <Wrapper position={position} {...props}>
            {children}
            <CloseIcon icon={faTimesCircle} />
          </Wrapper>
        </ModalBox>
      </Backdrop>
    </>,
    el,
  )
...