modal upgrade

Author: elijaharita

components/Providers.tsx

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

demos/modals/ModalHamburgerMenu.tsx

@@ -5,12 +5,23 @@ 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 default function ModalHamburgerMenu(props) {
+export interface ModalHamburgerMenuProps {
+  content: {
+    data: {
+      navItems: { name: string, link: string }[],
+    },
+  };
+}
+
+export default function ModalHamburgerMenu(props: ModalHamburgerMenuProps) {
   const navItems = props.content.data.navItems;
-  
+  const modal = useModalV2(ModalHamburgerMenu);
+
   return (
-    <div className={`${styles.hamburgerModal} ${styles.slideIn}`}>
+    <OutsideElementEvent className={`${styles.hamburgerModal} ${styles.slideIn}`} onOutsideEvent={() => modal.close()}>
       {navItems?.map((item) => (
         <div key={item.name} className={styles.menuContent}>
           {item.link ? (
@@ -22,6 +33,6 @@ export default function ModalHamburgerMenu(props) {
           )}
         </div>
       ))}
-    </div>
+    </OutsideElementEvent>
   );
 }

next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/examples/components/modals-hamburger-menu.tsx

@@ -4,6 +4,7 @@ import GlobalModalManager from '@system/modals/GlobalModalManager';
 import HamburgerMenuButton from '@system/HamburgerMenuButton';
 import Navigation from '@system/Navigation';
 import Page from '@components/Page';
+import { ModalsV2 } from '@root/system/modals/GlobalModalManagerV2';
 
 function ExampleModalsHamburgerMenu(props) {
   // (@xBalbinus): This populates the navigation in the hamburger menu.
@@ -20,7 +21,7 @@ function ExampleModalsHamburgerMenu(props) {
       url="https://wireframes.internet.dev/examples/components/modals-hamburger-menu"
     >
       <Navigation />
-      <GlobalModalManager />
+      <ModalsV2 />
       <HamburgerMenuButton navItems={NAV_CONTENT} />
     </Page>
   );

system/HamburgerMenuButton.tsx

@@ -3,37 +3,31 @@ import styles from '@system/HamburgerMenuButton.module.scss';
 import * as React from 'react';
 import * as Utilities from '@common/utilities';
 
-import { useModal } from '@system/providers/ModalContextProvider';
+import ModalHamburgerMenu from '@root/demos/modals/ModalHamburgerMenu';
+
+import { useModalV2 } from './modals/GlobalModalManagerV2';
 
 export default function HamburgerMenuButton(props) {
-  const { modalContent, showModal } = useModal();
+  const modal = useModalV2(ModalHamburgerMenu);
 
-  const [menuActive, setMenuActive] = React.useState(false);
   const [isAnimating, setIsAnimating] = React.useState(false);
 
   const hamburgerRef = React.useRef<HTMLDivElement>(null);
 
-  // (@xBalbinus) The hamburger menu is a modal, and can get closed by other modals
-  // Handle the case where the hamburger menu is closed by another modal or gets clicked outside of.
-  React.useEffect(() => {
-    if (modalContent?.name === 'HAMBURGER_MENU') {
-      setMenuActive(true);
-    } else if (modalContent?.name !== 'HAMBURGER_MENU') {
-      setMenuActive(false);
-    }
-  }, [modalContent]);
-
   // (@xBalbinus): The hamburger menu gets closed on click to any outside HTML element if we only use
   // onOutsideEvent, we need to check if the click is coming from the hamburger button specifically.
   function toggleModal() {
     if (isAnimating) return;
 
     setIsAnimating(true);
-    setMenuActive((prev) => !prev);
-    showModal({
-      name: 'HAMBURGER_MENU',
-      data: { navItems: props.navItems, isActive: menuActive, triggerElement: hamburgerRef.current },
-    });
+
+    if (!modal.isActive) {
+      modal.open({
+        content: { data: { navItems: props.navItems } },
+      });
+    } else {
+      modal.close();
+    }
     setTimeout(() => {
       setIsAnimating(false);
     }, 300);
@@ -43,7 +37,7 @@ export default function HamburgerMenuButton(props) {
     <div className={styles.body}>
       <div
         ref={hamburgerRef}
-        className={Utilities.classNames(styles.hamburger, { [styles.active]: menuActive })}
+        className={Utilities.classNames(styles.hamburger, { [styles.active]: modal.isActive })}
         onMouseDown={toggleModal}
       >
         <span className={styles.bar}></span>

system/detectors/OutsideElementEvent.tsx

@@ -10,7 +10,15 @@ interface OutsideElementEventProps {
 const OutsideElementEvent: React.FC<OutsideElementEventProps> = ({ className, children, onOutsideEvent, style }) => {
   const ref = useRef<HTMLDivElement>(null);
 
+  // Don't call on the same frame as first render
+  const [isReady, setIsReady] = React.useState(false);
+  React.useEffect(() => {
+    setIsReady(true);
+  }, []);
+
   const handleOutsideEvent = (event) => {
+    if (!isReady) return;
+    
     if (event.target.hasAttribute('data-detector-ignore-navigation')) {
       return;
     }
@@ -29,7 +37,7 @@ const OutsideElementEvent: React.FC<OutsideElementEventProps> = ({ className, ch
       document.removeEventListener('mousedown', handleOutsideEvent);
       document.removeEventListener('touchstart', handleOutsideEvent);
     };
-  }, []);
+  }, [isReady]);
 
   return (
     <div ref={ref} className={className} style={style}>

system/modals/GlobalModalManager.tsx

@@ -40,10 +40,6 @@ export default function GlobalModalManager(props) {
     nextModal = <ModalError content={modalContent} onShowModal={showModal} viewer={props.viewer} />;
   }
 
-  if (modalContent && modalContent.name === 'HAMBURGER_MENU') {
-    nextModal = <ModalHamburgerMenu content={modalContent} onShowModal={showModal} viewer={props.viewer} />;
-  }
-
   if (modalContent && modalContent.name === 'INDEX') {
     nextModal = <ModalIndex content={modalContent} onShowModal={showModal} />;
   }

system/modals/GlobalModalManagerV2.module.scss

@@ -0,0 +1,8 @@
+.modalBackground {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: 1px solid var(--theme-background);
+}

system/modals/GlobalModalManagerV2.tsx

@@ -0,0 +1,71 @@
+import styles from './GlobalModalManagerV2.module.scss';
+
+import * as React from 'react';
+
+export interface ModalProviderProps {
+  children?: React.ReactNode;
+}
+
+export interface ModalState {
+  component: React.FC;
+  props: object;
+}
+
+export interface ModalContextTypeV2 {
+  activeModal: ModalState | null;
+  showModal: <T>(component: React.FC<T> | null, props?: T) => void;
+}
+
+const defaultModalContext: ModalContextTypeV2 = {
+  activeModal: null,
+  showModal: () => {},
+};
+export const ModalContextV2 = React.createContext(defaultModalContext);
+
+function newModalState(): ModalState | null {
+  return null;
+}
+
+export function ModalProvider({ children }: ModalProviderProps) {
+  const [activeModal, setActiveModal] = React.useState(newModalState);
+
+  const showModal = (component, props) => {
+    setActiveModal({
+      component,
+      props: props || {},
+    });
+  };
+
+  return <ModalContextV2.Provider value={{ activeModal, showModal }}>{children}</ModalContextV2.Provider>;
+}
+
+export function ModalsV2() {
+  const { activeModal } = React.useContext(ModalContextV2);
+
+  const Component = activeModal?.component;
+  const props = activeModal?.props || {};
+
+  return (
+    Component && (
+      <div className={styles.modalBackground}>
+        <Component {...props} />
+      </div>
+    )
+  );
+}
+
+export interface ModalHandleV2<T> {
+  isActive: boolean;
+  open: (props?: T) => void;
+  close: () => void;
+}
+
+export function useModalV2<T>(component: React.FC<T>): ModalHandleV2<T> {
+  const { showModal, activeModal } = React.useContext(ModalContextV2);
+
+  return {
+    isActive: component === activeModal?.component,
+    open: (props) => showModal(component, props),
+    close: () => showModal(null),
+  };
+}