feat(Node): leverage actions generic for actions

lumada-design · Mar 11, 2024 · 5a45b39 · 5a45b39
1 parent b3ee345
commit 5a45b39
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 57 deletions.
diff --git a/packages/lab/src/Flow/Node/Node.styles.tsx b/packages/lab/src/Flow/Node/Node.styles.tsx
@@ -20,9 +20,9 @@ export const { staticClasses, useClasses } = createClasses("HvFlowNode", {
     justifyContent: "space-between",
     alignItems: "center",
   },
-  actions: {
-    display: "flex",
-    alignItems: "center",
+  actions: {},
+  actionsButton: {
+    gap: 0,
   },
   paramsContainer: {
     borderTop: `1px solid ${theme.colors.atmo4}`,

diff --git a/packages/lab/src/Flow/Node/Node.tsx b/packages/lab/src/Flow/Node/Node.tsx
@@ -1,12 +1,10 @@
-import React, { isValidElement, useState } from "react";
+import React, { useState } from "react";
 import {
   ExtractNames,
-  HvActionGeneric,
+  HvActionsGeneric,
   HvActionsGenericProps,
   HvButton,
   HvButtonProps,
-  HvDropDownMenu,
-  HvIconButton,
   HvTooltip,
   HvTypography,
   useLabels,
@@ -39,11 +37,13 @@ export interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {
   /** Node description */
   description?: string;
   /** Node actions */
-  actions?: HvActionGeneric[];
+  actions?: HvActionsGenericProps["actions"];
   /** Node action callback */
   actionCallback?: HvActionsGenericProps["actionsCallback"];
+  /** Whether the actions should be all icon buttons when visible. @default true */
+  actionsIconOnly?: HvActionsGenericProps["iconOnly"];
   /** Node maximum number of actions visible */
-  maxVisibleActions?: number;
+  maxVisibleActions?: HvActionsGenericProps["maxVisibleActions"];
   /** Node expanded */
   expanded?: boolean;
   /** Node parameters */
@@ -58,9 +58,6 @@ export interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {
   classes?: HvFlowNodeClasses;
 }
 
-const renderedIcon = (actionIcon: HvActionGeneric["icon"]) =>
-  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();
-
 export const HvFlowNode = ({
   id,
   type,
@@ -70,6 +67,7 @@ export const HvFlowNode = ({
   actionCallback,
   maxVisibleActions = 1,
   expanded = false,
+  actionsIconOnly = true,
   params,
   nodeDefaults,
   classes: classesProp,
@@ -96,9 +94,6 @@ export const HvFlowNode = ({
   const icon = group?.icon || nodeDefaults?.icon;
   const color = group?.color || nodeDefaults?.color;
 
-  const actsVisible = actions?.slice(0, maxVisibleActions);
-  const actsDropdown = actions?.slice(maxVisibleActions);
-
   const hasParams = !!(params && params.length > 0);
 
   return (
@@ -142,42 +137,23 @@ export const HvFlowNode = ({
       labels={labels as HvFlowNodeProps["labels"]}
       {...props}
     >
-      {(subtitle || actsVisible?.length || actsDropdown?.length) && (
+      {(subtitle || actions) && (
         <div className={classes.subtitleContainer}>
           {subtitle && (
             <div>
               <HvTypography>{subtitle}</HvTypography>
             </div>
           )}
-          <div className={classes.actions}>
-            {actions?.length && actions?.length > 0 && (
-              <>
-                {actsVisible?.map((action) => (
-                  <HvIconButton
-                    key={action.id}
-                    title={action.label}
-                    onClick={(event) => {
-                      actionCallback?.(event, id, action);
-                    }}
-                  >
-                    {renderedIcon(action.icon)}
-                  </HvIconButton>
-                ))}
-                {actsDropdown && actsDropdown.length > 0 && (
-                  <HvDropDownMenu
-                    keepOpened={false}
-                    dataList={actsDropdown?.map((action) => ({
-                      id: action.id,
-                      label: action.label,
-                    }))}
-                    onClick={(event, action) => {
-                      actionCallback?.(event, id, action as HvActionGeneric);
-                    }}
-                  />
-                )}
-              </>
-            )}
-          </div>
+          {actions && (
+            <HvActionsGeneric
+              className={classes.actions}
+              classes={{ button: classes.actionsButton }}
+              actions={actions}
+              actionsCallback={actionCallback}
+              maxVisibleActions={maxVisibleActions}
+              iconOnly={actionsIconOnly}
+            />
+          )}
         </div>
       )}
       {children}

diff --git a/packages/lab/src/Flow/stories/NoGroups/Asset.tsx b/packages/lab/src/Flow/stories/NoGroups/Asset.tsx
@@ -9,7 +9,6 @@ export const Asset: HvFlowNodeFC = (props) => {
     <HvFlowNode
       description="Asset description"
       expanded
-      maxVisibleActions={1}
       params={[
         {
           id: "asset",

diff --git a/packages/lab/src/Flow/stories/Usage.mdx b/packages/lab/src/Flow/stories/Usage.mdx
@@ -325,9 +325,10 @@ The `id` property will be typed to be one of the allowed default actions.
 
 At the node level you can specify other actions. To achieve this you'll have to define:
 
-- A set of actions;
-- A callback to handle these actions;
-- Optionally, a maximum number of visible actions and the others will be placed in a dropdown menu.
+- A set of actions (`actions`);
+- A callback to handle these actions (`actionCallback`);
+- A maximum number of visible actions (`maxVisibleActions`). All the other actions will be placed in a dropdown menu. By default, only one action is visible;
+- And whether the actions should be all icon buttons when visible (`actionsIconButton`). By default, this is set to `true`.
 
 ```tsx
 const handleAction = (event: any, id: string, action: any) => {
@@ -357,7 +358,6 @@ const handleAction = (event: any, id: string, action: any) => {
       label: "View Details",
       icon: <Search />,
     },
-
     {
       id: "favorite",
       label: "Add Favorite",
@@ -470,19 +470,19 @@ If you need to export your data at any point you can use the `toObject` function
 Below you can find a full example of a custom Node that exercises the topics approached in this page.
 
 ```tsx
+const classes = {
+  container: css({
+    width: "40%",
+    minHeight: 200,
+  }),
+};
+
 export const Asset: HvFlowNodeFC = (props) => {
   const [showDialog, setShowDialog] = useState(false);
   const [details, setDetails] = useState<Node | undefined>();
 
   const node = useFlowNode();
 
-  const classes = {
-    container: css({
-      width: "40%",
-      minHeight: 200,
-    }),
-  };
-
   const handleAction = (event: any, nodeId: string, action: any) => {
     if (!node) return;