pixel-react 1.6.2 → 1.6.3

package/src/components/TableTree/Components/TableHead.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { TableHeadProps } from '../types';
+
+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>
+  );
+});
+
+export default TableHead;

package/src/components/TableTree/Components/TableRow.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TableRowProps } from '../types';
+import TableCell from './TableCell';
+
+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>
+  )
+);
+
+export default TableRow;

package/src/components/TableTree/TableTree.scss

@@ -1,8 +1,3 @@
-html,
-* {
-  font-family: 'Open Sans';
-}
-
 .tree-table-space-block {
   display: inline-block;
   width: 20px;
@@ -39,6 +34,14 @@ html,
 .tree-table-wrap {
   width: 100%;
 }
+thead{
+  position: sticky;
+  top: 12px;
+}
+
+tbody{
+  overflow: scroll;
+}
 
 .tree-table {
   border: 1px solid #f1f1f1;

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,7 @@ 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 { TreeTableProps } from './types';
+import { TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, TreeTableProps } from './types';
 
 // Helper to render spaces for levels
 const renderSpaces = (level: number) =>
@@ -32,27 +32,17 @@ const TableCell = React.memo(
     col,
     node,
     level,
-    isExpanded,
     selected,
     select,
     onCheckBoxChange,
     onToggleExpand,
-  }: {
-    col: any;
-    node: any;
-    level: number;
-    isExpanded: boolean;
-    selected: string[];
-    select: string | null;
-    onCheckBoxChange: (type: string, node: any) => void;
-    onToggleExpand: (node: any) => void;
-  }) => (
+  }: TableCellProps) => (
     <td>
       {col.isTree && renderSpaces(level + 1)}
       {col.isTree && (
         <span
           className={`tree-table-space-block last-block  ${
-            isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
           } ${node.folder ? '' : 'no-folder'}`}
           onClick={() => onToggleExpand(node)}
         >
@@ -89,23 +79,12 @@ const TableRow = React.memo(
     node,
     level,
     columnsData,
-    isExpanded,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: {
-    node: any;
-    level: number;
-    columnsData: any[];
-    isExpanded: boolean;
-    selected: string[];
-    select: string | null;
-    onRowClick: (e: any, node: any) => void;
-    onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (type: string, node: any) => void;
-  }) => (
+  }: TableRowProps) => (
     <tr
       data-level={level}
       className="show"
@@ -117,7 +96,6 @@ const TableRow = React.memo(
           col={col}
           node={node}
           level={level}
-          isExpanded={isExpanded}
           selected={selected}
           select={select}
           onCheckBoxChange={onCheckBoxChange}
@@ -129,7 +107,7 @@ const TableRow = React.memo(
 );
 
 // Component: TableHead
-const TableHead = React.memo(({ columnsData }: { columnsData: any[] }) => {
+const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
   const hasDefaultValues = useMemo(
     () => columnsData.some(({ defaultValue }) => !!defaultValue),
     [columnsData]
@@ -169,32 +147,20 @@ const TableBody = React.memo(
   ({
     flattenedTreeData,
     columnsData,
-    expandedNodes,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: {
-    flattenedTreeData: any[];
-    columnsData: any[];
-    expandedNodes: string[];
-    selected: string[];
-    select: string | null;
-    onRowClick: (e: any, node: any) => void;
-    onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (type: string, node: any) => void;
-  }) => (
+  }: TableBodyProps) => (
     <tbody>
       {flattenedTreeData.map(({ node, level }) => {
-        const isExpanded = expandedNodes.includes(node?.id);
         return (
           <TableRow
             key={node.id}
             node={node}
             level={level}
             columnsData={columnsData}
-            isExpanded={isExpanded}
             selected={selected}
             select={select}
             onRowClick={onRowClick}
@@ -215,12 +181,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
   select = null,
   onChange,
   onClick,
-  expandedNodes = [],
   onExpand,
 }) => {
   const handleToggleExpand = useCallback(
-    (node: any) => onExpand?.(!expandedNodes.includes(node?.id), node?.id),
-    [expandedNodes, onExpand]
+    (node: any) => onExpand?.(true, node?.id),
+    [ onExpand]
   );
 
   const handleCheckBoxChange = useCallback(
@@ -260,7 +225,6 @@ const TreeTable: React.FC<TreeTableProps> = ({
         <TableBody
           flattenedTreeData={treeData}
           columnsData={columnsData}
-          expandedNodes={expandedNodes}
           selected={selected}
           select={select}
           onRowClick={handleRowClick}

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

@@ -0,0 +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;
+};

package/src/components/TableTree/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface TreeNode {
   key: string;
   [key: string]: any;
@@ -5,16 +7,53 @@ export interface TreeNode {
   expanded?: boolean;
 }
 
+declare type JSX = ReactNode | JSX.Element[] | string | null;
+
+export interface TableCellProps {
+  col: any;
+  node: any;
+  level: number;
+  selected: string[];
+  select: string | null;
+  onCheckBoxChange: (type: string, node: any) => void;
+  onToggleExpand: (node: any) => void;
+}
+
+export interface TableHeadProps {
+  columnsData: any[];
+}
+
+export interface TableBodyProps {
+  flattenedTreeData: any[];
+  columnsData: any[];
+  selected: string[];
+  select: string | null;
+  onRowClick: (e: any, node: any) => void;
+  onToggleExpand: (node: any) => void;
+  onCheckBoxChange: (type: string, node: any) => void;
+}
+
+export interface TableRowProps {
+  node: any;
+  level: number;
+  columnsData: any[];
+  selected: string[];
+  select: string | null;
+  onRowClick: (e: any, node: any) => void;
+  onToggleExpand: (node: any) => void;
+  onCheckBoxChange: (type: string, node: any) => void;
+}
+
 export interface Column {
   name: string;
   accessor: string;
   width: string;
   isClickable?: boolean;
-  cell?: (row: any) => JSX.Element | string | null;
-  actions?: (row: any) => JSX.Element[];
+  cell?: (row: any) => JSX
+  actions?: (row: any) => JSX
   isTree?: boolean;
   defaultValue?: string;
-  defaultActions?: () => JSX.Element[];
+  defaultActions?: () => JSX
 }
 
 export interface TreeTableProps {
@@ -24,7 +63,6 @@ export interface TreeTableProps {
   select?: 'radio' | 'checkbox' | 'none';
   onChange?: (nodes: string[]) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
-  expandedNodes: string[];
   onExpand?: (_isExpanded: boolean, node: string) => void;
   onPagination?: (_direction: string) => void;
 }