pixel-react-excel-sheet 1.0.19 → 1.0.21

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/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;
-}