pixel-react 1.6.8 → 1.7.0

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,26 @@ 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(direction);
+        }
+        console.log('Element in view:', entry.target.id);
+      }
+    },
+  });
+
   const handleToggleExpand = useCallback(
     (node: any) => onExpand?.(true, node?.id),
     [onExpand]
@@ -242,4 +88,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

@@ -49,11 +49,11 @@ export interface Column {
   accessor: string;
   width: string;
   isClickable?: boolean;
-  cell?: (row: any) => JSX
-  actions?: (row: any) => JSX
+  cell?: (row: any) => JSX;
+  actions?: (row: any) => JSX;
   isTree?: boolean;
   defaultValue?: string;
-  defaultActions?: () => JSX
+  defaultActions?: () => JSX;
 }
 
 export interface TreeTableProps {
@@ -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;
 }

package/src/hooks/useIntersectionObserver.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+interface UseIntersectionObserverOptions {
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+  onIntersect: (
+    entry: IntersectionObserverEntry,
+    observer: IntersectionObserver
+  ) => void;
+}
+
+export function useIntersectionObserver(
+  elements: (Element | string)[] | null, // Accepts Element or id strings
+  options: UseIntersectionObserverOptions
+): void {
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (!elements || elements.length === 0) return;
+
+    const {
+      root = null,
+      rootMargin = '0px',
+      threshold = 0,
+      onIntersect,
+    } = options;
+
+    // Resolve elements: convert ids to DOM elements
+    const resolvedElements = elements
+      .map((element) =>
+        typeof element === 'string' ? document.getElementById(element) : element
+      )
+      .filter((el): el is Element => el !== null); // Ensure valid elements
+
+    if (resolvedElements.length === 0) {
+      console.warn('No valid elements to observe.');
+      return;
+    }
+
+    observerRef.current = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => onIntersect(entry, observer));
+      },
+      { root, rootMargin, threshold }
+    );
+
+    resolvedElements.forEach((element) =>
+      observerRef.current?.observe(element)
+    );
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [elements, options]);
+}

package/src/index.ts

@@ -70,6 +70,7 @@ import DownloadClient from './components/DownloadClient/DownloadClient';
 import FieldSet from './components/FieldSet';
 import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
 import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
+import ProgressBar from './components/ProgressBar';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -96,7 +97,7 @@ import Comments from './components/Comment/Comments';
 import useFileDropzone from './hooks/useFileDropzone';
 import PopUpModal from './components/PopUpModal/PopUpModal';
 import FormatString from './utils/FormatString/FormatString';
-import AddVariables from './components/AddVariables/AddVariables';
+import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
 
@@ -179,10 +180,10 @@ export {
   Comments,
   PopUpModal,
   CreateVariableSlider,
-  AddVariables,
+  ConditionalDropdown,
   PhoneInputField,
-
   TableWithAccordion,
+  ProgressBar,
   // utils exports
   checkEmpty,
   getExtension,

package/src/utils/functionCheck/functionCheck.ts

@@ -0,0 +1,8 @@
+import { checkEmpty } from '../checkEmpty/checkEmpty';
+
+const functionCheck = (functionToCheck: any) =>
+  !checkEmpty(functionToCheck) &&
+  functionToCheck &&
+  {}.toString.call(functionToCheck) === '[object Function]';
+
+export default functionCheck;

package/src/utils/getSequentialPayload/types.ts

@@ -2,6 +2,7 @@ export interface OperatingSystemInfo {
   osName: string;
   osVersion: string;
   hostName: string;
+  iconName: string;
 }
 
 export interface RunLevelExecutionDataSet {

package/src/components/AddVariables/AddVariables.stories.tsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import AddVariables from './AddVariables';
-import { AddVariableProps } from './types';
-import { variableList } from '../Editor/constants';
-
-export default {
-  title: 'Components/AddVariables',
-  component: AddVariables,
-  args: {
-    label: 'Add Variables',
-    placeholder: 'Enter text',
-    variableList,
-    dropdownWidth: '138px',
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<AddVariableProps>;
-
-// Wrapper component to handle state inside Storybook stories
-const Template: StoryFn<AddVariableProps> = (args) => {
-  const [inputValue, setInputValue] = useState<string>('');
-
-  return (
-    <AddVariables
-      {...args}
-      onChange={(value: string) => setInputValue(value)}
-      value={inputValue}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
-
-// Customized story with pre-filled input value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  inputValue: 'Initial Text with $',
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};

package/src/components/AddVariables/AddVariables.tsx

@@ -1,113 +0,0 @@
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import VariableDropdown from '../Editor/VariableDropdown';
-import Icon from '../Icon';
-import Input from '../Input';
-import { AddVariableProps, dynamicObject } from './types';
-import './AddVariables.scss';
-import React, { useState, useRef, useEffect } from 'react';
-
-const AddVariables: React.FC<AddVariableProps> = ({
-  label = '',
-  variableList = [],
-  placeholder = 'Enter text',
-  onChange,
-  onCreateVariableClick,
-  value = '',
-  dropdownWidth = 'inherit',
-}) => {
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
-  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-  const [showCreateVariableIcon, setShowCreateVariableIcon] =
-    useState<boolean>(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (cursorPosition !== null && inputRef.current) {
-      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
-      inputRef.current.focus();
-    }
-  }, [cursorPosition]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    onChange?.(value);
-
-    // Show dropdown only if the last character typed is `$`
-    const cursorPos = inputRef.current?.selectionStart || 0;
-    const isDollarTyped = value[cursorPos - 1] === '$';
-
-    if (isDollarTyped) {
-      setShowDropdown(true);
-    } else {
-      setShowDropdown(false); // Close if it's a space or other characters
-    }
-    if (value?.includes('$')) {
-      setShowCreateVariableIcon(false);
-    } else {
-      setShowCreateVariableIcon(true);
-    }
-  };
-
-  const handleDropdownClick = (item: dynamicObject) => {
-    if (inputRef.current) {
-      const { selectionStart, selectionEnd } = inputRef.current;
-      const dollarSyntax = `{${
-        item.type === 'LOCAL'
-          ? 'LV'
-          : item.type === 'GLOBAL'
-          ? 'GV'
-          : item.type === 'GROUP'
-          ? 'SG'
-          : 'PEV'
-      }_${item.name}}`;
-
-      const newValue =
-        value.slice(0, selectionStart || 0) +
-        dollarSyntax +
-        value.slice(selectionEnd || 0);
-
-      onChange(newValue);
-      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
-
-      // Close the dropdown after inserting the variable
-      setShowDropdown(false);
-      onChange?.(newValue);
-    }
-  };
-
-  return (
-    <div className="ff-add-variable-container">
-      <div className="ff-add-variable-input">
-        <Input
-          name="add_variable"
-          ref={inputRef}
-          type="text"
-          value={value}
-          onChange={handleChange}
-          variant="primary"
-          label={label}
-          placeholder={placeholder}
-        />
-        {!checkEmpty(value) && showCreateVariableIcon && (
-          <Icon
-            onClick={onCreateVariableClick}
-            name="add_variable"
-            width={24}
-            height={24}
-            hoverEffect
-          />
-        )}
-      </div>
-      {showDropdown && (
-        <VariableDropdown
-          position="relative"
-          width={dropdownWidth}
-          optionsList={variableList}
-          onSelectVariable={handleDropdownClick}
-        />
-      )}
-    </div>
-  );
-};
-
-export default AddVariables;

package/src/components/AddVariables/index.ts

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

package/src/components/AddVariables/types.ts

@@ -1,36 +0,0 @@
-export type dynamicObject = {
-  [key: string]: any;
-};
-
-export interface AddVariableProps {
-  /**
-   * Label for the field
-   */
-  label?: string;
-  /**
-   * List of variables
-   */
-  variableList?: dynamicObject[];
-  /**
-   * Place holder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Function to handle input change
-   * @param value
-   * @returns
-   */
-  onChange: (value: string) => void;
-  /**
-   * Function to handle create variable icon click
-   */
-  onCreateVariableClick?: () => void;
-  /**
-   * Value of the input field
-   */
-  value: string;
-  /**
-   * Width of the dropdown
-   */
-  dropdownWidth?: string;
-}