axrising
@axrising

Как скрывать анимированое модальное окно через Redux?

Подскажите пожалуйста, как скрывать анимированое модальное окно через Redux без использования setTimeot?
Как сделать диспатч экшена только после завершения анимации через 400мс?
Буду очень благодарен за помощь
const MODAL_TYPES: any = {
  'login': LoginForm,
  'register': RegisterForm,
  'reset': ResetForm,
}

export const Modal: React.FC = () => {
  const { modalType, modalProps } = useSelector((state: RootState) => state.modals) //refactor selector
  const modalRef = React.useRef(null)
  const dispatch = useDispatch()
  const [isOpen, setIsOpen] = React.useState(modalProps.open)

  React.useEffect(() => {
    setIsOpen(modalProps.open)
  }, [modalProps.open])

  const onClose = () => {
    setIsOpen(false)
    setTimeout(() => {
      dispatch(hideModal())
    }, 400)
  }

  // useOnClickOutside(modalRef, onClose)
  // useHideScrollbar(isOpen)

  if (!modalType) {
    return null
  }

  const SpecifiedModal = MODAL_TYPES[modalType]
  return ReactDOM.createPortal(
    <CSSTransition in={isOpen} unmountOnExit timeout={400} classNames='overlay'>
      <ModalOverlay>
        <StyledModal ref={modalRef}>
          <ModalHeader>
            {modalProps.logo && <Logo height={20} link={false} />}
            {modalProps.title && <ModalTitle>{modalProps.title}</ModalTitle>}
            {modalProps.description && <ModalSubtitle>{modalProps.description}</ModalSubtitle>}
            <Close onClick={onClose} />
          </ModalHeader>
          <SpecifiedModal />
        </StyledModal>
      </ModalOverlay>
    </CSSTransition>,
    document.getElementById('modal-root') as HTMLElement
  )
}


const initialState: ModalState = {
  modalType: null,
  modalProps: {
    open: false,
    title: '',
    description: '',
    logo: false,
  },
}

const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    showModal(state, action: PayloadAction<ModalState>) {
      state.modalType = action.payload.modalType
      state.modalProps = action.payload.modalProps
    },
    hideModal: () => initialState,
  },
})
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
Seasle
@Seasle
\( ゚ヮ゚)/
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы