pixel-react 1.5.4 → 1.5.6

package/src/components/TableTree/TableTree.tsx

@@ -1,305 +1,307 @@
-/* eslint-disable */
-// @ts-nocheck
-import React, {
-  ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { prepareData } from '../../utils/TableCell/TableCell';
-import Icon from '../Icon';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-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()
-  );
-  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' : ''}`}>
-              <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)}
-                  </div>
-                )}
-              </div>
-            </td>
-          );
-        } else if (column.accessor) {
-          return (
-            <td key={column.accessor} style={{ maxWidth: column.width }}>
-              {prepareData(node, column)}
-            </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;
-        return (
-          <TreeNode
-            key={childNode.key || index}
-            node={childNode}
-            level={level}
-            isLast={isChildLast}
-            ref={ref}
-          />
-        );
-      });
-    };
-
-    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>
-
-        {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}
-        />
-      );
-    });
-  };
-
-  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>
-      </table>
-    </div>
-  );
-};
-
-export default TableTree;
+/* eslint-disable */
+// @ts-nocheck
+import React, {
+  ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { prepareData } from '../../utils/TableCell/TableCell';
+import Icon from '../Icon';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+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()
+  );
+  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)}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </td>
+          );
+        } else if (column.accessor) {
+          return (
+            <td key={column.accessor} style={{ maxWidth: column.width }}>
+              {prepareData(node, column)}
+            </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;
+        return (
+          <TreeNode
+            key={childNode.key || index}
+            node={childNode}
+            level={level}
+            isLast={isChildLast}
+            ref={ref}
+          />
+        );
+      });
+    };
+
+    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>
+
+        {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}
+        />
+      );
+    });
+  };
+
+  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>
+      </table>
+    </div>
+  );
+};
+
+export default TableTree;

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;
+  }
+}