pixel-react 1.9.7 → 1.9.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -19,7 +19,7 @@ const TableBody = React.memo(
         {flattenedTreeData?.map((node, index) => {
           return (
             <TableRow
-              key={node.searchKey}
+              key={node.key}
               node={node}
               columnsData={columnsData}
               selected={selected}
@@ -27,6 +27,7 @@ const TableBody = React.memo(
               onRowClick={onRowClick}
               onToggleExpand={(node) => onToggleExpand(node, index)}
               onCheckBoxChange={onCheckBoxChange}
+              index={index}
             />
           );
         })}

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

@@ -5,6 +5,7 @@ import { TableCellProps } from '../types';
 import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
 import React from 'react';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import LabelEditTextField from '../../LabelEditTextField';
 
 const renderSpaces = (
   level: number,
@@ -43,6 +44,7 @@ const TableCell = React.memo(
     select,
     onCheckBoxChange,
     onToggleExpand,
+    index,
   }: TableCellProps) => (
     <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
       {col.isTree &&
@@ -69,27 +71,37 @@ const TableCell = React.memo(
             col.isTree && node.folder ? 'folder' : ''
           }`}
         >
-          {col.isTree && select === 'checkbox' && (
-            <Checkbox
-              checked={selected.includes(node.id)}
-              onChange={(e) => onCheckBoxChange(e, node)}
-            />
+          {!node?.showInput && (
+            <>
+              {col.isTree && select === 'checkbox' && (
+                <Checkbox
+                  checked={node?.checked || false}
+                  partial={node?.checked === 'partial'}
+                  onChange={(e) => onCheckBoxChange(e, node)}
+                />
+              )}
+              {col.isTree && select === 'radio' && (
+                <RadioButton
+                  name={node.title}
+                  checked={selected.includes(node.id)}
+                  value={node.id}
+                  onChange={(e) => onCheckBoxChange(e, node)}
+                />
+              )}
+            </>
           )}
-          {col.isTree && select === 'radio' && (
-            <RadioButton
-              name={node.title}
-              checked={selected.includes(node.id)}
-              value={node.id}
-              onChange={(e) => onCheckBoxChange(e, node)}
-            />
+          {node.showInput && col.isTree ? (
+            <LabelEditTextField isOpen={true} />
+          ) : (
+            <span className="tree-table-td-content-text">
+              {prepareData(node, col)}
+            </span>
           )}
-          <span className="tree-table-td-content-text">
-            {prepareData(node, col)}
-          </span>
         </span>
       </div>
-      {col.actions && (
-        <div className="table-tree-row-action">{col.actions(node)}</div>
+
+      {col.actions && !node?.showInput && (
+        <div className="table-tree-row-action">{col.actions(node, index)}</div>
       )}
     </td>
   )

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

@@ -11,6 +11,7 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
+    index,
   }: TableRowProps) => (
     <tr
       data-level={node.hierarchy}
@@ -26,6 +27,7 @@ const TableRow = React.memo(
           select={select}
           onCheckBoxChange={onCheckBoxChange}
           onToggleExpand={onToggleExpand}
+          index={index}
         />
       ))}
     </tr>

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,6 @@ import { TreeTableProps } from './types';
 import TableHead from './Components/TableHead';
 import TableBody from './Components/TableBody';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import functionCheck from '../../utils/functionCheck/functionCheck';
 import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
 
 const TreeTable: React.FC<TreeTableProps> = ({
@@ -28,14 +27,13 @@ const TreeTable: React.FC<TreeTableProps> = ({
       threshold: 0.1,
       onIntersect: (entry) => {
         if (entry.isIntersecting) {
-          if (functionCheck(loadMore)) {
-            let direction = 'up';
+          if (loadMore) {
+            let direction = 'above';
             if (entry.target.id === 'ff-table-tree-last-node') {
-              direction = 'down';
+              direction = 'below';
             }
             loadMore(direction);
           }
-          console.log('Element in view:', entry.target.id);
         }
       },
     }

package/src/components/TableTree/types.ts

@@ -10,6 +10,7 @@ export interface TableCellProps {
   select: string | null;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
   onToggleExpand: (node: any) => void;
+  index: number;
 }
 
 export interface TableHeadProps {
@@ -34,6 +35,7 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: TreeNode) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
+  index: number;
 }
 
 export interface Column {

package/src/utils/getTreeDetails/getTreeDetails.ts

@@ -36,9 +36,9 @@ export const getTreeDetails = (
       }
       break;
     case 'start':
-      if (oldData.length > 0) {
-        root = oldData[0];
-        treeDataList = oldData.slice(1);
+      if (newData.length > 0) {
+        root = newData[0];
+        treeDataList = newData.slice(1);
       } else {
         throw new Error('Tree data list is empty, cannot determine root.');
       }

package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts

@@ -47,13 +47,10 @@ export const handleTreeNodeSect = (
     }
   }
 
-  // Find the target node and update its state
   const targetNode = nodesMap.get(key);
   if (targetNode) {
     targetNode.checked = isChecked;
-    // Update children recursively
     updateChildren(key, isChecked);
-    // Update parents recursively
     updateParents(key);
   }