pixel-react 1.7.0 → 1.7.1

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

@@ -1,176 +1,176 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import TableTree from './TableTree';
-import Button from '../Button';
-import treeData from './data';
-import Icon from '../Icon/Icon';
-import './TableTreeStories.scss';
-import React, { useState } from 'react';
-
-const meta: Meta<typeof TableTree> = {
-  title: 'Components/Table tree',
-  component: TableTree,
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof TableTree>;
-
-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: () => [],
-  },
-
-  {
-    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: {
-    loadMore: (node) => {
-      console.log(node);
-    },
-    onExpand: (isExpand, node) => {
-      console.log(isExpand, node);
-    },
-    select: 'checkbox',
-    onChange: (node: string[]) => {
-      console.log('-------------------', node);
-    },
-    selected: ['MOD1102'],
-    treeData,
-    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
-        onExpand={(isExpand, node) => {
-          console.log(isExpand, node);
-        }}
-        select="checkbox"
-        onChange={(e, nodes: string[]) => {
-          setSelected(nodes);
-        }}
-        selected={selected}
-        treeData={treeData}
-        columnsData={colData}
-        onClick={(e, data) => {
-          console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
-        }}
-        loadMore={(direction) => {
-          console.log(direction, '-------------------');
-        }}
-      />
-    );
-  },
-};
-export const ControlledRadio: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<string[]>([]);
-    return (
-      <TableTree
-        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;
+import type { Meta, StoryObj } from '@storybook/react';
+import TableTree from './TableTree';
+import Button from '../Button';
+import treeData from './data';
+import Icon from '../Icon/Icon';
+import './TableTreeStories.scss';
+import React, { useState } from 'react';
+
+const meta: Meta<typeof TableTree> = {
+  title: 'Components/Table tree',
+  component: TableTree,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof TableTree>;
+
+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: () => [],
+  },
+
+  {
+    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: {
+    loadMore: (node) => {
+      console.log(node);
+    },
+    onExpand: (isExpand, node) => {
+      console.log(isExpand, node);
+    },
+    select: 'checkbox',
+    onChange: (node: string[]) => {
+      console.log('-------------------', node);
+    },
+    selected: ['MOD1102'],
+    treeData,
+    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
+        onExpand={(isExpand, node) => {
+          console.log(isExpand, node);
+        }}
+        select="checkbox"
+        onChange={(e, nodes: string[]) => {
+          setSelected(nodes);
+        }}
+        selected={selected}
+        treeData={treeData}
+        columnsData={colData}
+        onClick={(e, data) => {
+          console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
+        }}
+        loadMore={(direction) => {
+          console.log(direction, '-------------------');
+        }}
+      />
+    );
+  },
+};
+export const ControlledRadio: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    return (
+      <TableTree
+        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

@@ -1,91 +1,91 @@
-import React, { useCallback, memo } from 'react';
-import './TableTree.scss';
-import { TreeTableProps } from './types';
-import TableHead from './Components/TableHead';
-import TableBody from './Components/TableBody';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import getAllChildIds from './Utils/getAllChildIds';
-import functionCheck from '../../utils/functionCheck/functionCheck';
-
-const TreeTable: React.FC<TreeTableProps> = ({
-  treeData,
-  columnsData,
-  selected = [],
-  select = null,
-  onChange,
-  onClick,
-  onExpand,
-  loadMore = () => {},
-}) => {
-  useIntersectionObserver(['ff-table-tree-last-node'], {
-    root: null,
-    rootMargin: '0px',
-    threshold: 0.1,
-    onIntersect: (entry) => {
-      if (entry.isIntersecting) {
-        if (functionCheck(loadMore)) {
-          let direction = 'up';
-          if (entry.target.id === 'ff-table-tree-last-node') {
-            direction = 'down';
-          }
-          loadMore(direction);
-        }
-        console.log('Element in view:', entry.target.id);
-      }
-    },
-  });
-
-  const handleToggleExpand = useCallback(
-    (node: any) => onExpand?.(true, node?.id),
-    [onExpand]
-  );
-
-  const handleCheckBoxChange = useCallback(
-    (type: string, node: any) => {
-      const nodeId = node.id;
-
-      if (type === 'radio') {
-        onChange?.('true', [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?.('true', updatedSelected);
-      }
-    },
-    [selected, treeData, onChange]
-  );
-
-  const handleRowClick = useCallback(
-    (e: any, node: any) => onClick?.(e, node),
-    [onClick]
-  );
-
-  return (
-    <div className="tree-table-wrap">
-      <table className="tree-table">
-        <TableHead columnsData={columnsData} />
-        <TableBody
-          flattenedTreeData={treeData}
-          columnsData={columnsData}
-          selected={selected}
-          select={select}
-          onRowClick={handleRowClick}
-          onToggleExpand={handleToggleExpand}
-          onCheckBoxChange={handleCheckBoxChange}
-        />
-      </table>
-    </div>
-  );
-};
-
-export default memo(TreeTable);
+import React, { useCallback, memo } from 'react';
+import './TableTree.scss';
+import { TreeTableProps } from './types';
+import TableHead from './Components/TableHead';
+import TableBody from './Components/TableBody';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import getAllChildIds from './Utils/getAllChildIds';
+import functionCheck from '../../utils/functionCheck/functionCheck';
+
+const TreeTable: React.FC<TreeTableProps> = ({
+  treeData,
+  columnsData,
+  selected = [],
+  select = null,
+  onChange,
+  onClick,
+  onExpand,
+  loadMore = () => {},
+}) => {
+  useIntersectionObserver(['ff-table-tree-last-node'], {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+    onIntersect: (entry) => {
+      if (entry.isIntersecting) {
+        if (functionCheck(loadMore)) {
+          let direction = 'up';
+          if (entry.target.id === 'ff-table-tree-last-node') {
+            direction = 'down';
+          }
+          loadMore(direction);
+        }
+        console.log('Element in view:', entry.target.id);
+      }
+    },
+  });
+
+  const handleToggleExpand = useCallback(
+    (node: any) => onExpand?.(true, node?.id),
+    [onExpand]
+  );
+
+  const handleCheckBoxChange = useCallback(
+    (type: string, node: any) => {
+      const nodeId = node.id;
+
+      if (type === 'radio') {
+        onChange?.('true', [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?.('true', updatedSelected);
+      }
+    },
+    [selected, treeData, onChange]
+  );
+
+  const handleRowClick = useCallback(
+    (e: any, node: any) => onClick?.(e, node),
+    [onClick]
+  );
+
+  return (
+    <div className="tree-table-wrap">
+      <table className="tree-table">
+        <TableHead columnsData={columnsData} />
+        <TableBody
+          flattenedTreeData={treeData}
+          columnsData={columnsData}
+          selected={selected}
+          select={select}
+          onRowClick={handleRowClick}
+          onToggleExpand={handleToggleExpand}
+          onCheckBoxChange={handleCheckBoxChange}
+        />
+      </table>
+    </div>
+  );
+};
+
+export default memo(TreeTable);

package/src/components/TableTree/TableTreeStories.scss

@@ -1,22 +1,22 @@
-.ff-parent-node-section {
-  display: flex;
-  gap: 4px;
-  width: 400px;
-  align-items: center;
-
-  .ff-folder-name-style {
-    width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .ff-file-name-style {
-    @extend .ff-folder-name-style;
-    margin-left: 8px;
-  }
-
-  .ff-action-menu {
-    display: flex;
-    gap: 6px;
-  }
-}
+.ff-parent-node-section {
+  display: flex;
+  gap: 4px;
+  width: 400px;
+  align-items: center;
+
+  .ff-folder-name-style {
+    width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .ff-file-name-style {
+    @extend .ff-folder-name-style;
+    margin-left: 8px;
+  }
+
+  .ff-action-menu {
+    display: flex;
+    gap: 6px;
+  }
+}

package/src/components/TableTree/Utils/getAllChildIds.ts

@@ -1,14 +1,14 @@
-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;
-};
-
-export default getAllChildIds;
+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;
+};
+
+export default getAllChildIds;