Allow passing context object through openModal + support jsx in modal…

… subheader
edgedb · Sep 19, 2024 · 0c5b5a1 · 0c5b5a1
1 parent 422907c
commit 0c5b5a1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/shared/common/hooks/useModal/index.tsx b/shared/common/hooks/useModal/index.tsx
@@ -96,18 +96,21 @@ export function useModal(): {
   modal: JSX.Element | null;
   openModal: (modal: JSX.Element | null, transition?: boolean) => () => void;
 };
-export function useModal(modal: JSX.Element): {
+export function useModal<Ctx extends any = null>(
+  modal: (ctx: Ctx) => JSX.Element
+): {
   modal: JSX.Element | null;
-  openModal: (transition?: boolean) => () => void;
+  openModal: (ctx: Ctx, transition?: boolean) => () => void;
 };
-export function useModal(modal?: JSX.Element): {
+export function useModal(modal?: (ctx: any) => JSX.Element): {
   modal: JSX.Element | null;
   openModal:
     | ((modal: JSX.Element | null, transition?: boolean) => () => void)
-    | ((transition?: boolean) => () => void);
+    | ((ctx: any, transition?: boolean) => () => void);
 } {
   const ctx = useContext(modalContext);
   const placeholder = useRef(<></>);
+  const modalCtx = useRef<any>();
 
   if (!modal) {
     return {
@@ -119,10 +122,15 @@ export function useModal(modal?: JSX.Element): {
   return {
     modal:
       ctx.modal === placeholder.current
-        ? createPortal(modal, document.getElementById("modal_target")!)
+        ? createPortal(
+            modal(modalCtx.current),
+            document.getElementById("modal_target")!
+          )
         : null,
-    openModal: (transition?: boolean) =>
-      ctx.openModal(placeholder.current, transition),
+    openModal: (_ctx: any, transition?: boolean) => {
+      modalCtx.current = _ctx;
+      return ctx.openModal(placeholder.current, transition);
+    },
   };
 }
 

diff --git a/shared/common/newui/modal/index.tsx b/shared/common/newui/modal/index.tsx
@@ -8,7 +8,7 @@ import {CrossIcon, WarningIcon} from "../icons";
 export interface ModalProps {
   className?: string;
   title: string;
-  subheading?: string;
+  subheading?: string | JSX.Element;
   onClose?: () => void;
   noCloseOnOverlayClick?: boolean;
   onSubmit?: () => void;

diff --git a/shared/common/newui/modal/modal.module.scss b/shared/common/newui/modal/modal.module.scss
@@ -127,6 +127,10 @@
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
+
+    b {
+      font-weight: 550;
+    }
   }
 
   @include darkTheme {

diff --git a/shared/common/ui/navtabs/mobile.tsx b/shared/common/ui/navtabs/mobile.tsx
@@ -22,14 +22,14 @@ export function MobileNavTabs({
   Link,
   extraMenu,
 }: MobileNavTabsProps) {
-  const {modal, openModal} = useModal(
+  const {modal, openModal} = useModal(() => (
     <MobileMenu
       tabs={tabs}
       currentTabId={currentTabId}
       Link={Link}
       extraMenu={extraMenu}
     />
-  );
+  ));
   const modalDisposer = useRef<null | (() => void)>(null);
   const windowWidth = useWindowWidth();
 
@@ -61,7 +61,7 @@ export function MobileNavTabs({
       </div>
       <div
         className={styles.menuButton}
-        onClick={() => (modalDisposer.current = openModal())}
+        onClick={() => (modalDisposer.current = openModal(null))}
       >
         <EllipsisIcon />
       </div>