Decouple onClick and onActionClick

dust-tt · May 2, 2024 · 71c0032 · 71c0032
1 parent f61c082
commit 71c0032
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/sparkle/src/components/AssistantPreview.tsx b/sparkle/src/components/AssistantPreview.tsx
@@ -33,6 +33,8 @@ type GalleryVariantAssistantPreviewProps = BaseAssistantPreviewProps & {
 type MinimalGalleryVariantAssistantPreviewProps = BaseAssistantPreviewProps & {
   variant: "minimalGallery";
   actions?: React.ReactNode;
+  onClick?: () => void;
+  onActionClick?: () => void;
 };
 
 type AssistantPreviewProps =
@@ -237,10 +239,12 @@ const MinimalGalleryVariantContent = ({
   title,
   pictureUrl,
   subtitle,
+  onClick,
+  onActionClick,
 }: MinimalGalleryVariantAssistantPreviewProps) => {
   return (
-    <>
-      <div id="assistant-container" className="s-flex s-gap-2 s-grow s-flex-row s-justify-between s-py-1">
+<>
+      <div id="assistant-container" className="s-flex s-gap-2 s-grow s-flex-row s-justify-between s-py-1" onClick={onClick}>
         <div id="preview" className="s-flex s-gap-2 s-w-fit s-flex-row s-items-center">
           <div id="avatar-column" className="s-w-fit">
             <Avatar name={`Avatar of ${title}`} visual={pictureUrl} size="md" />
@@ -264,7 +268,10 @@ const MinimalGalleryVariantContent = ({
             </div>
           </div>
         </div>
-        <div id="actions-column">
+        <div id="actions-column" onClick={(e) => {
+          e.stopPropagation();
+          onActionClick?.();
+        }}>
           {actions}
         </div>
       </div>

diff --git a/sparkle/src/stories/AssistantPreview.stories.tsx b/sparkle/src/stories/AssistantPreview.stories.tsx
@@ -212,19 +212,19 @@ export const AssistantPreviewExample = () => (
           subtitle={"Dust"}
           description=""
           variant="minimalGallery"
+          onClick={() => console.log("AssistantPreview clicked")}
+          onActionClick={() => console.log("Action clicked")}
           actions={
             <div className="s-flex s-justify-end s-pt-1">
               <Button
                 label=""
                 icon={MoreIcon}
                 variant="tertiary" 
                 size="sm" 
-                onClick={() => console.log("clicked")}
                 labelVisible={false}
               />
             </div>
           }
-          onClick={() => console.log("clicked")}
         />
       </div>
       <div className="s-border s-border-structure-100 s-rounded-xl">
@@ -234,19 +234,19 @@ export const AssistantPreviewExample = () => (
           subtitle={"Dust"}
           description=""
           variant="minimalGallery"
+          onClick={() => console.log("AssistantPreview clicked")}
+          onActionClick={() => console.log("Action clicked")}
           actions={
-            <div className="s-flex s-justify-end s-align-middle">
+            <div className="s-flex s-justify-end s-pt-1">
               <Button
                 label=""
                 icon={MoreIcon}
                 variant="tertiary" 
                 size="sm" 
-                onClick={() => console.log("clicked")}
                 labelVisible={false}
               />
             </div>
           }
-          onClick={() => console.log("clicked")}
         />
       </div>
       <div className="s-border s-border-structure-100 s-rounded-xl">
@@ -256,19 +256,19 @@ export const AssistantPreviewExample = () => (
           subtitle={"Dust"}
           description=""
           variant="minimalGallery"
+          onClick={() => console.log("AssistantPreview clicked")}
+          onActionClick={() => console.log("Action clicked")}
           actions={
             <div className="s-flex s-justify-end s-pt-1">
               <Button
                 label=""
                 icon={MoreIcon}
                 variant="tertiary" 
                 size="sm" 
-                onClick={() => console.log("clicked")}
                 labelVisible={false}
               />
             </div>
           }
-          onClick={() => console.log("clicked")}
         />
       </div>
     </div>