pixel-react-excel-sheet 1.0.19 → 1.0.21

package/src/components/PopUpModal/PopUpModal.tsx

@@ -14,12 +14,13 @@ const PopUpModal: FC<PopUpModalProps> = ({
   subTitleMessage = 'Unsaved Changes.',
   iconName,
   modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
-  footerMessage = 'How do you want to proceed?',
   firstButtonLabel = 'Cancel',
   secondButtonLabel = 'Continue',
   buttonVariant = 'warning',
   border = '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage = 'var(--status-button-bg-warning)'
+  popupWidth = '420',
+  colorForTitleMessage = 'var(--status-button-bg-warning)',
+  footerContent,
 }) => {
   return (
     <Modal
@@ -55,7 +56,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
               </Typography>
               <div className="warning_modal_message_wrapper">
                 <Typography fontSize={16}>{modalMessage}</Typography>
-                <Typography fontSize={16}>{footerMessage}</Typography>
+                <Typography as='div'>{footerContent}</Typography>
               </div>
             </div>
           </div>
@@ -75,7 +76,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
       }
       ariaHideApp
       isFooterDisplayed={false}
-      customWidth="420px"
+      customWidth={`${popupWidth}px`}
       customHeight="226px"
       boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
       border={border}

package/src/components/PopUpModal/types.ts

@@ -6,10 +6,11 @@ export interface PopUpModalProps {
   subTitleMessage?: string;
   iconName: string;
   modalMessage: string;
-  footerMessage: string;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
+    popupWidth?:string,
   colorForTitleMessage?: string;
+  footerContent?:React.ReactNode;
 }

package/src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,46 @@
+.ff-progress-bar-container {
+  width: 100%;
+  min-width: 200px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  &.ff-has-label {
+    justify-content: space-between;
+  }
+
+  &:not(.ff-has-label) {
+    .ff-progress-bar-track {
+      flex: 1;
+    }
+  }
+}
+
+.ff-progress-bar-track {
+  flex: 1;
+  background-color: var(--ff-progress-bar-bg-color);
+  border-radius: 5px;
+  overflow: hidden;
+  position: relative;
+}
+
+.ff-progress-bar {
+  border-radius: 5px;
+  transition: width 0.3s ease;
+}
+
+.ff-progress-bar-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ff-progress-bar-label {
+  max-width: 50px;
+  font-size: 14px;
+  color: var(--ff-card-status-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ProgressBar from './ProgressBar';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+
+export const DashBoardProgressBar: Story = {
+  args: {
+    progressPercentage: 75,
+    color: 'var(--brand-color)',
+    label: '200 MB',
+  },
+};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { ProgressBarProps } from './types';
+import './ProgressBar.scss';
+import Typography from '../Typography';
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  progressPercentage,
+  color = 'var(--brand-color)',
+  trackColor = '#f0f0f0',
+  height = 10,
+  label,
+  labelFontSize = 12,
+  labelTextColor = 'var(--ff-card-status-text-color)',
+  showPercentage = false,
+  percentageFontSize = 10,
+  percentageTextColor = 'var(--tooltip-text-color)',
+}) => {
+  // Ensure progress is between 0 and 100
+  const validProgress = Math.max(0, Math.min(progressPercentage, 100));
+
+  // Bar style for the filled part
+  const barStyle = {
+    width: `${validProgress}%`,
+    backgroundColor: color,
+    height: `${height}px`,
+  };
+
+  // Track style for the empty part of the progress bar
+  const trackStyle = {
+    backgroundColor: trackColor,
+    height: `${height}px`,
+  };
+
+  return (
+    <div className={`ff-progress-bar-container ${label ? 'ff-has-label' : ''}`}>
+      <div className="ff-progress-bar-track" style={trackStyle}>
+        <div className="ff-progress-bar" style={barStyle}>
+          {showPercentage && (
+            <Typography
+              className="ff-progress-bar-percentage"
+              fontSize={percentageFontSize}
+              color={percentageTextColor}
+            >{`${validProgress}%`}</Typography>
+          )}
+        </div>
+      </div>
+      {label && (
+        <Typography
+          as="div"
+          className="ff-progress-bar-label"
+          fontSize={labelFontSize}
+          color={labelTextColor}
+        >
+          {label}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/index.ts

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

package/src/components/ProgressBar/types.ts

@@ -0,0 +1,12 @@
+export interface ProgressBarProps {
+  progressPercentage: number; // The current progress value (0-100)
+  color?: string; // Custom color of the progress bar
+  trackColor?: string; // Custom color of the track (empty part)
+  height?: number;
+  label?: string; // Optional label to display inside or outside the progress bar
+  showPercentage?: boolean; // Whether to show the percentage inside the bar
+  percentageFontSize?: number;
+  percentageTextColor?: string;
+  labelFontSize?: number; // Font size of the label
+  labelTextColor?: string;
+}

package/src/components/Search/Search.tsx

@@ -55,6 +55,12 @@ const Search = ({
       onExpand?.(!isExpand);
     }
   };
+  const handleChange = (data: string) => {
+    setSearchValue(data);
+    if (data === '') {
+      onSearch('');
+    }
+  };
 
   return (
     <div
@@ -90,7 +96,9 @@ const Search = ({
         disabled={disabled}
         ref={inputRef}
         autoComplete="off"
-        onChange={(e) => setSearchValue(e.target.value)}
+        onChange={(e) => {
+          handleChange(e.target.value);
+        }}
         onKeyDown={handleKeyDown}
       />
 

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -26,6 +26,7 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
     globalVariableSetId: '',
     peVariableSetId: '',
   },
+  onUpdateAddBrowserInstance = () => {},
 }) => {
   const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -157,6 +158,7 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             onDeleteBrowser={onDeleteBrowserInstance}
             onAddRunBrowser={onAddRunBrowserInstance}
             onUpdateDataSetList={onUpdateDataSetList}
+            onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
           />
         )}
       </div>

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -21,6 +21,7 @@ const Branches = ({
   onDeleteBrowser,
   onAddRunBrowser,
   onUpdateDataSetList,
+  onUpdateAddBrowserInstance,
 }: BranchesProps) => {
   const evenRow = rowIndex % 2 === 0;
   const lastMachineInstance = checkEmpty(
@@ -122,6 +123,13 @@ const Branches = ({
                       { label: browserVersion, type: browserName },
                     ]}
                     contentReverse={!evenRow}
+                    modalId={`${machineInstanceId}-runCount-${numberOfRuns}`}
+                    onClick={() =>
+                      onUpdateAddBrowserInstance(
+                        `${machineInstanceId}-runCount-0`,
+                        machineInstanceId
+                      )
+                    }
                   />
                 </div>
                 <div

package/src/components/SequentialConnectingBranch/components/Branches/types.ts

@@ -10,6 +10,7 @@ export interface BranchesProps {
   onAddBrowser: (modalId: string) => void;
   onDeleteBrowser: (id: string, runCount: number) => void;
   onAddRunBrowser: (id: string) => void;
+  onUpdateAddBrowserInstance: (id: string, machineInstanceId: string) => void;
   onUpdateDataSetList: (
     id: string,
     dataSetObject: dataSetValues,

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx

@@ -14,6 +14,7 @@ const ConnectingBranches = ({
   onDeleteBrowser,
   onAddRunBrowser,
   onUpdateDataSetList,
+  onUpdateAddBrowserInstance,
 }: ConnectingBranchesProps) => {
   const [machineInstance, setMachineInstance] = useState<
     ExecutionContext[] | {}[]
@@ -58,6 +59,7 @@ const ConnectingBranches = ({
               machineInstancesRow[index - 1]?.[machineColumnCount - 1]
             }
             onUpdateDataSetList={onUpdateDataSetList}
+            onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
           />
         </Fragment>
       ))}

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts

@@ -7,6 +7,7 @@ export interface ConnectingBranchesProps {
   onAddBrowser: (modalId: string) => void;
   onDeleteBrowser: (id: string, runCount: number) => void;
   onAddRunBrowser: (id: string) => void;
+  onUpdateAddBrowserInstance: (id: string, machineInstanceId: string) => void;
   onUpdateDataSetList: (
     id: string,
     dataSetObject: dataSetValues,

package/src/components/SequentialConnectingBranch/types.ts

@@ -8,7 +8,7 @@ export interface SequentialConnectingBranchProps {
   machineOptionsList?: Option[];
   onHandleSelect?: (option: Option) => void;
   onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance?: () => void;
+  onUpdateAddBrowserInstance: (id: string, machineInstanceId: string) => void;
   onDeleteBrowserInstance?: (id: string, runCount: number) => void;
   onAddRunBrowserInstance?: (machineInstanceId: string) => void;
   onDeleteMachineInstance?: () => void;

package/src/components/Table/Table.scss

@@ -9,6 +9,7 @@
   z-index: 100;
   cursor: pointer;
 }
+
 .ff-table {
   width: 100%;
   th,

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

@@ -13,7 +13,8 @@ const TableBody = React.memo(
     onCheckBoxChange,
   }: TableBodyProps) => (
     <tbody>
-      {flattenedTreeData.map(({ node, level }) => {
+      <tr id="ff-table-tree-first-node" />
+      {flattenedTreeData?.map(({ node, level }) => {
         return (
           <TableRow
             key={node.id}
@@ -28,6 +29,7 @@ const TableBody = React.memo(
           />
         );
       })}
+      <tr id="ff-table-tree-last-node" />
     </tbody>
   )
 );

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

@@ -106,10 +106,9 @@ const colData = [
 
 export const Default: Story = {
   args: {
-    onPagination: (node) => {
+    loadMore: (node) => {
       console.log(node);
     },
-    expandedNodes: ['MOD1102'],
     onExpand: (isExpand, node) => {
       console.log(isExpand, node);
     },
@@ -131,12 +130,11 @@ export const ControlledCheckBox: Story = {
     const [selected, setSelected] = useState<string[]>([]);
     return (
       <TableTree
-        expandedNodes={['MOD1102']}
         onExpand={(isExpand, node) => {
           console.log(isExpand, node);
         }}
         select="checkbox"
-        onChange={(nodes: string[]) => {
+        onChange={(e, nodes: string[]) => {
           setSelected(nodes);
         }}
         selected={selected}
@@ -145,8 +143,8 @@ export const ControlledCheckBox: Story = {
         onClick={(e, data) => {
           console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
         }}
-        onPagination={(direction) => {
-          console.log(direction,'-------------------');
+        loadMore={(direction) => {
+          console.log(direction, '-------------------');
         }}
       />
     );
@@ -157,7 +155,6 @@ export const ControlledRadio: Story = {
     const [selected, setSelected] = useState<string[]>([]);
     return (
       <TableTree
-        expandedNodes={['MOD1102']}
         onExpand={(isExpand, node) => {
           console.log(isExpand, node);
         }}

package/src/components/TableTree/TableTree.tsx

@@ -1,185 +1,12 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback, memo } from 'react';
 import './TableTree.scss';
-import { prepareData } from '../../utils/TableCell/TableCell';
-import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
-import Checkbox from '../Checkbox';
-import RadioButton from '../RadioButton';
-import {
-  TableBodyProps,
-  TableCellProps,
-  TableHeadProps,
-  TableRowProps,
-  TreeTableProps,
-} from './types';
+import { TreeTableProps } from './types';
+import TableHead from './Components/TableHead';
+import TableBody from './Components/TableBody';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import getAllChildIds from './Utils/getAllChildIds';
+import functionCheck from '../../utils/functionCheck/functionCheck';
 
-// Helper to render spaces for levels
-const renderSpaces = (level: number) =>
-  Array.from({ length: level }).map((_, i) => (
-    <span key={i} className="tree-table-space-block" />
-  ));
-
-// Recursive function to get all child node IDs (including nested children)
-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;
-};
-
-// Component: TableCell
-const TableCell = React.memo(
-  ({
-    col,
-    node,
-    level,
-    selected,
-    select,
-    onCheckBoxChange,
-    onToggleExpand,
-  }: TableCellProps) => (
-    <td>
-      {col.isTree && renderSpaces(level + 1)}
-      {col.isTree && (
-        <span
-          className={`tree-table-space-block last-block  ${
-            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '' : 'no-folder'}`}
-          onClick={() => onToggleExpand(node)}
-        >
-          {node.folder && <Arrow />}
-        </span>
-      )}
-      <span className="tree-table-td-content">
-        {col.isTree && select === 'checkbox' && (
-          <Checkbox
-            checked={selected.includes(node.id)}
-            onChange={() => onCheckBoxChange('checkbox', node)}
-          />
-        )}
-        {col.isTree && select === 'radio' && (
-          <RadioButton
-            name={node.title}
-            checked={selected.includes(node.id)}
-            value={node.id}
-            onChange={() => onCheckBoxChange('radio', node)}
-          />
-        )}
-        {prepareData(node, col)}
-      </span>
-      {col.actions && (
-        <div className="table-tree-row-action">{col.actions(node)}</div>
-      )}
-    </td>
-  )
-);
-
-// Component: TableRow
-const TableRow = React.memo(
-  ({
-    node,
-    level,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableRowProps) => (
-    <tr
-      data-level={level}
-      className="show"
-      onClick={(e) => onRowClick(e, node)}
-    >
-      {columnsData.map((col) => (
-        <TableCell
-          key={col.name}
-          col={col}
-          node={node}
-          level={level}
-          selected={selected}
-          select={select}
-          onCheckBoxChange={onCheckBoxChange}
-          onToggleExpand={onToggleExpand}
-        />
-      ))}
-    </tr>
-  )
-);
-
-// Component: TableHead
-const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
-  const hasDefaultValues = useMemo(
-    () => columnsData.some(({ defaultValue }) => !!defaultValue),
-    [columnsData]
-  );
-
-  return (
-    <thead>
-      <tr>
-        {columnsData.map(({ name }) => (
-          <th key={name}>{name}</th>
-        ))}
-      </tr>
-      {hasDefaultValues && (
-        <tr>
-          {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td key={index}>
-              {defaultValue && (
-                <span className="">
-                  {defaultValue}
-                  {defaultActions && (
-                    <div className="table-tree-row-action">
-                      {defaultActions()}
-                    </div>
-                  )}
-                </span>
-              )}
-            </td>
-          ))}
-        </tr>
-      )}
-    </thead>
-  );
-});
-
-// Component: TableBody
-const TableBody = React.memo(
-  ({
-    flattenedTreeData,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableBodyProps) => (
-    <tbody>
-      {flattenedTreeData.map(({ node, level }) => {
-        return (
-          <TableRow
-            key={node.id}
-            node={node}
-            level={level}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={onRowClick}
-            onToggleExpand={onToggleExpand}
-            onCheckBoxChange={onCheckBoxChange}
-          />
-        );
-      })}
-    </tbody>
-  )
-);
-
-// Component: TreeTable
 const TreeTable: React.FC<TreeTableProps> = ({
   treeData,
   columnsData,
@@ -188,7 +15,28 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onChange,
   onClick,
   onExpand,
+  loadMore = () => {},
 }) => {
+  useIntersectionObserver(['ff-table-tree-last-node'], {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+    onIntersect: (entry) => {
+      if (entry.isIntersecting) {
+        if (functionCheck(loadMore)) {
+          let direction = 'up';
+          if (entry.target.id === 'ff-table-tree-last-node') {
+            direction = 'down';
+          }
+          loadMore();
+          console.log(direction);
+          
+        }
+        console.log('Element in view:', entry.target.id);
+      }
+    },
+  });
+
   const handleToggleExpand = useCallback(
     (node: any) => onExpand?.(true, node?.id),
     [onExpand]
@@ -242,4 +90,4 @@ const TreeTable: React.FC<TreeTableProps> = ({
   );
 };
 
-export default TreeTable;
+export default memo(TreeTable);

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

@@ -10,3 +10,5 @@ const getAllChildIds = (nodeId: string, data: any[]): string[] => {
 
   return result;
 };
+
+export default getAllChildIds;

package/src/components/TableTree/data.ts

@@ -74,6 +74,51 @@ const data = [
     },
     level: 1,
   },
+  {
+    node: {
+      subModuleCount: 10,
+      title: 'Home',
+      scriptCount: 0,
+      path: '/Root/Home',
+      expanded: true,
+      modifiedOn: '19-12-2023 15:43',
+      folder: true,
+      children: false,
+      parentId: 'MOD100', // Parent is '/Root'
+      id: 'MOD10030', // Unique ID
+    },
+    level: 1,
+  },
+  {
+    node: {
+      subModuleCount: 10,
+      title: 'Home',
+      scriptCount: 0,
+      path: '/Root/Home',
+      expanded: true,
+      modifiedOn: '19-12-2023 15:43',
+      folder: true,
+      children: false,
+      parentId: 'MOD1001', // Parent is '/Root'
+      id: 'MOD100301', // Unique ID
+    },
+    level: 1,
+  },
+  {
+    node: {
+      subModuleCount: 10,
+      title: 'Home',
+      scriptCount: 0,
+      path: '/Root/Home',
+      expanded: true,
+      modifiedOn: '19-12-2023 15:43',
+      folder: true,
+      children: false,
+      parentId: 'MOD1001', // Parent is '/Root'
+      id: 'MOD100302', // Unique ID
+    },
+    level: 1,
+  },
   {
     node: {
       ver: 1,

package/src/components/TableTree/types.ts

@@ -64,5 +64,5 @@ export interface TreeTableProps {
   onChange?: (e: any, node: string[]) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
   onExpand?: (_isExpanded: boolean, node: string) => void;
-  onPagination?: (_direction: string) => void;
+  loadMore?: (_direction?: string) => void;
 }