pixel-react 1.4.7 → 1.4.8

package/src/components/TableTree/TableTree.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // @ts-nocheck
-import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react';
+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';
@@ -36,6 +36,7 @@ interface TableTreeProps {
   ) => void;
   onChange?: (e: any, node: any) => void;
   selected: Array<string>;
+  onPagination?: (node: ObjectProps) => void; // New prop for pagination
 }
 
 const TableTree = ({
@@ -45,10 +46,12 @@ const TableTree = ({
   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();
@@ -56,10 +59,8 @@ const TableTree = ({
     // Recursive function to add nodes and their children to the expanded set
     const expandNodeRecursively = (node: ObjectProps) => {
       if (node.expanded) {
-        // Add the node to the expanded set
         defaultExpanded.add(node);
 
-        // If the node has children, recursively expand them as well
         if (node.children) {
           node.children.forEach((child: ObjectProps) =>
             expandNodeRecursively(child)
@@ -68,20 +69,18 @@ const TableTree = ({
       }
     };
 
-    // Iterate over the treeData to check which nodes should be expanded
     treeData.forEach((node) => {
       expandNodeRecursively(node);
     });
 
-    // Set the expanded nodes state
     setExpandedNodes(defaultExpanded);
   }, [treeData]);
+
   // Function to calculate total children height
   const calculateTotalChildrenHeight = (node: any): number => {
     if (!node.children || node.children.length === 0) {
       return 1;
     }
-    // Start with 1 for the current node and  node itself is included in the height calculation before considering its children.
     let totalHeight = 1;
     if (expandedNodes.has(node)) {
       node.children.forEach((child: any) => {
@@ -93,30 +92,22 @@ const TableTree = ({
 
   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);
 
-    const handleCheckBoxChange = (e, node) => {
-      if (onChange) {
-        onChange(e, node);
-      }
-    };
-
     useLayoutEffect(() => {
       if (nodeRef.current) {
         const observer = new ResizeObserver(() => {
-          // Update nodeHeight when the size of the element changes
           const currentHeight = nodeRef.current?.offsetHeight || 0;
           setNodeHeight(currentHeight);
 
-          // Calculate total children height
           const childrenHeight = calculateTotalChildrenHeight(node);
           setTotalChildrenHeight(childrenHeight);
         });
 
-        // Start observing the current node
         observer.observe(nodeRef.current);
 
         return () => {
@@ -125,6 +116,30 @@ const TableTree = ({
       }
     }, [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);
@@ -136,6 +151,13 @@ const TableTree = ({
         return newExpandedNodes;
       });
     };
+
+    const handleCheckBoxChange = (e, node) => {
+      if (onChange) {
+        onChange(e, node);
+      }
+    };
+
     const renderRowData = (columnsData: any) => {
       return columnsData.map((column: any) => {
         if (column.accessor === 'title') {
@@ -166,7 +188,6 @@ const TableTree = ({
                 )}
                 {select === 'radio' && (
                   <RadioButton
-                    // checked={selected.includes(node.key)}
                     name={node.title}
                     value={node.key}
                     onChange={(e) => handleCheckBoxChange(e, node)}
@@ -194,6 +215,23 @@ const TableTree = ({
         }
       });
     };
+
+    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
@@ -214,7 +252,6 @@ const TableTree = ({
           {renderRowData(columnsData)}
         </tr>
 
-        {/* Render children only if the node is expanded */}
         {isExpanded &&
           !checkEmpty(node?.children) &&
           renderTree(node.children, level + 1)}
@@ -225,7 +262,7 @@ const TableTree = ({
   const renderTree = (nodes: any, level = 0) => {
     return nodes.map((node: any, index: number) => {
       const isLast = index === nodes.length - 1;
-      return <TreeNode key={index} node={node} level={level} isLast={isLast} />;
+      return <TreeNode key={node.key || index} node={node} level={level} isLast={isLast} />;
     });
   };
 

package/src/components/Typography/Typography.scss

@@ -8,7 +8,7 @@
   font-weight: 400;
   src:
     local('Poppins-Regular'),
-    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-Regular.woff2) format('woff2');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 500;
   src:
     local('Poppins-Medium'),
-    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-Medium.woff2) format('woff2');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
   font-weight: 600;
   src:
     local('Poppins-SemiBold'),
-    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-SemiBold.woff2) format('woff2');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
   font-weight: 700;
   src:
     local('Poppins-Bold'),
-    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-Bold.woff2) format('woff2');
 }
 
 .ff-text {

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

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

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}

package/lib/components/AttachImage/AttachImage.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-declare const meta: Meta<typeof AttachImage>;
-export default meta;
-type Story = StoryObj<AttachImageProps>;
-export declare const Default: Story;

package/lib/components/Charts/BarChart/BarChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import BarChart from './BarChart';
-declare const meta: Meta<typeof BarChart>;
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-export declare const BarChartDashboard: Story;

package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadialChart from './IconRadialChart';
-declare const meta: Meta<typeof IconRadialChart>;
-export default meta;
-type Story = StoryObj<typeof IconRadialChart>;
-export declare const Default: Story;
-export declare const Mobile: Story;
-export declare const WithoutIcon: Story;

package/lib/components/Charts/LineChart/LineChart.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import LineChart from './LineChart';
-import { LineChartProps } from './types';
-declare const meta: Meta<typeof LineChart>;
-export default meta;
-export declare const DefaultLineChart: StoryObj<LineChartProps>;
-export declare const StatusLineChart: StoryObj<LineChartProps>;

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import MultiRadialChart from './MultiRadialChart';
-declare const meta: Meta<typeof MultiRadialChart>;
-export default meta;
-type Story = StoryObj<typeof MultiRadialChart>;
-export declare const Default: Story;
-export declare const numberLegend: Story;
-export declare const PillLegend: Story;

package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ConnectingBranch from './ConnectingBranch';
-declare const meta: Meta<typeof ConnectingBranch>;
-export default meta;
-type Story = StoryObj<typeof ConnectingBranch>;
-export declare const Default: Story;

package/lib/components/EditTextField/EditTextField.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import EditTextField from './EditTextField';
-import '../../assets/styles/_colors.scss';
-import './EditTextField.scss';
-declare const meta: Meta<typeof EditTextField>;
-type Story = StoryObj<typeof EditTextField>;
-export declare const textFieldWithLabel: Story;
-export declare const textFieldWithOutLabel: Story;
-export declare const openTextField: Story;
-export default meta;

package/lib/components/Editor/Editor.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { EditorProps } from './types';
-declare const meta: Meta<EditorProps>;
-export default meta;
-type Story = StoryObj<EditorProps>;
-export declare const Default: Story;

package/lib/components/Excel/ContextMenu/ContextMenu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './ContextMenu.scss';
-declare const ContextMenu: React.FC<ContextMenuProps>;
-export default ContextMenu;

package/lib/components/Excel/ExcelFile.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ExcelFile from './ExcelFile/ExcelFile';
-declare const meta: Meta<typeof ExcelFile>;
-type Story = StoryObj<typeof ExcelFile>;
-export declare const Default: Story;
-export default meta;

package/lib/components/ExcelFile/ChangeExcelStyles.d.ts

@@ -1,14 +0,0 @@
-import { CellBase } from "./ExcelFile/Excel";
-interface ChangeExcelStylesOptions {
-    sheetName: string;
-    styleType: string;
-    value: string;
-    selectedCell: {
-        row: number;
-        column: number;
-    }[];
-}
-export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
-    [key: string]: Matrix<CellBase>;
-}>>, options: ChangeExcelStylesOptions): void;
-export {};

package/lib/components/ExcelFile/ImportExcelStyles.d.ts

@@ -1,24 +0,0 @@
-interface CellStyle {
-    color?: string;
-    backgroundColor?: string;
-    bold?: boolean;
-    italic?: boolean;
-    name?: string;
-    border: {
-        top: string;
-        bottom: string;
-        left: string;
-        right: string;
-    };
-    alignment: {
-        horizontal?: string;
-        vertical?: string;
-        wrapText?: boolean;
-    };
-}
-interface CellData {
-    style?: CellStyle;
-}
-type ImportExcelStylesData = Array<Array<CellData>>;
-export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
-export {};

package/lib/components/StatusCard/StatusCard.stories.d.ts

@@ -1,11 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Card from './StatusCard';
-import { CardProps } from './types';
-declare const meta: Meta<typeof Card>;
-export default meta;
-type Story = StoryObj<CardProps>;
-export declare const Passed: Story;
-export declare const Failed: Story;
-export declare const Warning: Story;
-export declare const Skipped: Story;
-export declare const Flaky: Story;

package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { MachineExecutionInstanceDataSet } from './types';
-declare const SequentialPayloadComponent: React.FC<{
-    machineInstances: MachineExecutionInstanceDataSet[];
-}>;
-declare const meta: Meta<typeof SequentialPayloadComponent>;
-type Story = StoryObj<typeof SequentialPayloadComponent>;
-export declare const Primary: Story;
-export default meta;