pixel-react 1.6.3 → 1.6.6

package/src/components/TableTree/TableTree.tsx

@@ -1,239 +1,245 @@
-import React, { useMemo, useCallback } from 'react';
-import './TableTree.scss';
-import { prepareData } from '../../utils/TableCell/TableCell';
-import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
-import Checkbox from '../Checkbox';
-import RadioButton from '../RadioButton';
-import { TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, TreeTableProps } from './types';
-
-// Helper to render spaces for levels
-const renderSpaces = (level: number) =>
-  Array.from({ length: level }).map((_, i) => (
-    <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(
-  ({
-    col,
-    node,
-    level,
-    selected,
-    select,
-    onCheckBoxChange,
-    onToggleExpand,
-  }: TableCellProps) => (
-    <td>
-      {col.isTree && renderSpaces(level + 1)}
-      {col.isTree && (
-        <span
-          className={`tree-table-space-block last-block  ${
-            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '' : 'no-folder'}`}
-          onClick={() => onToggleExpand(node)}
-        >
-          {node.folder && <Arrow />}
-        </span>
-      )}
-      <span className="tree-table-td-content">
-        {col.isTree && select === 'checkbox' && (
-          <Checkbox
-            checked={selected.includes(node.id)}
-            onChange={() => onCheckBoxChange('checkbox', node)}
-          />
-        )}
-        {col.isTree && select === 'radio' && (
-          <RadioButton
-            name={node.title}
-            checked={selected.includes(node.id)}
-            value={node.id}
-            onChange={() => onCheckBoxChange('radio', node)}
-          />
-        )}
-        {prepareData(node, col)}
-      </span>
-      {col.actions && (
-        <div className="table-tree-row-action">{col.actions(node)}</div>
-      )}
-    </td>
-  )
-);
-
-// Component: TableRow
-const TableRow = React.memo(
-  ({
-    node,
-    level,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableRowProps) => (
-    <tr
-      data-level={level}
-      className="show"
-      onClick={(e) => onRowClick(e, node)}
-    >
-      {columnsData.map((col) => (
-        <TableCell
-          key={col.name}
-          col={col}
-          node={node}
-          level={level}
-          selected={selected}
-          select={select}
-          onCheckBoxChange={onCheckBoxChange}
-          onToggleExpand={onToggleExpand}
-        />
-      ))}
-    </tr>
-  )
-);
-
-// Component: TableHead
-const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
-  const hasDefaultValues = useMemo(
-    () => columnsData.some(({ defaultValue }) => !!defaultValue),
-    [columnsData]
-  );
-
-  return (
-    <thead>
-      <tr>
-        {columnsData.map(({ name }) => (
-          <th key={name}>{name}</th>
-        ))}
-      </tr>
-      {hasDefaultValues && (
-        <tr>
-          {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td key={index}>
-              {defaultValue && (
-                <span className="">
-                  {defaultValue}
-                  {defaultActions && (
-                    <div className="table-tree-row-action">
-                      {defaultActions()}
-                    </div>
-                  )}
-                </span>
-              )}
-            </td>
-          ))}
-        </tr>
-      )}
-    </thead>
-  );
-});
-
-// Component: TableBody
-const TableBody = React.memo(
-  ({
-    flattenedTreeData,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableBodyProps) => (
-    <tbody>
-      {flattenedTreeData.map(({ node, level }) => {
-        return (
-          <TableRow
-            key={node.id}
-            node={node}
-            level={level}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={onRowClick}
-            onToggleExpand={onToggleExpand}
-            onCheckBoxChange={onCheckBoxChange}
-          />
-        );
-      })}
-    </tbody>
-  )
-);
-
-// Component: TreeTable
-const TreeTable: React.FC<TreeTableProps> = ({
-  treeData,
-  columnsData,
-  selected = [],
-  select = null,
-  onChange,
-  onClick,
-  onExpand,
-}) => {
-  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?.([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]
-  );
-
-  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 TreeTable;
+import React, { useMemo, useCallback } from 'react';
+import './TableTree.scss';
+import { prepareData } from '../../utils/TableCell/TableCell';
+import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
+import Checkbox from '../Checkbox';
+import RadioButton from '../RadioButton';
+import {
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRowProps,
+  TreeTableProps,
+} from './types';
+
+// Helper to render spaces for levels
+const renderSpaces = (level: number) =>
+  Array.from({ length: level }).map((_, i) => (
+    <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(
+  ({
+    col,
+    node,
+    level,
+    selected,
+    select,
+    onCheckBoxChange,
+    onToggleExpand,
+  }: TableCellProps) => (
+    <td>
+      {col.isTree && renderSpaces(level + 1)}
+      {col.isTree && (
+        <span
+          className={`tree-table-space-block last-block  ${
+            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+          } ${node.folder ? '' : 'no-folder'}`}
+          onClick={() => onToggleExpand(node)}
+        >
+          {node.folder && <Arrow />}
+        </span>
+      )}
+      <span className="tree-table-td-content">
+        {col.isTree && select === 'checkbox' && (
+          <Checkbox
+            checked={selected.includes(node.id)}
+            onChange={() => onCheckBoxChange('checkbox', node)}
+          />
+        )}
+        {col.isTree && select === 'radio' && (
+          <RadioButton
+            name={node.title}
+            checked={selected.includes(node.id)}
+            value={node.id}
+            onChange={() => onCheckBoxChange('radio', node)}
+          />
+        )}
+        {prepareData(node, col)}
+      </span>
+      {col.actions && (
+        <div className="table-tree-row-action">{col.actions(node)}</div>
+      )}
+    </td>
+  )
+);
+
+// Component: TableRow
+const TableRow = React.memo(
+  ({
+    node,
+    level,
+    columnsData,
+    selected,
+    select,
+    onRowClick,
+    onToggleExpand,
+    onCheckBoxChange,
+  }: TableRowProps) => (
+    <tr
+      data-level={level}
+      className="show"
+      onClick={(e) => onRowClick(e, node)}
+    >
+      {columnsData.map((col) => (
+        <TableCell
+          key={col.name}
+          col={col}
+          node={node}
+          level={level}
+          selected={selected}
+          select={select}
+          onCheckBoxChange={onCheckBoxChange}
+          onToggleExpand={onToggleExpand}
+        />
+      ))}
+    </tr>
+  )
+);
+
+// Component: TableHead
+const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
+  const hasDefaultValues = useMemo(
+    () => columnsData.some(({ defaultValue }) => !!defaultValue),
+    [columnsData]
+  );
+
+  return (
+    <thead>
+      <tr>
+        {columnsData.map(({ name }) => (
+          <th key={name}>{name}</th>
+        ))}
+      </tr>
+      {hasDefaultValues && (
+        <tr>
+          {columnsData.map(({ defaultValue, defaultActions }, index) => (
+            <td key={index}>
+              {defaultValue && (
+                <span className="">
+                  {defaultValue}
+                  {defaultActions && (
+                    <div className="table-tree-row-action">
+                      {defaultActions()}
+                    </div>
+                  )}
+                </span>
+              )}
+            </td>
+          ))}
+        </tr>
+      )}
+    </thead>
+  );
+});
+
+// Component: TableBody
+const TableBody = React.memo(
+  ({
+    flattenedTreeData,
+    columnsData,
+    selected,
+    select,
+    onRowClick,
+    onToggleExpand,
+    onCheckBoxChange,
+  }: TableBodyProps) => (
+    <tbody>
+      {flattenedTreeData.map(({ node, level }) => {
+        return (
+          <TableRow
+            key={node.id}
+            node={node}
+            level={level}
+            columnsData={columnsData}
+            selected={selected}
+            select={select}
+            onRowClick={onRowClick}
+            onToggleExpand={onToggleExpand}
+            onCheckBoxChange={onCheckBoxChange}
+          />
+        );
+      })}
+    </tbody>
+  )
+);
+
+// Component: TreeTable
+const TreeTable: React.FC<TreeTableProps> = ({
+  treeData,
+  columnsData,
+  selected = [],
+  select = null,
+  onChange,
+  onClick,
+  onExpand,
+}) => {
+  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 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,12 +1,12 @@
-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;
-};
+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;
+};