add modal unmount delay

Author: elijaharita

.prettierrc

@@ -11,7 +11,7 @@
   "requirePragma": false,
   "insertPragma": false,
   "proseWrap": "preserve",
-  "parser": "babel",
+  "parser": "babel-ts",
   "overrides": [
     {
       "files": "*.js",

components/Providers.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import { ModalContext } from '@system/providers/ModalContextProvider';
-import { ModalProvider } from '@root/system/modals/GlobalModalManagerV2';
+import { ModalProviderV2 } from '@root/system/modals/GlobalModalManagerV2';
 
 interface ModalContent {
   data?: any;
@@ -35,8 +35,8 @@ export default function Providers({ children }) {
   };
 
   return <ModalContext.Provider value={modalContextValue}>
-    <ModalProvider>
+    <ModalProviderV2>
       {children}
-    </ModalProvider>
+    </ModalProviderV2>
   </ModalContext.Provider>;
 }

demos/modals/ModalHamburgerMenu.tsx

@@ -2,26 +2,26 @@ import styles from '@demos/modals/Modals.module.scss';
 
 import * as React from 'react';
 
-import { H4 } from '@system/typography';
-
 import Link from 'next/link';
 import OutsideElementEvent from '@root/system/detectors/OutsideElementEvent';
-import { useModalV2 } from '@root/system/modals/GlobalModalManagerV2';
 
-export interface ModalHamburgerMenuProps {
+import { H4 } from '@system/typography';
+import { CommonModalProps, ModalComponentV2, useModalV2 } from '@root/system/modals/GlobalModalManagerV2';
+
+export interface ModalHamburgerMenuProps extends CommonModalProps {
   content: {
     data: {
-      navItems: { name: string, link: string }[],
-    },
+      navItems: { name: string; link: string }[];
+    };
   };
 }
 
-export default function ModalHamburgerMenu(props: ModalHamburgerMenuProps) {
+const ModalHamburgerMenu: ModalComponentV2<ModalHamburgerMenuProps> = (props) => {
   const navItems = props.content.data.navItems;
   const modal = useModalV2(ModalHamburgerMenu);
 
   return (
-    <OutsideElementEvent className={`${styles.hamburgerModal} ${styles.slideIn}`} onOutsideEvent={() => modal.close()}>
+    <OutsideElementEvent className={styles.hamburgerModal} onOutsideEvent={() => modal.close()} style={{ animationDirection: modal.isActive ? 'normal' : 'reverse' }}>
       {navItems?.map((item) => (
         <div key={item.name} className={styles.menuContent}>
           {item.link ? (
@@ -35,4 +35,8 @@ export default function ModalHamburgerMenu(props: ModalHamburgerMenuProps) {
       ))}
     </OutsideElementEvent>
   );
-}
+};
+
+ModalHamburgerMenu.unmountDelayMS = 300;
+
+export default ModalHamburgerMenu;

demos/modals/Modals.module.scss

@@ -18,35 +18,25 @@
   border-right: 1px solid var(--theme-border);
   box-sizing: content-box;
   transition: left 0.3s;
+  animation: slideInAnimation 0.3s;
+  animation-fill-mode: forwards;
 
   @media (max-width: 960px) {
     width: 100%;
   }
 }
 
-.slideIn {
-  animation: slideInAnimation 0.3s forwards;
-}
-
-.slideOut {
-  animation: slideOutAnimation 0.3s forwards;
+.hamburgerModalClosing {
+  animation-direction: alternate;
 }
 
 @keyframes slideInAnimation {
   from {
     transform: translateX(-100%);
   }
-  to {
-    transform: translateX(0);
-  }
-}
 
-@keyframes slideOutAnimation {
-  from {
-    transform: translateX(0);
-  }
   to {
-    transform: translateX(-100%);
+    transform: translateX(0);
   }
 }
 
@@ -174,4 +164,4 @@
 .linkStyle {
   text-decoration: none;
   color: inherit;
-}
+}

system/HamburgerMenuButton.tsx

@@ -25,8 +25,10 @@ export default function HamburgerMenuButton(props) {
       modal.open({
         content: { data: { navItems: props.navItems } },
       });
+      console.log('opening');
     } else {
       modal.close();
+      console.log('closing');
     }
     setTimeout(() => {
       setIsAnimating(false);

system/detectors/OutsideElementEvent.tsx

@@ -4,7 +4,7 @@ interface OutsideElementEventProps {
   className?: string;
   children: React.ReactNode;
   onOutsideEvent: (event: MouseEvent | TouchEvent) => void;
-  style?: Record<string, any>;
+  style?: React.CSSProperties;
 }
 
 const OutsideElementEvent: React.FC<OutsideElementEventProps> = ({ className, children, onOutsideEvent, style }) => {

system/modals/GlobalModalManagerV2.tsx

@@ -6,51 +6,111 @@ export interface ModalProviderProps {
   children?: React.ReactNode;
 }
 
+export interface ModalComponentV2<P extends CommonModalProps = CommonModalProps> extends React.FC<P> {
+  unmountDelayMS?: number;
+}
+
 export interface ModalState {
-  component: React.FC;
+  key: string;
+  component: ModalComponentV2;
   props: object;
 }
 
+export interface CommonModalProps {
+  isClosing?: boolean;
+}
+
 export interface ModalContextTypeV2 {
   activeModal: ModalState | null;
-  showModal: <T>(component: React.FC<T> | null, props?: T) => void;
+  closingModals: { [key: string]: ModalState };
+  showModal: <P extends CommonModalProps>(key: string, component: ModalComponentV2<P> | null, props?: P) => void;
+  hideCurrentModal: () => void;
+  hideModal: (key: string) => void;
 }
 
 const defaultModalContext: ModalContextTypeV2 = {
   activeModal: null,
+  closingModals: {},
   showModal: () => {},
+  hideCurrentModal: () => {},
+  hideModal: () => {},
 };
 export const ModalContextV2 = React.createContext(defaultModalContext);
 
 function newModalState(): ModalState | null {
   return null;
 }
 
-export function ModalProvider({ children }: ModalProviderProps) {
+/** Provides a context that allows any of its descendants to control modals via
+ * `useModalV2()`. Must be paired with `<ModalsV2 />` in order for modals to
+ * show up. */
+export function ModalProviderV2({ children }: ModalProviderProps) {
   const [activeModal, setActiveModal] = React.useState(newModalState);
+  const [closingModals, setClosingModals] = React.useState<{ [key: string]: ModalState }>({});
+
+  const showModal = (key, component, props) => {
+    // If a modal was previously active, remove it now, or set a timeout for it
+    // if there is an unmount delay.
+    hideCurrentModal();
+
+    if (component) {
+      setActiveModal({
+        key,
+        component,
+        props: props || {},
+      });
+    } else {
+      setActiveModal(null);
+    }
+  };
+
+  const hideCurrentModal = () => {
+    if (activeModal) {
+      setActiveModal(null);
+      setClosingModals((prev) => ({ ...prev, [activeModal.key]: activeModal }));
 
-  const showModal = (component, props) => {
-    setActiveModal({
-      component,
-      props: props || {},
-    });
+      const timeout = activeModal.component.unmountDelayMS || 0;
+      const callback = () => {
+        setClosingModals((prev) => {
+          const { [activeModal.key]: _, ...filtered } = prev;
+          return filtered;
+        });
+      };
+
+      if (timeout) {
+        setTimeout(callback, timeout);
+      } else {
+        callback();
+      }
+    }
+  };
+
+  const hideModal = (key) => {
+    if (activeModal && activeModal.key === key) {
+      hideCurrentModal();
+    }
   };
 
-  return <ModalContextV2.Provider value={{ activeModal, showModal }}>{children}</ModalContextV2.Provider>;
+  return <ModalContextV2.Provider value={{ activeModal, closingModals, showModal, hideCurrentModal, hideModal }}>{children}</ModalContextV2.Provider>;
 }
 
+/** Displays the active modal. Without this component, the modal context does
+ * nothing. */
 export function ModalsV2() {
-  const { activeModal } = React.useContext(ModalContextV2);
+  const { activeModal, closingModals } = React.useContext(ModalContextV2);
+
+  const renderModal = (state: ModalState, isClosing: boolean) => {
+    const Component: React.FC<CommonModalProps> = state?.component;
+    const props = state?.props || {};
 
-  const Component = activeModal?.component;
-  const props = activeModal?.props || {};
+    return <Component key={state.key} isClosing={isClosing} {...props} />;
+  };
 
   return (
-    Component && (
-      <div className={styles.modalBackground}>
-        <Component {...props} />
-      </div>
-    )
+    <div className={styles.modalBackground}>
+      {activeModal && renderModal(activeModal, false)}
+      {Object.values(closingModals).map((closingModal) => renderModal(closingModal, true))}
+    </div>
   );
 }
 
@@ -60,12 +120,18 @@ export interface ModalHandleV2<T> {
   close: () => void;
 }
 
-export function useModalV2<T>(component: React.FC<T>): ModalHandleV2<T> {
-  const { showModal, activeModal } = React.useContext(ModalContextV2);
+export function useModalV2<T extends CommonModalProps>(component: React.FC<T>): ModalHandleV2<T> {
+  const { showModal, hideModal, hideCurrentModal, activeModal } = React.useContext(ModalContextV2);
+
+  const key = React.useMemo(() => uniqueModalKey(), []);
 
   return {
     isActive: component === activeModal?.component,
-    open: (props) => showModal(component, props),
-    close: () => showModal(null),
+    open: (props) => showModal(key, component, props),
+    close: () => hideModal(key),
   };
 }
+
+function uniqueModalKey(): string {
+  return `modal-${Math.floor(Math.random() * 999999999)}`;
+}