pixel-react 1.10.15 → 1.10.16

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -1,151 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import ConditionalDropdown from './ConditionalDropdown';
-import { ConditionalDropdownProps, dynamicObject } from './types';
-import { variableList } from '../Editor/constants';
-import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
-
-export default {
-  title: 'Components/ConditionalDropdown',
-  component: ConditionalDropdown,
-  args: {
-    label: 'Add Variables',
-    placeholder: 'Enter text',
-    variableList,
-    dropdownWidth: '138px',
-    variant: 'primary',
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<ConditionalDropdownProps>;
-
-type Story = StoryObj<typeof ConditionalDropdown>;
-
-const Template: StoryFn<ConditionalDropdownProps> = (args) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [inputValue, setInputValue] = useState<string>('');
-  const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
-  const [variableName, setVariableName] = useState<string>('');
-  const [variableValue, setVariableValue] = useState<string>('');
-  const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
-    label: 'Local Variable',
-    value: 'LOCAL',
-  });
-  const [hideValue, setHideValue] = useState<boolean>(false);
-
-  return (
-    <>
-      <ConditionalDropdown
-        {...args}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          setInputValue(event.target.value)
-        }
-        value={inputValue}
-        onCreateVariableClick={() => setOpenCreateVariable(true)}
-        ref={inputRef}
-        showAddVariableIcon
-      />
-      {openCreateVariable && (
-        <CreateVariableSlider
-          isOpen={openCreateVariable}
-          onClose={() => setOpenCreateVariable(false)}
-          variableName={variableName}
-          value={variableValue}
-          hideValue={hideValue}
-          handleSubmit={() => {
-            alert('Variable Created');
-          }}
-          onHideChange={(value) => {
-            setHideValue(value);
-          }}
-          onNameChange={(value) => {
-            setVariableName(value);
-          }}
-          onValueChange={(value) => setVariableValue(value)}
-          onVariableTypeChange={(option) => setSelectedVariable(option)}
-          selectedVariableType={selectedVariable}
-          variableTypesList={[
-            { label: 'Local Variable', value: 'LOCAL' },
-            { label: 'Global Variable', value: 'GLOBAL' },
-          ]}
-        />
-      )}
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
-
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  inputValue: 'Initial Text with $',
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
-
-export const DropdownOnHash: Story = {
-  render: () => {
-    const [hashInputValue, setHashInputValue] =
-      useState<dynamicObject | null>();
-    const testData = [
-      {
-        _id: '1',
-        name: 'File1.txt',
-        actualPath: '/documents/File1.txt',
-        searchKey: 'file1',
-        parentId: 'root',
-      },
-      {
-        _id: '2',
-        name: 'File2.doc',
-        actualPath: '/documents/File2.doc',
-        searchKey: 'file2',
-        parentId: 'root',
-      },
-      {
-        _id: '3',
-        name: 'Image1.png',
-        actualPath: '/images/Image1.png',
-        searchKey: 'image1',
-        parentId: 'folder1',
-      },
-      {
-        _id: '4',
-        name: 'Presentation.ppt',
-        actualPath: '/presentations/Presentation.ppt',
-        searchKey: 'presentation',
-        parentId: 'folder2',
-      },
-      {
-        _id: '5',
-        name: 'Spreadsheet.xlsx',
-        actualPath: '/spreadsheets/Spreadsheet.xlsx',
-        searchKey: 'spreadsheet',
-        parentId: 'folder3',
-      },
-      {
-        _id: '6',
-        name: 'Code.js',
-        actualPath: '/projects/Code.js',
-        searchKey: 'code',
-        parentId: 'folder4',
-      },
-    ];
-
-    return (
-      <>
-        <ConditionalDropdown
-          label="Select Path Using #"
-          placeholder="Enter # to search files"
-          isHash
-          dataFiles={testData}
-          dropdownWidth="auto"
-          setHashInputValue={setHashInputValue}
-        />
-      </>
-    );
-  },
-};

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -1,276 +0,0 @@
-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 { ConditionalDropdownProps, dynamicObject } from './types';
-import './ConditionalDropdown.scss';
-import OptionsDropdown from './OptionsDropdown';
-
-const ConditionalDropdown = forwardRef<
-  HTMLInputElement,
-  ConditionalDropdownProps
->(
-  (
-    {
-      label = '',
-      hashInputValue = '',
-      setHashInputValue,
-      variableList = [],
-      placeholder = 'Enter text',
-      onChange,
-      onCreateVariableClick,
-      value = '',
-      dropdownWidth = 'inherit',
-      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(filtered.length > 0);
-      }
-    }, [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]);
-
-    function findNearestDollar(input: string, cursorPosition: number): number {
-      const lastDollarBeforeCursor = input.lastIndexOf('$', cursorPosition - 1);
-
-      const nextDollarAfterCursor = input.indexOf('$', cursorPosition);
-
-      if (lastDollarBeforeCursor === -1 && nextDollarAfterCursor === -1) {
-        return -1;
-      } else if (lastDollarBeforeCursor === -1) {
-        return nextDollarAfterCursor;
-      } else if (nextDollarAfterCursor === -1) {
-        return lastDollarBeforeCursor;
-      } else {
-        return Math.abs(cursorPosition - lastDollarBeforeCursor) <=
-          Math.abs(nextDollarAfterCursor - cursorPosition)
-          ? lastDollarBeforeCursor
-          : nextDollarAfterCursor;
-      }
-    }
-
-    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}}`;
-
-        let newValue;
-        if (isHash && value[0] === '#') {
-          newValue = item.name + value.slice(selectionEnd || 1);
-        } else {
-          newValue =
-            value.slice(0, findNearestDollar(value, findCursor) || 0) +
-            '$' +
-            dollarSyntax +
-            value.slice(selectionEnd || 0);
-        }
-
-        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) {
-            showDropdown = false;
-            searchString = '';
-          }
-        }
-      }
-
-      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 ConditionalDropdown;

package/src/components/ConditionalDropdown/OptionsDropdown.tsx

@@ -1,44 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { dynamicObject, OptionsDropdownProps } from './types';
-import './ConditionalDropdown.scss';
-import Typography from '../Typography';
-import classNames from 'classnames';
-
-const OptionsDropdown:FC<OptionsDropdownProps> = ({
-    onSelectVariable,
-    dropdownPosition,
-    filteredOptions= [],
-    position = 'relative',
-    width = '300px',
-  }): ReactNode => {
-    return (
-      <div
-        className={classNames('ff-variable-dropdown', position)}
-        style={
-          dropdownPosition
-            ? {
-                top: dropdownPosition.top + 30,
-                left: dropdownPosition.left - 30,
-                width,
-              }
-            : { width }
-        }
-      >
-        {filteredOptions?.map((option: dynamicObject): ReactNode => {
-          return (
-            <div
-              className="ff-variable-option"
-              onClick={() => onSelectVariable(option)}
-              key={option?.id}
-            >
-              <Typography as="span" fontSize={14}>
-                {option?.name}
-              </Typography>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-export default OptionsDropdown;

package/src/components/ConditionalDropdown/index.ts

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

package/src/components/ConditionalDropdown/types.ts

@@ -1,166 +0,0 @@
-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 ConditionalDropdownProps {
-  /**
-   * 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;
-}