pixel-react 1.10.10-2 → 1.10.10-4

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

@@ -1,35 +1,71 @@
 import { useState } from 'react';
 import Icon from '../../../Icon';
 import './AddModule.scss';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import classNames from 'classnames';
 
 export const AddModule = ({
   onConfirm,
   onCancel,
   error,
   value = '',
+  label = 'Add Script',
 }: {
   onConfirm?: (_text: string) => void;
   onCancel?: () => void;
   error?: string;
   value?: string;
+  label?: string;
 }) => {
-  console.log('🚀 ~ value:', value);
   const [text, setText] = useState(value);
+
+  const isValueFilled = !checkEmpty(text);
   return (
     <>
-      <div className="add-module-container">
-        <input
-          type="text"
-          className="add-module-input"
-          onChange={(e) => setText(e.target.value)}
-          value={text}
-        />
-        <Icon
-          className="icons"
-          name="update_icon"
-          onClick={() => onConfirm && onConfirm(text)}
-        />
-        <Icon className="icons" name="close" onClick={onCancel} />
+      <div className={classNames('add-module-container')}>
+        <div
+          className={classNames('ff-add-module-input-container', {
+            'ff-add-module-input-container--float': isValueFilled,
+          })}
+        >
+          <label
+            className="ff-add-module-label-container"
+            htmlFor="add-module-input"
+          >
+            <span
+              className={classNames('ff-add-module-label', {
+                'ff-input-label--no-hover': !!text,
+              })}
+            >
+              {label}
+            </span>
+          </label>
+          <input
+            name="add-module-input"
+            type="text"
+            className="add-module-input"
+            onChange={(e) => setText(e.target.value)}
+            value={text}
+          />
+        </div>
+        <div className="ff-module-icon-container">
+          <Icon
+            className="icons"
+            name="update_icon"
+            onClick={() => onConfirm && onConfirm(text)}
+            color="var(--label-edit-confirm-icon)"
+            height={18}
+            width={18}
+          />
+          <Icon
+            className="icons"
+            name="close"
+            onClick={onCancel}
+            color="var(--label-edit-cancel-icon)"
+            height={14}
+            width={14}
+          />
+        </div>
       </div>
       <small>{error}</small>
     </>

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

@@ -14,6 +14,7 @@ const TableBody = ({
   newNode = {},
   onAddConfirm,
   onAddCancel,
+  expanding,
 }: TableBodyProps) => {
   if (checkEmpty(flattenedTreeData)) {
     return null;
@@ -35,6 +36,7 @@ const TableBody = ({
           onCheckBoxChange={onCheckBoxChange}
           onAddConfirm={onAddConfirm}
           onAddCancel={onAddCancel}
+          isExpanding={node.key === expanding}
         />
       ))}
       <tr id="ff-table-tree-last-node" />

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

@@ -1,11 +1,12 @@
+import React, { useEffect } from 'react';
 import { prepareData } from '../../../utils/TableCell/TableCell';
 import Checkbox from '../../Checkbox';
 import RadioButton from '../../RadioButton';
 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 { AddModule } from './AddModule/AddModule';
+import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
+import Spinner from '../../../assets/icons/spinner.svg?react';
 
 const renderSpaces = (
   level: number,
@@ -50,83 +51,132 @@ const TableCell = React.memo(
     onToggleExpand,
     onAddConfirm,
     onAddCancel,
-  }: TableCellProps) => (
-    <td
-      className={`ff-table-tree-td ${
-        col.isTree && node.container ? 'folder' : ''
-      }`}
-    >
-      {col.isTree &&
-        renderSpaces(
-          node.hierarchy + 1,
-          node.parentSiblings,
-          node.lastResource,
-          node.container
-        )}
-      <div className="tree-title-container">
-        {col.isTree && (
-          <span
-            className={`tree-table-space-block last-block  ${
-              node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'
-            } ${node.container ? '' : 'no-folder'}`}
-            onClick={() => onToggleExpand(node)}
-          >
-            {node.container &&
-              node?.resourceCount + node?.subContainerCount > 0 && (
-                <span onClick={() => onToggleExpand(node)}>
-                  {' '}
-                  <Arrow />
-                </span>
-              )}
-          </span>
-        )}
-        <span
-          className={`tree-table-td-content ${
-            col.isTree && node.container ? 'folder' : ''
-          }`}
-        >
-          {!node?.isNewNode && (
-            <>
-              {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.key)}
-                  value={node.key}
-                  onChange={(e) => onCheckBoxChange(e, node)}
-                />
-              )}
-            </>
+    isExpanding,
+  }: TableCellProps) => {
+    useEffect(() => {
+      const handleHover = (event: MouseEvent, isHovering: boolean) => {
+        const target = event.target as HTMLElement;
+        const levelClass = Array.from(target.classList).find((cls) =>
+          cls.startsWith('tree-table-space-block-')
+        );
+
+        if (levelClass) {
+          const level = levelClass.split('-').pop();
+
+          // Check if level is valid before selecting elements
+          if (level) {
+            const sameLevelBlocks = document.querySelectorAll(
+              `.tree-table-space-block-${level}`
+            ) as NodeListOf<HTMLElement>;
+
+            sameLevelBlocks.forEach((block) => {
+              if (isHovering) {
+                block.classList.add('tree-table-hovered');
+              } else {
+                block.classList.remove('tree-table-hovered');
+              }
+            });
+          }
+        }
+      };
+
+      const spaceBlocks = document.querySelectorAll(
+        '.tree-table-space-block'
+      ) as NodeListOf<HTMLElement>;
+
+      spaceBlocks.forEach((block) => {
+        block.addEventListener('mouseenter', (e) => handleHover(e, true));
+        block.addEventListener('mouseleave', (e) => handleHover(e, false));
+      });
+
+      return () => {
+        spaceBlocks.forEach((block) => {
+          block.removeEventListener('mouseenter', (e) => handleHover(e, true));
+          block.removeEventListener('mouseleave', (e) => handleHover(e, false));
+        });
+      };
+    }, []);
+    return (
+      <td
+        className={`ff-table-tree-td ${
+          col.isTree && node.container ? 'folder' : ''
+        }`}
+      >
+        {col.isTree &&
+          renderSpaces(
+            node.hierarchy + 1,
+            node.parentSiblings,
+            node.lastResource,
+            node.container
           )}
-          {node.isNewNode && col.isTree ? (
-            <AddModule
-              onCancel={onAddCancel}
-              onConfirm={onAddConfirm}
-              error={node?.error || ''}
-              value={node.value}
-            />
-          ) : (
-            <span className="tree-table-td-content-text">
-              {prepareData(node, col)}
+        <div className="tree-title-container">
+          {col.isTree && (
+            <span
+              className={`tree-table-space-block tree-table-space-block-${
+                node.hierarchy
+              } last-block  ${
+                node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+              } ${node.container ? '' : 'no-folder'}`}
+            >
+              {node.container &&
+                (node?.resourceCount + node?.subContainerCount > 0 ||
+                  node.expandable) && (
+                  <span onClick={() => onToggleExpand(node)}>
+                    {' '}
+                    {isExpanding ? <Spinner /> : <Arrow />}
+                  </span>
+                )}
             </span>
           )}
-        </span>
-      </div>
-      {col.actions && (
-        <div className={`table-tree-row-action`}>
-          {(() => {
-            return col.actions(node, treeRowRef);
-          })()}
+          <span
+            className={`tree-table-td-content ${
+              col.isTree && node.container ? 'folder' : ''
+            }`}
+          >
+            {!node?.isNewNode && (
+              <>
+                {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.key}
+                    checked={selected.includes(node.key)}
+                    value={node.key}
+                    onChange={(e) => onCheckBoxChange(e, node)}
+                  />
+                )}
+              </>
+            )}
+            {node.isNewNode && col.isTree ? (
+              <AddModule
+                onCancel={onAddCancel}
+                onConfirm={onAddConfirm}
+                error={node?.error || ''}
+                value={node.value}
+                label={node?.label || ''}
+              />
+            ) : (
+              <span className="tree-table-td-content-text">
+                {prepareData(node, col)}
+              </span>
+            )}
+          </span>
         </div>
-      )}
-    </td>
-  )
+        {col.actions && !node?.isNewNode && (
+          <div className={`table-tree-row-action`}>
+            {(() => {
+              return col.actions(node, treeRowRef);
+            })()}
+          </div>
+        )}
+      </td>
+    );
+  }
 );
 
 export default TableCell;

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

@@ -13,6 +13,7 @@ const TableRow = React.memo(
     onCheckBoxChange,
     onAddConfirm,
     onAddCancel,
+    isExpanding,
   }: TableRowProps) => {
     const treeRowRef = useRef<HTMLTableRowElement | null>(null);
     return (
@@ -34,6 +35,7 @@ const TableRow = React.memo(
             onToggleExpand={onToggleExpand}
             onAddConfirm={onAddConfirm}
             onAddCancel={onAddCancel}
+            isExpanding={isExpanding}
           />
         ))}
       </tr>

package/src/components/TableTree/TableTree.scss

@@ -77,6 +77,12 @@
       height: 13px;
     }
   }
+
+  /* Hover background for all elements of the same level */
+  &.tree-table-hovered::before,
+  &.tree-table-hovered::after {
+    background-color: var(--brand-color);
+  }
 }
 
 .tree-title-container {
@@ -153,6 +159,10 @@
     .table-tree-row-action {
       display: inline-flex;
       align-items: center;
+      svg{
+        height: 14px;
+        width: 14px;
+      }
     }
   }
   .ff-table-tree-row {
@@ -194,7 +204,7 @@
     box-sizing: border-box;
 
     &:first-child {
-      width: 400px !important;
+      width: 600px !important;
       position: sticky;
       left: 0;
       padding-left: 8px;
@@ -227,6 +237,7 @@
           margin-left: 4px;
         }
       }
+
       .tree-table-default-content {
         font-weight: 700;
       }
@@ -255,6 +266,7 @@
     svg {
       height: 12px;
       width: 12px;
+      transition: transform 0.3s ease;
 
       path {
         fill: var(--brand-color);
@@ -276,4 +288,4 @@
 .tree-title-container {
   display: inline-flex;
   align-items: center;
-}
+}

package/src/components/TableTree/TableTree.stories.tsx

@@ -6,6 +6,7 @@ import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
 import React, { ReactNode, useState } from 'react';
 import AddResourceButton from '../AddResourceButton/AddResourceButton';
+import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
 
 const meta: Meta<typeof TableTree> = {
   title: 'Components/Table tree',
@@ -19,7 +20,7 @@ const colData = [
   {
     name: 'Script Name',
     accessor: 'name',
-    width: '400px',
+    width: '600px',
     isClickable: true,
     actions: (row, treeRowRef) => {
       console.log('🚀 ~ row:', row, treeRowRef);
@@ -198,18 +199,36 @@ export const Default: Story = {
     onClick: (e, data) => {
       console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
     },
-    height: 100,
+    // height: 100,
   },
 };
 
 export const ControlledCheckBox: Story = {
   render: () => {
     const [selected, setSelected] = useState<string[]>([]);
-
+    const [controlledTreeData, setControlledTreeData] = useState(treeData);
     return (
       <TableTree
-        height={100}
+        // height={100}
         onExpand={(node, index) => {
+          setControlledTreeData((prevData) => {
+            const cloneTreeData = JSON.parse(JSON.stringify(prevData));
+            const toggleNodeExpandedByKey = (tree, key) => {
+              if (!tree) return tree;
+              for (let i = 0; i < tree.length; i++) {
+                if (tree[i].key === key) {
+                  tree[i].expanded = !(tree[i].expanded ?? false);
+                  return tree;
+                }
+                if (tree[i].children) {
+                  toggleNodeExpandedByKey(tree[i].children, key);
+                }
+              }
+              return tree;
+            };
+
+            return toggleNodeExpandedByKey(cloneTreeData, node.key);
+          });
           console.log(node, index);
         }}
         select="checkbox"
@@ -217,7 +236,7 @@ export const ControlledCheckBox: Story = {
           setSelected(nodes);
         }}
         selected={selected}
-        treeData={treeData}
+        treeData={controlledTreeData}
         columnsData={colData}
         onClick={(e, data) => {
           console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
@@ -239,8 +258,8 @@ export const ControlledRadio: Story = {
           console.log(node, index);
         }}
         select="radio"
-        onChange={(nodes: string[]) => {
-          setSelected(nodes);
+        onChange={(e, node: TreeNodeProps) => {
+          setSelected([node.key]);
         }}
         selected={selected}
         treeData={treeData}

package/src/components/TableTree/TableTree.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, memo, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import './TableTree.scss';
 import { TreeTableProps } from './types';
 import TableHead from './Components/TableHead';
@@ -17,10 +17,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
   loadMore = () => {},
   tableBorder,
   height = 'auto',
-  newNode = { action: 'addInside', sourceId: 'PAG1013', value: 'newNode' },
+  newNode = {},
   onAddConfirm = (_name) => {},
   onAddCancel = () => {},
 }) => {
+  const [expanding, setExpanding] = useState<string | null>(null);
   const observerRef = useRef<IntersectionObserver | null>(null);
   const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
   const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
@@ -120,20 +121,44 @@ const TreeTable: React.FC<TreeTableProps> = ({
     };
   }, [treeData, throttledLoadMore]);
 
+  useEffect(() => {
+    if (expanding) {
+      setExpanding(null);
+    }
+  }, [treeData]);
+
+  useEffect(() => {
+    if (expanding) {
+      setTimeout(() => {
+        if (expanding) {
+          setExpanding(null);
+        }
+      }, 3000);
+    }
+  }, [expanding]);
+
   const handleToggleExpand = useCallback(
-    (node: TreeNodeProps, index: number) => onExpand?.(node, index),
+    (node: TreeNodeProps, index: number) => {
+      if (expanding) return;
+      setExpanding(node.key);
+      onExpand?.(node, index);
+    },
     [onExpand]
   );
 
   const handleCheckBoxChange = useCallback(
     (e: any, node: any) => {
+      if (expanding) return;
       onChange?.(e, node);
     },
     [onChange]
   );
 
   const handleRowClick = useCallback(
-    (e: any, node: any) => onClick?.(e, node),
+    (e: any, node: any) => {
+      if (expanding) return;
+      onClick?.(e, node);
+    },
     [onClick]
   );
 
@@ -162,6 +187,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
             newNode={newNode}
             onAddConfirm={onAddConfirm}
             onAddCancel={onAddCancel}
+            expanding={expanding}
           />
         </table>
       </div>
@@ -169,4 +195,4 @@ const TreeTable: React.FC<TreeTableProps> = ({
   );
 };
 
-export default memo(TreeTable);
+export default TreeTable;

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

@@ -7,9 +7,10 @@ export const addNewRow = (
     sourceId?: string;
     error?: string;
     value?: string;
+    label?: string;
   }
 ) => {
-  const { sourceId, action, value = '', error = '' } = newNode;
+  const { sourceId, action, value = '', error = '', label } = newNode;
 
   if (!sourceId || !action) return treeData;
 
@@ -28,6 +29,7 @@ export const addNewRow = (
     key: 'new-node',
     value,
     error,
+    label,
   };
 
   switch (action) {

package/src/components/TableTree/data.ts

@@ -71,6 +71,8 @@ const data = [
     projectId: 'PJT1006',
     hierarchy: 1,
     executionOrder: 2,
+    expanded: false,
+    expandable: true,
     subContainerCount: 2,
     resourceCount: 5,
     totalSubContainerCount: 2,
@@ -127,6 +129,8 @@ const data = [
     projectId: 'PJT1006',
     hierarchy: 2,
     executionOrder: 2,
+    expanded: false,
+    expandable: true,
     subContainerCount: 0,
     resourceCount: 4,
     totalSubContainerCount: 0,
@@ -141,4 +145,4 @@ const data = [
   // Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
 ];
 
-export default data;
+export default data;

package/src/components/TableTree/types.ts

@@ -1,6 +1,14 @@
 import { ReactNode } from 'react';
 import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
 
+interface NewNode {
+  sourceId?: string;
+  action?: 'addAbove' | 'addBelow' | 'addInside';
+  value?: string;
+  error?: string;
+  label?: string;
+}
+
 declare type JSX = ReactNode | JSX.Element[] | string | null;
 
 export interface TableCellProps {
@@ -14,6 +22,7 @@ export interface TableCellProps {
   index?: number;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
+  isExpanding?: boolean;
 }
 
 export interface TableHeadProps {
@@ -28,14 +37,10 @@ export interface TableBodyProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: TreeNode, _index: number) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
-  newNode?: {
-    sourceId?: string;
-    action?: 'addAbove' | 'addBelow' | 'addInside';
-    value?: string;
-    error?: string;
-  };
+  newNode?: NewNode;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
+  expanding?: string | null;
 }
 
 export interface TableRowProps {
@@ -49,6 +54,7 @@ export interface TableRowProps {
   index?: number;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
+  isExpanding?: boolean;
 }
 
 export interface Column {
@@ -74,12 +80,7 @@ export interface TreeTableProps {
   loadMore?: (_direction?: string) => void;
   tableBorder?: string;
   height?: number | string;
-  newNode?: {
-    sourceId?: string;
-    action?: 'addAbove' | 'addBelow' | 'addInside';
-    value?: string;
-    error?: string;
-  };
+  newNode?: NewNode;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
 }