pixel-react 1.5.9 → 1.6.1

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,114 +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);
     },
-    select: 'radio',
-    onChange: (e: any, node: any) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      console.log(node, '------------', e.target.value);
+    expandedNodes: ['MOD1102'],
+    onExpand: (isExpand, node) => {
+      console.log(isExpand, node);
     },
-    selected: ['MOD1003'],
+    select: 'checkbox',
+    onChange: (node: string[]) => {
+      console.log('-------------------', node);
+    },
+    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" />,
-          ];
-        },
-      },
-
-      {
-        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: '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;