pixel-react 1.10.15 → 1.10.16

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

@@ -1,275 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import TableTree from './TableTree';
-import Button from '../Button';
-import treeData from './data';
-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',
-  component: TableTree,
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof TableTree>;
-
-const colData = [
-  {
-    name: 'Script Name',
-    accessor: 'name',
-    width: '600px',
-    isClickable: true,
-    actions: (row, treeRowRef) => {
-      console.log('🚀 ~ row:', row, treeRowRef);
-
-      return [
-        <Icon hoverEffect name="file" />,
-        <Icon hoverEffect name="manage_apps" />,
-        <Icon hoverEffect name="dropzone_icon" />,
-        <Icon hoverEffect name="more" />,
-        <AddResourceButton
-          treeRowRef={treeRowRef}
-          directionalArrow={[
-            {
-              direction: 'top',
-              menuOptions: [
-                {
-                  label: 'Module',
-                  value: 'add_module_top',
-                  icon: 'module_icon',
-                  disable: false,
-                },
-              ],
-            },
-            {
-              direction: 'right',
-              menuOptions: [
-                {
-                  label: 'Sub Module',
-                  value: 'add_module_sibling',
-                  icon: 'module_icon',
-                  disable: false,
-                },
-                {
-                  label: 'Automation Script',
-                  value: 'add_Automation_script_sibling',
-                  icon: 'automation_testcase',
-                  disable: false,
-                },
-                {
-                  label: 'Manual Test Case',
-                  value: 'add_manual_test_case_sibling',
-                  icon: 'manual_testcase',
-                  disable: false,
-                },
-                {
-                  label: 'Pre / Post Condition',
-                  value: 'add_pre_post_condition_sibling',
-                  icon: 'pre_post_condition',
-                  disable: false,
-                },
-                {
-                  label: 'Authorization',
-                  value: 'add_authorization_sibling',
-                  icon: 'authorization_icon',
-                  disable: false,
-                },
-                {
-                  label: 'Data Provider',
-                  value: 'data_provider_sibling',
-                  icon: 'data_provider',
-                  disable: false,
-                },
-              ],
-            },
-            {
-              direction: 'down',
-              menuOptions: [
-                {
-                  label: 'Sub Module',
-                  value: 'sub_module_down',
-                  icon: 'module_icon',
-                  disable: false,
-                },
-              ],
-            },
-          ]}
-          onMenuOptionClick={(option: {
-            label: string | ReactNode;
-            value: any;
-          }) => {
-            alert(`Option clicked: ${option.label}, Value: ${option.value}`);
-          }}
-        />,
-      ];
-    },
-    isTree: true,
-    defaultValue: 'Project name',
-    defaultActions: () => [],
-  },
-
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '300px',
-    isClickable: true,
-  },
-
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '200px',
-    isClickable: true,
-  },
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '200px',
-    isClickable: true,
-  },
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '200px',
-    isClickable: true,
-  },
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '200px',
-    isClickable: true,
-  },
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '200px',
-    isClickable: true,
-  },
-  {
-    name: 'Module Path',
-    accessor: 'createdBy',
-    width: '200px',
-    isClickable: true,
-  },
-  { name: 'Created By', accessor: 'createdByUname', width: '200px' },
-  {
-    name: 'Script Count',
-    accessor: 'createdBy',
-    width: '200px',
-  },
-  {
-    name: 'state',
-    accessor: 'createdBy',
-    width: '100px',
-    cell: ({ value }) => {
-      return (
-        value && (
-          <Button
-            variant="secondary"
-            onClick={() => {
-              console.log('====', value); //Todo:need to remove
-            }}
-          >
-            {value}
-          </Button>
-        )
-      );
-    },
-  },
-];
-
-export const Default: Story = {
-  args: {
-    loadMore: (node) => {
-      console.log(node);
-    },
-    onExpand: (node, index) => {
-      console.log(node, index);
-    },
-    select: 'checkbox',
-    onChange: (node: string[]) => {
-      console.log('-------------------', node);
-    },
-    selected: ['MOD1102'],
-    treeData,
-    columnsData: colData,
-    onClick: (e, data) => {
-      console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
-    },
-    // height: 100,
-  },
-};
-
-export const ControlledCheckBox: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<string[]>([]);
-    const [controlledTreeData, setControlledTreeData] = useState(treeData);
-    return (
-      <TableTree
-        // 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"
-        onChange={(e, nodes: string[]) => {
-          setSelected(nodes);
-        }}
-        selected={selected}
-        treeData={controlledTreeData}
-        columnsData={colData}
-        onClick={(e, data) => {
-          console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
-        }}
-        loadMore={(direction) => {
-          console.log(direction, '-------------------');
-        }}
-        tableBorder="1px solid #f1f1f1"
-      />
-    );
-  },
-};
-export const ControlledRadio: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<string[]>([]);
-    return (
-      <TableTree
-        onExpand={(node, index) => {
-          console.log(node, index);
-        }}
-        select="radio"
-        onChange={(e, node: TreeNodeProps) => {
-          setSelected([node.key]);
-        }}
-        selected={selected}
-        treeData={treeData}
-        columnsData={colData}
-        onClick={(e, data) => {
-          console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
-        }}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/TableTree/TableTree.tsx

@@ -1,198 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import './TableTree.scss';
-import { TreeTableProps } from './types';
-import TableHead from './Components/TableHead';
-import TableBody from './Components/TableBody';
-import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
-import { throttle } from '../../utils/throttle/throttle';
-
-const TreeTable: React.FC<TreeTableProps> = ({
-  treeData,
-  columnsData,
-  selected = [],
-  select = null,
-  onChange,
-  onClick,
-  onExpand,
-  loadMore = () => {},
-  tableBorder,
-  height = 'auto',
-  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
-  const isTriggeredOnce = useRef(false); // Ensure 2-second delay triggers only once
-
-  // Throttled version of loadMore
-  const throttledLoadMore = useRef(
-    throttle((direction: string) => {
-      loadMore(direction);
-    }, 300)
-  ).current;
-
-  useEffect(() => {
-    const scrollContainer = document.getElementById(
-      'ff-table-tree-scroll-container'
-    );
-    const firstNode = document.getElementById('ff-table-tree-first-node');
-    const lastNode = document.getElementById('ff-table-tree-last-node');
-
-    // Exit early if essential elements or data are missing
-    if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
-      return;
-
-    const isLastResourceAbove = !!treeData[0]?.lastResource;
-    const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
-
-    // Skip pagination if both last resources are present
-    if (isLastResourceAbove && isLastResourceBelow) return;
-
-    const observerCallback = (entries: IntersectionObserverEntry[]) => {
-      entries.forEach((entry) => {
-        const nodeId = entry.target.id;
-        const direction =
-          nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
-
-        if (entry.isIntersecting) {
-          // Trigger only once for each direction
-          if (direction === 'above' && !isTriggeredAbove.current) {
-            if (!isLastResourceAbove) {
-              throttledLoadMore(direction);
-              isTriggeredAbove.current = true;
-            }
-          } else if (direction === 'below' && !isTriggeredBelow.current) {
-            if (!isLastResourceBelow) {
-              throttledLoadMore(direction);
-              isTriggeredBelow.current = true;
-            }
-          }
-        }
-      });
-    };
-
-    observerRef.current = new IntersectionObserver(observerCallback, {
-      root: scrollContainer,
-      rootMargin: '8px',
-      threshold: 0.1,
-    });
-
-    // Initial pagination trigger after 2 seconds if first or last node is in view inside the scroll container
-    const checkInitialPaginationTrigger = () => {
-      if (isTriggeredOnce.current) return;
-
-      const scrollContainerRect = scrollContainer.getBoundingClientRect();
-      const firstNodeRect = firstNode?.getBoundingClientRect();
-      const lastNodeRect = lastNode?.getBoundingClientRect();
-
-      // Check if the first node is inside the scroll container
-      const isFirstNodeInView =
-        firstNodeRect &&
-        firstNodeRect.top >= scrollContainerRect.top &&
-        firstNodeRect.bottom <= scrollContainerRect.bottom;
-
-      // Check if the last node is inside the scroll container
-      const isLastNodeInView =
-        lastNodeRect &&
-        lastNodeRect.top >= scrollContainerRect.top &&
-        lastNodeRect.bottom <= scrollContainerRect.bottom;
-
-      if (isFirstNodeInView || isLastNodeInView) {
-        isTriggeredOnce.current = true;
-        setTimeout(() => {
-          if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
-          if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
-        }, 2000); // Delay the first pagination trigger by 2 seconds
-      } else {
-        // Observe first and last node immediately
-        if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
-        if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
-      }
-    };
-
-    checkInitialPaginationTrigger();
-
-    return () => {
-      observerRef.current?.disconnect();
-      throttledLoadMore.cancel();
-    };
-  }, [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) => {
-      if (expanding) return;
-      setExpanding(node.key);
-      onExpand?.(node, index);
-    },
-    [onExpand, expanding]
-  );
-
-  const handleCheckBoxChange = useCallback(
-    (e: any, node: any) => {
-      if (expanding) return;
-      onChange?.(e, node);
-    },
-    [onChange, expanding]
-  );
-
-  const handleRowClick = useCallback(
-    (e: any, node: any) => {
-      if (expanding) return;
-      onClick?.(e, node);
-    },
-    [onClick, expanding]
-  );
-
-  return (
-    <div className="tree-table-wrap">
-      <div
-        className="table-scrollable"
-        id="ff-table-tree-scroll-container"
-        style={
-          {
-            '--table-height': `${height !== 'auto' ? height + 'px' : height}`,
-            border: tableBorder,
-          } as React.CSSProperties
-        }
-      >
-        <table className="tree-table">
-          <TableHead columnsData={columnsData} />
-          <TableBody
-            flattenedTreeData={treeData}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={handleRowClick}
-            onToggleExpand={handleToggleExpand}
-            onCheckBoxChange={handleCheckBoxChange}
-            newNode={newNode}
-            onAddConfirm={onAddConfirm}
-            onAddCancel={onAddCancel}
-            expanding={expanding}
-          />
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default TreeTable;

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

@@ -1,53 +0,0 @@
-import { TreeNodeProps } from '../../../ComponentProps/TreeNodeProps';
-
-export const addNewRow = (
-  treeData: TreeNodeProps[],
-  newNode: {
-    action?: 'addAbove' | 'addBelow' | 'addInside';
-    sourceId?: string;
-    error?: string;
-    value?: string;
-    label?: string;
-  }
-) => {
-  const { sourceId, action, value = '', error = '', label } = newNode;
-
-  if (!sourceId || !action) return treeData;
-
-  const nodeMap = new Map(treeData.map((node) => [node.key, node]));
-  const sourceNode = nodeMap.get(sourceId);
-
-  if (!sourceNode) return treeData;
-
-  const updatedTreeData = [...treeData];
-  const sourceIndex = treeData.findIndex((node) => node.key === sourceId);
-
-  const newNodeBase = {
-    hierarchy: sourceNode.hierarchy,
-    sourceId: sourceNode.key,
-    isNewNode: true,
-    key: 'new-node',
-    value,
-    error,
-    label,
-  };
-
-  switch (action) {
-    case 'addAbove':
-      updatedTreeData.splice(sourceIndex, 0, newNodeBase);
-      break;
-    case 'addBelow':
-      updatedTreeData.splice(sourceIndex + 1, 0, newNodeBase);
-      break;
-    case 'addInside':
-      updatedTreeData.splice(sourceIndex + 1, 0, {
-        ...newNodeBase,
-        hierarchy: sourceNode.hierarchy + 1,
-      });
-      break;
-    default:
-      break;
-  }
-
-  return updatedTreeData;
-};

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

@@ -1,14 +0,0 @@
-const getAllChildIds = (nodeId: string, data: any[]): string[] => {
-  let result = [nodeId];
-
-  // Traverse the tree and find children based on parentId
-  data.forEach(({ node }) => {
-    if (node.parentId === nodeId) {
-      result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
-    }
-  });
-
-  return result;
-};
-
-export default getAllChildIds;

package/src/components/TableTree/data.ts

@@ -1,148 +0,0 @@
-const data = [
-  {
-    createdBy: 'USR4705',
-    modifiedBy: '--',
-    createdByUname: 'Saqeb',
-    modifiedByUname: '--',
-    createdOn: '2023-05-31T10:54:33.296Z',
-    modifiedOn: '2023-05-31T10:54:33.296Z',
-    state: 'APPROVED',
-    path: '/Root',
-    searchKey: '/PAG1010',
-    key: 'PAG1010',
-    name: 'Root',
-    projectId: 'PJT1006',
-    hierarchy: 0,
-    executionOrder: 0,
-    subContainerCount: 1,
-    resourceCount: 0,
-    totalSubContainerCount: 1,
-    totalResourceCount: 2,
-    totalProjectElementCount: 0,
-    totalSharedElementCount: 0,
-    container: false,
-    localDelete: false,
-    defaultEntity: false,
-    lastResource: false,
-    platform: '',
-  },
-  {
-    createdBy: 'USR4705',
-    modifiedBy: '--',
-    createdByUname: 'Saqeb',
-    modifiedByUname: '--',
-    createdOn: '2023-05-31T10:57:31.721Z',
-    modifiedOn: '2023-05-31T10:57:31.721Z',
-    state: 'APPROVED',
-    path: '/Root/page1',
-    searchKey: '/PAG1010/PAG1011',
-    parentId: 'PAG1010',
-    parentName: 'Root Page',
-    key: 'PAG1011',
-    name: 'page1',
-    projectId: 'PJT1006',
-    hierarchy: 1,
-    executionOrder: 1,
-    subContainerCount: 0,
-    resourceCount: 3,
-    totalSubContainerCount: 0,
-    totalResourceCount: 1,
-    totalProjectElementCount: 0,
-    totalSharedElementCount: 0,
-    container: false,
-    localDelete: false,
-    defaultEntity: false,
-    lastResource: true,
-  },
-  {
-    createdBy: 'USR4705',
-    modifiedBy: '--',
-    createdByUname: 'Saqeb',
-    modifiedByUname: '--',
-    createdOn: '2023-05-31T11:00:00.000Z',
-    modifiedOn: '2023-05-31T11:00:00.000Z',
-    state: 'APPROVED',
-    path: '/Root/page2',
-    searchKey: '/PAG1010/PAG1012',
-    parentId: 'PAG1010',
-    parentName: 'Root Page',
-    key: 'PAG1012',
-    name: 'page2',
-    projectId: 'PJT1006',
-    hierarchy: 1,
-    executionOrder: 2,
-    expanded: false,
-    expandable: true,
-    subContainerCount: 2,
-    resourceCount: 5,
-    totalSubContainerCount: 2,
-    totalResourceCount: 7,
-    totalProjectElementCount: 0,
-    totalSharedElementCount: 0,
-    container: true,
-    localDelete: false,
-    defaultEntity: false,
-    lastResource: false,
-  },
-  {
-    createdBy: 'USR4705',
-    modifiedBy: '--',
-    createdByUname: 'Saqeb',
-    modifiedByUname: '--',
-    createdOn: '2023-05-31T11:05:00.000Z',
-    modifiedOn: '2023-05-31T11:05:00.000Z',
-    state: 'APPROVED',
-    path: '/Root/page2/subpage1',
-    searchKey: '/PAG1010/PAG1012/PAG1013',
-    parentId: 'PAG1012',
-    parentName: 'page2',
-    key: 'PAG1013',
-    name: 'subpage1',
-    projectId: 'PJT1006',
-    hierarchy: 2,
-    executionOrder: 1,
-    subContainerCount: 0,
-    resourceCount: 2,
-    totalSubContainerCount: 0,
-    totalResourceCount: 2,
-    totalProjectElementCount: 0,
-    totalSharedElementCount: 0,
-    container: false,
-    localDelete: false,
-    defaultEntity: false,
-    lastResource: true,
-  },
-  {
-    createdBy: 'USR4705',
-    modifiedBy: '--',
-    createdByUname: 'Saqeb',
-    modifiedByUname: '--',
-    createdOn: '2023-05-31T11:10:00.000Z',
-    modifiedOn: '2023-05-31T11:10:00.000Z',
-    state: 'APPROVED',
-    path: '/Root/page2/subpage2',
-    searchKey: '/PAG1010/PAG1012/PAG1014',
-    parentId: 'PAG1012',
-    parentName: 'page2',
-    key: 'PAG1014',
-    name: 'subpage2',
-    projectId: 'PJT1006',
-    hierarchy: 2,
-    executionOrder: 2,
-    expanded: false,
-    expandable: true,
-    subContainerCount: 0,
-    resourceCount: 4,
-    totalSubContainerCount: 0,
-    totalResourceCount: 4,
-    totalProjectElementCount: 0,
-    totalSharedElementCount: 0,
-    container: true,
-    localDelete: false,
-    defaultEntity: false,
-    lastResource: false,
-  },
-  // Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
-];
-
-export default data;

package/src/components/TableTree/index.ts

@@ -1 +0,0 @@
-export { default } from './TableTree';