pixel-react 1.5.9 → 1.6.0

package/src/components/TableTree/TableTree.tsx

@@ -1,307 +1,240 @@
-/* eslint-disable */
-// @ts-nocheck
-import React, {
-  ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useMemo, useCallback } from 'react';
+import './TableTree.scss';
 import { prepareData } from '../../utils/TableCell/TableCell';
-import Icon from '../Icon';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
+import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
 import Checkbox from '../Checkbox';
-import './TableTree.scss';
 import RadioButton from '../RadioButton';
-import Typography from '../Typography';
-
-import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
-
-interface ColumnDataProps {
-  name: string;
-  accessor: string;
-  width: string;
-  isClickable?: boolean;
-  minWidth?: string;
-  cell?: (e: any) => JSX.Element | string | ReactNode;
-  actions?: (e: any) => JSX.Element | string | ReactNode;
-}
-
-interface ObjectProps {
-  [key: string]: any;
-}
-
-interface TableTreeProps {
-  select: 'checkbox' | 'radio' | 'none';
-  columnsData: Array<ColumnDataProps>;
-  treeData: Array<ObjectProps>;
-  onClick?: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    data: any
-  ) => void;
-  onChange?: (e: any, node: any) => void;
-  selected: Array<string>;
-  onPagination?: (node: ObjectProps) => void; // New prop for pagination
-}
-
-const TableTree = ({
-  columnsData,
-  treeData,
-  select,
-  onClick = () => {},
-  onChange,
-  selected,
-  onPagination,
-}: TableTreeProps) => {
-  const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
-    new Set()
+import { 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" />
+  ));
+
+// Component: TableCell
+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: (e: any, node: any) => void;
+    onToggleExpand: (node: any) => void;
+  }) => (
+    <td>
+      {col.isTree && renderSpaces(level + 1)}
+      {col.isTree && (
+        <span
+          className={`tree-table-space-block last-block  ${
+            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.searchKey)}
+            onChange={(e) => onCheckBoxChange(e, node)}
+          />
+        )}
+        {col.isTree && select === 'radio' && (
+          <RadioButton
+            name={node.title}
+            checked={selected.includes(node.searchKey)}
+            value={node.searchKey}
+            onChange={(e) => onCheckBoxChange(e, 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,
+    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: (e: any, node: any) => void;
+  }) => (
+    <tr
+      data-level={level}
+      className="show"
+      onClick={(e) => onRowClick(e, node)}
+    >
+      {columnsData.map((col) => (
+        <TableCell
+          key={col.name}
+          col={col}
+          node={node}
+          level={level}
+          isExpanded={isExpanded}
+          selected={selected}
+          select={select}
+          onCheckBoxChange={onCheckBoxChange}
+          onToggleExpand={onToggleExpand}
+        />
+      ))}
+    </tr>
+  )
+);
+
+// Component: TableHead
+const TableHead = React.memo(({ columnsData }: { columnsData: any[] }) => {
+  const hasDefaultValues = useMemo(
+    () => columnsData.some(({ defaultValue }) => !!defaultValue),
+    [columnsData]
   );
-  const triggeredPaginationNodes = useRef(new Set()); // Tracks nodes for which pagination is triggered
-
-  useLayoutEffect(() => {
-    const defaultExpanded: Set<ObjectProps> = new Set();
-
-    // Recursive function to add nodes and their children to the expanded set
-    const expandNodeRecursively = (node: ObjectProps) => {
-      if (node.expanded) {
-        defaultExpanded.add(node);
-
-        if (node.children) {
-          node.children.forEach((child: ObjectProps) =>
-            expandNodeRecursively(child)
-          );
-        }
-      }
-    };
-
-    treeData.forEach((node) => {
-      expandNodeRecursively(node);
-    });
-
-    setExpandedNodes(defaultExpanded);
-  }, [treeData]);
-
-  // Function to calculate total children height
-  const calculateTotalChildrenHeight = (node: any): number => {
-    if (!node.children || node.children.length === 0) {
-      return 1;
-    }
-    let totalHeight = 1;
-    if (expandedNodes.has(node)) {
-      node.children.forEach((child: any) => {
-        totalHeight += calculateTotalChildrenHeight(child);
-      });
-    }
-    return totalHeight;
-  };
-
-  const TreeNode = ({ node, level, isLast }: any) => {
-    const nodeRef = useRef<HTMLTableRowElement | null>(null);
-    const lastChildRef = useRef<HTMLTableRowElement | null>(null); // Ref for pagination
-    const [nodeHeight, setNodeHeight] = useState<number>(0);
-    const [totalChildrenHeight, setTotalChildrenHeight] = useState<number>(0);
-
-    const isExpanded = expandedNodes.has(node);
-
-    useLayoutEffect(() => {
-      if (nodeRef.current) {
-        const observer = new ResizeObserver(() => {
-          const currentHeight = nodeRef.current?.offsetHeight || 0;
-          setNodeHeight(currentHeight);
-
-          const childrenHeight = calculateTotalChildrenHeight(node);
-          setTotalChildrenHeight(childrenHeight);
-        });
-
-        observer.observe(nodeRef.current);
-
-        return () => {
-          observer.disconnect();
-        };
-      }
-    }, [isExpanded, node]);
-
-    useEffect(() => {
-      if (!isExpanded || !lastChildRef.current || !onPagination) return;
 
-      const observer = new IntersectionObserver(
-        (entries) => {
-          if (
-            entries[0].isIntersecting &&
-            !triggeredPaginationNodes.current.has(node.key)
-          ) {
-            triggeredPaginationNodes.current.add(node.key); // Mark node as paginated
-            onPagination(node); // Trigger the pagination callback
-          }
-        },
-        {
-          root: null, // Use the viewport as the root
-          threshold: 1.0, // Trigger when fully visible
-        }
-      );
-
-      observer.observe(lastChildRef.current);
-
-      return () => observer.disconnect();
-    }, [isExpanded, onPagination, node]);
-
-    const handleToggleExpand = () => {
-      setExpandedNodes((prev) => {
-        const newExpandedNodes = new Set(prev);
-        if (newExpandedNodes.has(node)) {
-          newExpandedNodes.delete(node); // Collapse the node
-        } else {
-          newExpandedNodes.add(node); // Expand the node
-        }
-        return newExpandedNodes;
-      });
-    };
-
-    const handleCheckBoxChange = (e, node) => {
-      if (onChange) {
-        onChange(e, node);
-      }
-    };
-
-    const renderRowData = (columnsData: any) => {
-      return columnsData.map((column: any) => {
-        if (column.accessor === 'title') {
-          return (
-            <td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
-              <div className="first-div">
-                {' '}
-                <span className="ff-toggle-folder" onClick={handleToggleExpand}>
-                  {node.folder && (
-                    <span
-                      className={`ff-toggle-arrow-icon ${
-                        isExpanded ? 'ff-expanded' : 'ff-collapsed'
-                      }`}
-                    >
-                      <Arrow />
-                    </span>
-                  )}
-                </span>
-                <div
-                  className="ff-title"
-                  style={{ fontWeight: node.folder ? 600 : 400 }}
-                  onClick={(event) => onClick(event, node)}
-                >
-                  {select === 'checkbox' && (
-                    <Checkbox
-                      checked={selected.includes(node.key)}
-                      onChange={(e) => handleCheckBoxChange(e, node)}
-                    />
-                  )}
-                  {select === 'radio' && (
-                    <RadioButton
-                      name={node.title}
-                      value={node.key}
-                      onChange={(e) => handleCheckBoxChange(e, node)}
-                    />
-                  )}
-
-                  <Typography className="ff-title-label" fontWeight="medium">
-                    {prepareData(node, column)}
-                  </Typography>
-
-                  {column.actions && (
-                    <div className="ff-title-action-container">
-                      {column.actions(node)}
+  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>
                   )}
-                </div>
-              </div>
-            </td>
-          );
-        } else if (column.accessor) {
-          return (
-            <td key={column.accessor} style={{ maxWidth: column.width }}>
-              {prepareData(node, column)}
+                </span>
+              )}
             </td>
-          );
-        }
-      });
-    };
-
-    const renderTree = (nodes: any, level = 0) => {
-      return nodes.map((childNode: any, index: number) => {
-        const isChildLast = index === nodes.length - 1;
-        const ref = isChildLast ? lastChildRef : null;
+          ))}
+        </tr>
+      )}
+    </thead>
+  );
+});
+
+// Component: TableBody
+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: (e: any, node: any) => void;
+  }) => (
+    <tbody>
+      {flattenedTreeData.map(({ node, level }) => {
+        const isExpanded = expandedNodes.includes(node.searchKey);
         return (
-          <TreeNode
-            key={childNode.key || index}
-            node={childNode}
+          <TableRow
+            key={node.id}
+            node={node}
             level={level}
-            isLast={isChildLast}
-            ref={ref}
+            columnsData={columnsData}
+            isExpanded={isExpanded}
+            selected={selected}
+            select={select}
+            onRowClick={onRowClick}
+            onToggleExpand={onToggleExpand}
+            onCheckBoxChange={onCheckBoxChange}
           />
         );
-      });
-    };
-
-    return (
-      <>
-        <tr
-          ref={nodeRef}
-          className={`ff-node-li ${node.children ? 'ff-has-children' : ''} `}
-          style={
-            {
-              '--level': level,
-              '--node-height': `${nodeHeight}px`,
-              '--total-children-height': `${
-                totalChildrenHeight * nodeHeight
-              }px`,
-            } as React.CSSProperties
-          }
-        >
-          {renderRowData(columnsData)}
-        </tr>
+      })}
+    </tbody>
+  )
+);
 
-        {isExpanded &&
-          !checkEmpty(node?.children) &&
-          renderTree(node.children, level + 1)}
-      </>
-    );
-  };
-
-  const renderTree = (nodes: any, level = 0) => {
-    return nodes.map((node: any, index: number) => {
-      const isLast = index === nodes.length - 1;
-      return (
-        <TreeNode
-          key={node.key || index}
-          node={node}
-          level={level}
-          isLast={isLast}
-        />
-      );
-    });
-  };
+// Component: TreeTable
+const TreeTable: React.FC<TreeTableProps> = ({
+  treeData,
+  columnsData,
+  selected = [],
+  select = null,
+  onChange,
+  onClick,
+  expandedNodes = [],
+  onExpand,
+}) => {
+  const handleToggleExpand = useCallback(
+    (node: any) =>
+      onExpand?.(!expandedNodes.includes(node.searchKey), node.searchKey),
+    [expandedNodes, onExpand]
+  );
+  const handleCheckBoxChange = useCallback(
+    (e: any, node: any) => onChange?.(e, node),
+    [onChange]
+  );
+  const handleRowClick = useCallback(
+    (e: any, node: any) => onClick?.(e, node),
+    [onClick]
+  );
 
   return (
-    <div className="ff-tree-container">
-      <table>
-        <thead>
-          <tr>
-            {columnsData.map((column: any, index) => (
-              <th
-                key={column.accessor}
-                style={
-                  index === 0
-                    ? { minWidth: column.width }
-                    : { width: column.width }
-                }
-              >
-                {column.name}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>{renderTree(treeData)}</tbody>
+    <div className="tree-table-wrap">
+      <table className="tree-table">
+        <TableHead columnsData={columnsData} />
+        <TableBody
+          flattenedTreeData={treeData}
+          columnsData={columnsData}
+          expandedNodes={expandedNodes}
+          selected={selected}
+          select={select}
+          onRowClick={handleRowClick}
+          onToggleExpand={handleToggleExpand}
+          onCheckBoxChange={handleCheckBoxChange}
+        />
       </table>
     </div>
   );
 };
 
-export default TableTree;
+export default TreeTable;