packages/components/containers/modals/manager.tsx

   1 import type { Dispatch, SetStateAction } from 'react';
   2
   3 import type { Modal, ModalManager } from './interface';
   4
   5 export default (modals: Modal[], setModals: Dispatch<SetStateAction<Modal[]>>): ModalManager => {
   6     const hideModal = (id: string) => {
   7         return setModals((oldModals: Modal[]) => {
   8             return oldModals.map((old) => {
   9                 if (old.id !== id) {
  10                     return old;
  11                 }
  12                 return {
  13                     ...old,
  14                     isClosing: true,
  15                 };
  16             });
  17         });
  18     };
  19
  20     const removeModal = (id: string) => {
  21         return setModals((oldModals) => {
  22             return oldModals.filter(({ id: otherId }) => id !== otherId);
  23         });
  24     };
  25
  26     const createModal = (content: JSX.Element | undefined, id = Math.random().toString(36).slice(2, 11)) => {
  27         setModals((oldModals) => {
  28             return oldModals.find(({ id: otherId }) => id === otherId)
  29                 ? oldModals
  30                 : [
  31                       ...oldModals,
  32                       {
  33                           id,
  34                           content,
  35                           isClosing: false,
  36                       },
  37                   ];
  38         });
  39
  40         return id;
  41     };
  42
  43     const getModal = (id: string) => {
  44         return modals.find(({ id: otherId }) => id === otherId);
  45     };
  46
  47     return {
  48         createModal,
  49         hideModal,
  50         removeModal,
  51         getModal,
  52         modals,
  53     };
  54 };