fix(LightBox): fix LightBox controller

mittwald · Nov 19, 2024 · f3e84af · f3e84af
1 parent 9abd015
commit f3e84af
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/packages/components/src/components/Action/Action.tsx b/packages/components/src/components/Action/Action.tsx
@@ -73,6 +73,7 @@ export const Action = flowComponent("Action", (props) => {
           ? action.confirmationModalController
           : action.getOverlayController("Modal");
       }),
+
       ActionGroup: {
         Button: actionButtonContext,
       },

diff --git a/packages/components/src/components/LightBox/LightBox.tsx b/packages/components/src/components/LightBox/LightBox.tsx
@@ -8,11 +8,11 @@ import type { PropsWithClassName } from "@/lib/types/props";
 import { Overlay } from "@/components/Overlay";
 import clsx from "clsx";
 import type { OverlayController } from "@/lib/controller";
+import { useOverlayController } from "@/lib/controller";
 import type { PropsContext } from "@/lib/propsContext";
 import { PropsContextProvider } from "@/lib/propsContext";
 import { Button } from "@/components/Button";
 import { IconClose } from "@/components/Icon/components/icons";
-import { Action } from "@/components/Action";
 import styles from "./LightBox.module.scss";
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
 
@@ -26,7 +26,7 @@ export interface LightBoxProps
 
 export const LightBox = flowComponent("LightBox", (props) => {
   const {
-    controller,
+    controller: controllerFromProps,
     children,
     refProp: ignoredRef,
     className,
@@ -49,6 +49,12 @@ export const LightBox = flowComponent("LightBox", (props) => {
     },
   };
 
+  const controllerFromContext = useOverlayController("LightBox", {
+    reuseControllerFromContext: true,
+  });
+
+  const controller = controllerFromProps ?? controllerFromContext;
+
   return (
     <Overlay
       overlayType="LightBox"
@@ -60,11 +66,9 @@ export const LightBox = flowComponent("LightBox", (props) => {
         <TunnelProvider>
           <div className={styles.content}>{children}</div>
           <div className={styles.actions}>
-            <Action closeOverlay="LightBox">
-              <Button color="light" variant="soft">
-                <IconClose />
-              </Button>
-            </Action>
+            <Button color="light" variant="soft" onPress={controller?.close}>
+              <IconClose />
+            </Button>
             <TunnelExit id="actionGroup" />
           </div>
         </TunnelProvider>

diff --git a/packages/components/src/components/LightBox/stories/Default.stories.tsx b/packages/components/src/components/LightBox/stories/Default.stories.tsx
@@ -7,6 +7,7 @@ import LightBoxTrigger from "@/components/LightBox/components/LightBoxTrigger";
 import { Image } from "@/components/Image";
 import { dummyText } from "@/lib/dev/dummyText";
 import { IconDelete, IconDownload } from "@/components/Icon/components/icons";
+import { useOverlayController } from "@/lib/controller";
 
 const meta: Meta<typeof LightBox> = {
   title: "Overlays/LightBox",
@@ -40,3 +41,26 @@ type Story = StoryObj<typeof LightBox>;
 export const Default: Story = {};
 
 export const WithoutFitScreen: Story = { args: { fitScreen: false } };
+
+export const WithController: Story = {
+  render: (props) => {
+    const controller = useOverlayController("LightBox");
+
+    return (
+      <>
+        <Button onPress={controller.open}>Open LightBox</Button>
+        <LightBox {...props} controller={controller}>
+          <Image src={dummyText.imageSrc} />
+          <ActionGroup>
+            <Button>
+              <IconDownload />
+            </Button>
+            <Button>
+              <IconDelete />
+            </Button>
+          </ActionGroup>
+        </LightBox>
+      </>
+    );
+  },
+};