pixel-react 1.10.9 → 1.10.10-1

package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.tsx

@@ -0,0 +1,244 @@
+import {
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import { VariableSuggestionInputDropDownProps, dynamicObject } from './types';
+import './VariableSuggestionInputDropDown.scss';
+import OptionsDropdown from './OptionsDropdown';
+
+const VariableSuggestionInputDropDown = forwardRef<
+  HTMLInputElement,
+  VariableSuggestionInputDropDownProps
+>(
+  (
+    {
+      label = '',
+      hashInputValue = '',
+      setHashInputValue,
+      variableList = [],
+      placeholder = 'Enter text',
+      onChange,
+      onCreateVariableClick,
+      value = '',
+      dropdownWidth = '100%',
+      isHash = false,
+      dataFiles = [],
+      showAddVariableIcon = true,
+      helperText = '',
+      error,
+      autoComplete = 'off',
+      required = false,
+      formProps = {},
+      ...props
+    },
+    ref
+  ) => {
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const [isDropdownClicked, setIsDropdownClicked] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+    const [findCursor, setFindCursor] = useState(0);
+    const [showCreateVariableIcon, setShowCreateVariableIcon] =
+      useState<boolean>(false);
+    const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+    useEffect(() => {
+      if (cursorPosition !== null && inputRef.current) {
+        inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+        inputRef.current.focus();
+      }
+    }, [cursorPosition]);
+
+    useEffect(() => {
+      if (isHash) {
+        setShowDropdown(value.startsWith('#'));
+      } else {
+        setShowCreateVariableIcon(!value?.includes('$'));
+      }
+      if (value.startsWith('#') && isHash) {
+        const searchQuery = value.slice(1).toLowerCase();
+        const filtered = dataFiles.filter((file) =>
+          file.name.toLowerCase().includes(searchQuery)
+        );
+        setFilteredOptions(filtered);
+        setShowDropdown(true);
+      }
+    }, [value]);
+    const updateCursorPosition = () => {
+      if (inputRef.current) {
+        setFindCursor(inputRef.current.selectionStart || 0);
+      }
+    };
+
+    const handleClick = updateCursorPosition;
+    const handleKeyUp = updateCursorPosition;
+
+    useEffect(() => {
+      if (inputRef.current) {
+        setFindCursor(inputRef.current.selectionStart || 0);
+      }
+    }, [value]);
+
+    const handleDropdownClick = (item: dynamicObject) => {
+      if (inputRef.current) {
+        const { selectionStart, selectionEnd } = inputRef.current;
+        const dollarSyntax = `${item.name}`;
+
+        let newValue;
+        if (isHash && value[0] === '#') {
+          newValue = item.name + value.slice(selectionEnd || 1);
+        } else {
+          newValue = item.name;
+        }
+
+        if (onChange) {
+          const event = {
+            target: {
+              value: newValue,
+            },
+          } as React.ChangeEvent<HTMLInputElement>;
+          onChange(event);
+        }
+        inputRef.current.value = newValue;
+        setHashInputValue?.(item);
+        setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+        setShowDropdown(false);
+        setIsDropdownClicked(true);
+      }
+    };
+
+    function getDropdownState(
+      input: string,
+      cursorPosit: number,
+      variableList: dynamicObject[]
+    ): { showDropdown: boolean; searchString: string } {
+      let showDropdown = false;
+      let searchString = '';
+      const checkifCursorPositionhasCloseCurly = value[cursorPosit - 1] === '}';
+      if (cursorPosit < 0 || cursorPosit > input.length) {
+        return { showDropdown, searchString };
+      }
+
+      const lastDollarBeforeCursor = input.lastIndexOf('$', cursorPosit - 1);
+      const nextDollarAfterCursor = input.indexOf('$', cursorPosit);
+
+      if (lastDollarBeforeCursor !== -1) {
+        if (cursorPosit === lastDollarBeforeCursor + 1) {
+          showDropdown = true;
+          searchString = '';
+        } else {
+          searchString = input.slice(
+            lastDollarBeforeCursor + 1,
+            nextDollarAfterCursor === -1 ? undefined : nextDollarAfterCursor
+          );
+
+          if (cursorPosit > lastDollarBeforeCursor + 1) {
+            searchString = input.slice(lastDollarBeforeCursor + 1, cursorPosit);
+          }
+          showDropdown = true;
+        }
+        if (isDropdownClicked && checkifCursorPositionhasCloseCurly) {
+          showDropdown = false;
+        }
+
+        if (/[{}]/.test(searchString) || cursorPosit === 0) {
+          showDropdown = false;
+          searchString = '';
+        }
+
+        if (searchString) {
+          const isInVariableList = variableList.some((file) =>
+            file.name.toLowerCase().includes(searchString.toLowerCase())
+          );
+          if (!isInVariableList) {
+            variableList = [];
+          }
+        }
+      }
+
+      return { showDropdown, searchString };
+    }
+
+    const result = getDropdownState(value, findCursor, variableList);
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      {
+        if (
+          !e.relatedTarget ||
+          !e.relatedTarget.closest('.dropdown-container')
+        ) {
+          setIsFocused(false);
+        }
+      }
+    };
+    return (
+      <div className="ff-add-variable-container">
+        <div className="ff-add-variable-input">
+          <Input
+            {...props}
+            name="add_variable"
+            ref={inputRef}
+            type="text"
+            value={value}
+            onChange={onChange}
+            variant="primary"
+            label={label}
+            placeholder={placeholder}
+            onClick={handleClick}
+            onKeyUp={handleKeyUp}
+            onFocus={() => setIsFocused(true)}
+            onBlur={(e) => handleBlur(e)}
+            autoComplete={autoComplete}
+            helperText={helperText}
+            error={error}
+            required={required}
+            {...formProps}
+          />
+          {!checkEmpty(value) &&
+            !isHash &&
+            showCreateVariableIcon &&
+            showAddVariableIcon && (
+              <Icon
+                onClick={onCreateVariableClick}
+                name="add_variable"
+                width={24}
+                height={24}
+                hoverEffect
+              />
+            )}
+        </div>
+        {result?.showDropdown && isFocused && (
+          <VariableDropdown
+            position="absolute"
+            width={dropdownWidth}
+            optionsList={variableList.filter((file) =>
+              file.name.toLowerCase().includes(result?.searchString)
+            )}
+            onSelectVariable={handleDropdownClick}
+          />
+        )}
+        {showDropdown && isHash && (
+          <OptionsDropdown
+            position="relative"
+            width={dropdownWidth}
+            filteredOptions={filteredOptions}
+            onSelectVariable={handleDropdownClick}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+export default VariableSuggestionInputDropDown;

package/src/components/variableSuggestionInputDropDown/index.ts

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

package/src/components/variableSuggestionInputDropDown/types.ts

@@ -0,0 +1,166 @@
+import { dropdownPositionType } from '../Editor/types';
+
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export type TestDataObject = {
+  _id: string;
+  name: string;
+  actualPath: string;
+  searchKey: string;
+  parentId: string;
+};
+
+export interface VariableSuggestionInputDropDownProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+
+  /**
+   * Value in the input should stored in this state
+   */
+  hashInputValue?: TestDataObject | dynamicObject;
+
+  /**
+   * Function storing and updating the inputValue state
+   */
+  setHashInputValue?: (value: File | dynamicObject | null) => void;
+
+  /**
+   * List of variables
+   */
+  variableList?: dynamicObject[];
+  /**
+   * Place holder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Function to handle input change
+   * @param value
+   * @returns
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Function to handle create variable icon click
+   */
+  onCreateVariableClick?: () => void;
+  /**
+   * Width of the dropdown
+   */
+  dropdownWidth?: string;
+  /**
+   * Name | name of the input field
+   */
+  name?: string;
+  /**
+   * value | input field value
+   */
+  value?: string;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * type to set color/style of the input field
+   */
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
+
+  /**
+   * If true, dropdown opens when '#' is entered at the first position.
+   */
+  isHash?: boolean;
+  /**
+   * Options for the dropdown when `isHash` is true.
+   */
+  dataFiles?: dynamicObject[];
+  /**
+   * a boolean prop to show add variable icon or not.
+   */
+  showAddVariableIcon?: boolean;
+
+  formProps?: Record<string, any>;
+}
+
+export interface OptionsDropdownProps {
+  /**
+   * Position whether absoloute or relative
+   */
+  position: 'absolute' | 'relative';
+
+  /**
+   * Dropdown width
+   */
+  width: string;
+
+  /**
+   * chars entered to search in Input :
+   */
+  filteredOptions?: dynamicObject[];
+
+  /**
+   * Function to handle click on variable
+   */
+  onSelectVariable: (variable: object) => void;
+
+  /**
+   * Dropdown postion used for dropdown placement
+   */
+  dropdownPosition?: dropdownPositionType;
+}

package/src/index.ts

@@ -112,6 +112,7 @@ import { getTreeDetails } from './utils/getTreeDetails/getTreeDetails';
 import { handleTreeNodeSect } from './utils/handleTreeNodeSelect/handleTreeNodeSelect';
 
 import { TreeNodeProps } from './ComponentProps/TreeNodeProps';
+import { VariableSuggestionInputDropDownProps } from './components/variableSuggestionInputDropDown/types';
 
 import {
   EMAIL_REGEX,
@@ -262,6 +263,7 @@ export {
   ChooseFile,
   ScriptSwitchButton,
   MobileSkin,
+  VariableSuggestionInputDropDownProps,
 
   // utils exports
   checkEmpty,