pixel-react 1.6.0 → 1.6.2

package/src/components/TableTree/TableTree.stories.tsx

@@ -4,7 +4,7 @@ import Button from '../Button';
 import treeData from './data';
 import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
-import React from 'react';
+import React, { useState } from 'react';
 
 const meta: Meta<typeof TableTree> = {
   title: 'Components/Table tree',
@@ -14,119 +14,166 @@ const meta: Meta<typeof TableTree> = {
 
 type Story = StoryObj<typeof TableTree>;
 
-// NOTE :: For Action section use ff-action-section classname
+const colData = [
+  {
+    name: 'Script Name',
+    accessor: 'title',
+    width: '400px',
+    isClickable: true,
+    actions: (row) => {
+      console.log('🚀 ~ row:', row);
+      return [
+        <Icon hoverEffect name="file" />,
+        <Icon hoverEffect name="manage_apps" />,
+        <Icon hoverEffect name="dropzone_icon" />,
+        <Icon hoverEffect name="more" />,
+      ];
+    },
+    isTree: true,
+    defaultValue: 'Project name',
+    defaultActions: () => [],
+  },
 
-// TODO :: below code is a temporary will Modify later
+  {
+    name: 'Module Path',
+    accessor: 'id',
+    width: '200px',
+    isClickable: true,
+  },
+
+  {
+    name: 'Module Path',
+    accessor: 'path',
+    width: '200px',
+    isClickable: true,
+  },
+  {
+    name: 'Module Path',
+    accessor: 'path',
+    width: '200px',
+    isClickable: true,
+  },
+  {
+    name: 'Module Path',
+    accessor: 'path',
+    width: '200px',
+    isClickable: true,
+  },
+  {
+    name: 'Module Path',
+    accessor: 'path',
+    width: '200px',
+    isClickable: true,
+  },
+  {
+    name: 'Module Path',
+    accessor: 'path',
+    width: '200px',
+    isClickable: true,
+  },
+  {
+    name: 'Module Path',
+    accessor: 'path',
+    width: '200px',
+    isClickable: true,
+  },
+  { name: 'Created By', accessor: 'createdByUname', width: '200px' },
+  {
+    name: 'Script Count',
+    accessor: 'moduleLevelScriptCount',
+    width: '200px',
+  },
+  {
+    name: 'state',
+    accessor: 'state',
+    width: '100px',
+    cell: ({ value }) => {
+      return (
+        value && (
+          <Button
+            variant="secondary"
+            onClick={() => {
+              console.log('====', value); //Todo:need to remove
+            }}
+          >
+            {value}
+          </Button>
+        )
+      );
+    },
+  },
+];
 
 export const Default: Story = {
   args: {
     onPagination: (node) => {
       console.log(node);
     },
-    expandedNodes: ['/MOD100111111','/MOD1001/MOD1024'],
+    expandedNodes: ['MOD1102'],
     onExpand: (isExpand, node) => {
       console.log(isExpand, node);
     },
-    select: 'radio',
-    onChange: (e: any, node: any) => {
-      e.preventDefault();
-      e.stopPropagation();
+    select: 'checkbox',
+    onChange: (node: string[]) => {
+      console.log('-------------------', node);
     },
-    selected: ['/MOD1001/MOD1002/MOD10031111'],
+    selected: ['MOD1102'],
     treeData,
-    columnsData: [
-      {
-        name: 'Script Name',
-        accessor: 'title',
-        width: '400px',
-        isClickable: true,
-        actions: (row) => {
-          console.log('🚀 ~ row:', row);
-          return [
-            <Icon hoverEffect name="file" />,
-            <Icon hoverEffect name="manage_apps" />,
-            <Icon hoverEffect name="dropzone_icon" />,
-            <Icon hoverEffect name="more" />,
-          ];
-        },
-        isTree: true,
-        defaultValue: 'Project name',
-        defaultActions: () => [],
-      },
-
-      {
-        name: 'Module Path',
-        accessor: 'searchKey',
-        width: '200px',
-        isClickable: true,
-      },
-
-      {
-        name: 'Module Path',
-        accessor: 'path',
-        width: '200px',
-        isClickable: true,
-      },
-      {
-        name: 'Module Path',
-        accessor: 'path',
-        width: '200px',
-        isClickable: true,
-      },
-      {
-        name: 'Module Path',
-        accessor: 'path',
-        width: '200px',
-        isClickable: true,
-      },
-      {
-        name: 'Module Path',
-        accessor: 'path',
-        width: '200px',
-        isClickable: true,
-      },
-      {
-        name: 'Module Path',
-        accessor: 'path',
-        width: '200px',
-        isClickable: true,
-      },
-      {
-        name: 'Module Path',
-        accessor: 'path',
-        width: '200px',
-        isClickable: true,
-      },
-      { name: 'Created By', accessor: 'createdByUname', width: '200px' },
-      {
-        name: 'Script Count',
-        accessor: 'moduleLevelScriptCount',
-        width: '200px',
-      },
-      {
-        name: 'state',
-        accessor: 'state',
-        width: '100px',
-        cell: ({ value }) => {
-          return (
-            value && (
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  console.log('====', value); //Todo:need to remove
-                }}
-              >
-                {value}
-              </Button>
-            )
-          );
-        },
-      },
-    ],
+    columnsData: colData,
     onClick: (e, data) => {
       console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
     },
   },
 };
 
+export const ControlledCheckBox: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    return (
+      <TableTree
+        expandedNodes={['MOD1102']}
+        onExpand={(isExpand, node) => {
+          console.log(isExpand, node);
+        }}
+        select="checkbox"
+        onChange={(nodes: string[]) => {
+          setSelected(nodes);
+        }}
+        selected={selected}
+        treeData={treeData}
+        columnsData={colData}
+        onClick={(e, data) => {
+          console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
+        }}
+        onPagination={(direction) => {
+          console.log(direction,'-------------------');
+        }}
+      />
+    );
+  },
+};
+export const ControlledRadio: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    return (
+      <TableTree
+        expandedNodes={['MOD1102']}
+        onExpand={(isExpand, node) => {
+          console.log(isExpand, node);
+        }}
+        select="radio"
+        onChange={(nodes: string[]) => {
+          setSelected(nodes);
+        }}
+        selected={selected}
+        treeData={treeData}
+        columnsData={colData}
+        onClick={(e, data) => {
+          console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
+        }}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/TableTree/TableTree.tsx

@@ -12,6 +12,20 @@ const renderSpaces = (level: number) =>
     <span key={i} className="tree-table-space-block" />
   ));
 
+// Recursive function to get all child node IDs (including nested children)
+const getAllChildIds = (nodeId: string, data: any[]): string[] => {
+  let result = [nodeId];
+
+  // Traverse the tree and find children based on parentId
+  data.forEach(({ node }) => {
+    if (node.parentId === nodeId) {
+      result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
+    }
+  });
+
+  return result;
+};
+
 // Component: TableCell
 const TableCell = React.memo(
   ({
@@ -30,7 +44,7 @@ const TableCell = React.memo(
     isExpanded: boolean;
     selected: string[];
     select: string | null;
-    onCheckBoxChange: (e: any, node: any) => void;
+    onCheckBoxChange: (type: string, node: any) => void;
     onToggleExpand: (node: any) => void;
   }) => (
     <td>
@@ -39,7 +53,7 @@ const TableCell = React.memo(
         <span
           className={`tree-table-space-block last-block  ${
             isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '': 'no-folder'}`}
+          } ${node.folder ? '' : 'no-folder'}`}
           onClick={() => onToggleExpand(node)}
         >
           {node.folder && <Arrow />}
@@ -48,16 +62,16 @@ const TableCell = React.memo(
       <span className="tree-table-td-content">
         {col.isTree && select === 'checkbox' && (
           <Checkbox
-            checked={selected.includes(node.searchKey)}
-            onChange={(e) => onCheckBoxChange(e, node)}
+            checked={selected.includes(node.id)}
+            onChange={() => onCheckBoxChange('checkbox', node)}
           />
         )}
         {col.isTree && select === 'radio' && (
           <RadioButton
             name={node.title}
-            checked={selected.includes(node.searchKey)}
-            value={node.searchKey}
-            onChange={(e) => onCheckBoxChange(e, node)}
+            checked={selected.includes(node.id)}
+            value={node.id}
+            onChange={() => onCheckBoxChange('radio', node)}
           />
         )}
         {prepareData(node, col)}
@@ -90,7 +104,7 @@ const TableRow = React.memo(
     select: string | null;
     onRowClick: (e: any, node: any) => void;
     onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (e: any, node: any) => void;
+    onCheckBoxChange: (type: string, node: any) => void;
   }) => (
     <tr
       data-level={level}
@@ -169,11 +183,11 @@ const TableBody = React.memo(
     select: string | null;
     onRowClick: (e: any, node: any) => void;
     onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (e: any, node: any) => void;
+    onCheckBoxChange: (type: string, node: any) => void;
   }) => (
     <tbody>
       {flattenedTreeData.map(({ node, level }) => {
-        const isExpanded = expandedNodes.includes(node.searchKey);
+        const isExpanded = expandedNodes.includes(node?.id);
         return (
           <TableRow
             key={node.id}
@@ -205,14 +219,35 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onExpand,
 }) => {
   const handleToggleExpand = useCallback(
-    (node: any) =>
-      onExpand?.(!expandedNodes.includes(node.searchKey), node.searchKey),
+    (node: any) => onExpand?.(!expandedNodes.includes(node?.id), node?.id),
     [expandedNodes, onExpand]
   );
+
   const handleCheckBoxChange = useCallback(
-    (e: any, node: any) => onChange?.(e, node),
-    [onChange]
+    (type: string, node: any) => {
+      const nodeId = node.id;
+
+      if (type === 'radio') {
+        onChange?.([nodeId]);
+      } else {
+        let updatedSelected = [...selected];
+
+        if (!updatedSelected.includes(nodeId)) {
+          const childIds = getAllChildIds(nodeId, treeData);
+          updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
+        } else {
+          const childIds = getAllChildIds(nodeId, treeData);
+          updatedSelected = updatedSelected.filter(
+            (id) => !childIds.includes(id)
+          );
+        }
+
+        onChange?.(updatedSelected);
+      }
+    },
+    [selected, treeData, onChange]
   );
+
   const handleRowClick = useCallback(
     (e: any, node: any) => onClick?.(e, node),
     [onClick]