@spaced-out/ui-design-system/lib/hooks/useModal/useModal.js.flow

Sense UI components library

// @flow strict

import {useCallback, useState} from 'react';

import {motionDurationNormal} from '../../styles/variables/_motion';


export type UseModalExtras = {
  // TODO(Ashwini): Add type for extras
  // $FlowFixMe
  [key: string]: any,
};

export type UseModalReturnType = {
  isOpen: boolean,
  openModal: (extras?: UseModalExtras) => void,
  closeModal: () => void,
  extras: UseModalExtras,
};

export const useModal = (): UseModalReturnType => {
  const [isOpen, setIsOpen] = useState(false);
  const [extras, setExtras] = useState({});

  const openModal = useCallback((props?: UseModalExtras = {}) => {
    setExtras(props);
    setIsOpen(true);
  }, []);

  const closeModal = () => {
    setIsOpen(false);
    // Since the Dialog close uses animation and its duration is motionDurationNormal, we should clear the data after the animation duration for better user experience
    setTimeout(() => {
      setExtras({});
    }, parseInt(motionDurationNormal));
  };

  return {isOpen, openModal, closeModal, extras};
};