feat: ✨ allow additional props in useDialog

stabledata · May 30, 2024 · cd1bc73 · cd1bc73
1 parent b5f2ce8
commit cd1bc73
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stabledata/switch",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "main": "switch/dist/esm/index.js",
   "module": "switch/dist/esm/index.js",

diff --git a/switch/components/dialog.tsx b/switch/components/dialog.tsx
@@ -1,3 +1,4 @@
+import { UseDialogOptions } from "../hooks/use-dialog.js";
 import { cn } from "../lib/utils.js";
 import type { SwitchDialog } from "../types.js";
 import {
@@ -16,10 +17,14 @@ import { Button } from "./ui/button.js";
 export type DialogProps = {
   dialog: SwitchDialog;
   open: boolean;
-  onAction: (id: string | null) => void;
+  onAction: UseDialogOptions["onAction"];
 };
 
-export const Dialog: React.FC<DialogProps> = ({ dialog, onAction }) => {
+export const Dialog: React.FC<DialogProps> = ({
+  dialog,
+  onAction,
+  ...rest
+}) => {
   const { title, message, actions, trigger } = dialog;
 
   return (
@@ -39,15 +44,15 @@ export const Dialog: React.FC<DialogProps> = ({ dialog, onAction }) => {
             switch (action.id) {
               case "cancel":
                 return (
-                  <AlertDialogCancel onClick={() => onAction(null)}>
+                  <AlertDialogCancel onClick={() => onAction(null, rest)}>
                     {action.label}
                   </AlertDialogCancel>
                 );
               default:
                 return (
                   <AlertDialogAction
                     disabled={action.disabled}
-                    onClick={() => onAction(action.id)}
+                    onClick={() => onAction(action.id, rest)}
                     className={cn(
                       action.destructive &&
                         "text-neutral-50 dark:text-neutral-100 bg-destructive dark:bg-destructive hover:bg-red-500 dark:hover:bg-red-500"

diff --git a/switch/hooks/use-dialog.tsx b/switch/hooks/use-dialog.tsx
@@ -2,21 +2,24 @@ import React from "react";
 import { Dialog, DialogProps } from "../components/dialog.js";
 import { SwitchDialog } from "../types.js";
 
-type UseDialogResult = {
-  DialogComponent: React.FC;
+type UseDialogResult<DialogComponentProps> = {
+  DialogComponent: React.FC<DialogComponentProps>;
 };
 
-type UseDialogOptions = {
-  onAction: (id: string | null) => void;
+export type UseDialogOptions = {
+  onAction: <DialogComponentProps>(
+    action: string | null,
+    props: DialogComponentProps
+  ) => void;
   options?: Partial<SwitchDialog>;
   CustomDialog?: React.FC<DialogProps>;
 };
 
-export function useDialog({
+export function useDialog<DialogComponentProps>({
   CustomDialog,
   options,
   onAction,
-}: UseDialogOptions): UseDialogResult {
+}: UseDialogOptions): UseDialogResult<DialogComponentProps> {
   const defaultDialog: SwitchDialog = React.useMemo(
     () => ({
       title: "Are you sure?",
@@ -41,11 +44,12 @@ export function useDialog({
   const Component = CustomDialog || Dialog;
 
   return {
-    DialogComponent: () => (
+    DialogComponent: (props?: DialogComponentProps) => (
       <Component
         dialog={{ ...defaultDialog, ...options } as SwitchDialog}
         onAction={onAction}
         open={false}
+        {...props}
       />
     ),
   };

diff --git a/views/routes/story.tsx b/views/routes/story.tsx
@@ -17,6 +17,19 @@ export function GhettoStorybook() {
       console.log("resolved action", id);
     },
   });
+
+  const { DialogComponent: DialogWithProps } = useDialog<{
+    foo: string;
+    bar: number;
+  }>({
+    onAction: async (id: string | null, props) => {
+      console.log("resolved action w props", id, props);
+    },
+    options: {
+      trigger: "Trigger with props",
+    },
+  });
+
   const { DialogComponent: DangerousDialogComponent } = useDialog({
     onAction: async (id: string | null) => {
       console.log("danger choice action", id);
@@ -66,6 +79,7 @@ export function GhettoStorybook() {
       <hr />
       <h3>Dialogs</h3>
       <DialogComponent />
+      <DialogWithProps foo="bar" bar={10} />
       <DangerousDialogComponent />
       <h3>Toaster</h3>
       <Button