pixel-react 1.10.10-1 → 1.10.10-3

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { prepareData } from '../../../utils/TableCell/TableCell';
 import Checkbox from '../../Checkbox';
 import RadioButton from '../../RadioButton';
@@ -19,7 +20,7 @@ const renderSpaces = (
     isLastNode = false;
 
     if (!isNaN(level)) {
-      siblingsArray = Array(level).fill(true);
+      siblingsArray = Array(level - 1).fill(true);
     }
   }
 
@@ -50,83 +51,130 @@ 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.id)}
-                  value={node.id}
-                  onChange={(e) => onCheckBoxChange(e, node)}
-                />
-              )}
-            </>
+  }: 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.expand ? 'tree-row-expanded' : 'tree-row-collapsed'
+              } ${node.container ? '' : 'no-folder'}`}
+            >
+              {node.container &&
+                (node?.resourceCount + node?.subContainerCount > 0 ||
+                  node.expandable) && (
+                  <span onClick={() => onToggleExpand(node)}>
+                    {' '}
+                    <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}
+              />
+            ) : (
+              <span className="tree-table-td-content-text">
+                {prepareData(node, col)}
+              </span>
+            )}
+          </span>
         </div>
-      )}
-    </td>
-  )
+        {col.actions && (
+          <div className={`table-tree-row-action`}>
+            {(() => {
+              return col.actions(node, treeRowRef);
+            })()}
+          </div>
+        )}
+      </td>
+    );
+  }
 );
 
 export default TableCell;

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;
       }
@@ -276,4 +287,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,14 +199,13 @@ 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[]>([]);
-
     return (
       <TableTree
         height={100}
@@ -239,8 +239,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

@@ -44,8 +44,8 @@ const TreeTable: React.FC<TreeTableProps> = ({
     if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
       return;
 
-    const isLastResourceAbove = treeData[0]?.lastResource;
-    const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
+    const isLastResourceAbove = !!treeData[0]?.lastResource;
+    const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
 
     // Skip pagination if both last resources are present
     if (isLastResourceAbove && isLastResourceBelow) return;