pixel-react 1.10.15 → 1.10.16

package/src/components/Select/Select.tsx

@@ -1,305 +0,0 @@
-import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
-import './Select.scss';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import { DropdownPosition, Option, SelectProps } from './types';
-import classNames from 'classnames';
-import { createPortal } from 'react-dom';
-import Dropdown from './components/Dropdown';
-import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
-import usePortalPosition from '../../hooks/usePortalPosition';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Tooltip from '../Tooltip';
-
-const Select: FC<SelectProps> = ({
-  label = 'Default Label',
-  showLabel = true,
-  optionsList = [],
-  selectedOption = { label: '', value: '' },
-  onChange = () => {},
-  errorMsg = '',
-  className = '',
-  optionZIndex = 100,
-  disabled = false,
-  showBorder = true,
-  required = true,
-  optionsRequired = true,
-  selectedOptionColor = 'var(--ff-select-text-color)',
-  labelAccessor = '',
-  valueAccessor = '',
-  height = 32,
-  width = '100%',
-  onBlur = () => {},
-  disableInput = false,
-  showIcon = false,
-  placeHolder = '',
-  showToolTip = false,
-  onCancelModal = () => {},
-  onSaveModal = () => {},
-  modalJSXProps = <></>,
-  recurrence = false,
-}) => {
-  const selectWidth = typeof width === 'number' ? `${width}px` : width;
-
-  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
-  const [customRecurrence, setCustomRecurrence] = useState(false);
-  const [searchedOption, setSearchedOption] = useState<any>({
-    searchedText: '',
-    searchedIcon: '',
-  });
-  const { searchedText, searchedIcon } = searchedOption;
-  const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
-  const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({
-    positionX: 0,
-    positionY: 0,
-    width: 0,
-    fromBottom: 0,
-  });
-
-  const DropdownRef = useRef<HTMLDivElement>(null);
-  const selectWrapperRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const selectArrowRef = useRef<HTMLDivElement>(null);
-
-  const calculatePosition = usePortalPosition(inputRef, showDropdownOptions);
-
-  const handleIconClick = () => {
-    setShowDropdownOptions(!showDropdownOptions);
-    setSearchedOption({
-      ...searchedOption,
-      searchedText: getValue(selectedOption, valueAccessor),
-    });
-    setSelectOptionList(optionsList);
-    if (!showDropdownOptions && inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (disabled) return;
-    const { value } = event.target;
-
-    const filteredOptions = optionsList.filter((option) => {
-      const valueData = getValue(option, valueAccessor);
-      return typeof valueData === 'string'
-        ? valueData.toLowerCase().includes(value.toLowerCase().trim())
-        : valueData === Number(value);
-    });
-
-    setSelectOptionList(filteredOptions);
-    setSearchedOption({
-      ...searchedOption,
-      searchedText: value,
-    });
-  };
-
-  const onSelectUpdatePosition = () => {
-    if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
-    setDropdownPosition(calculatePosition(inputRef));
-  };
-
-  const onSelectToggleScroll = (isEnabled: boolean): void => {
-    const scrollWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-
-    if (isEnabled) {
-      document.body.style.paddingRight = '';
-      document.body.style.overflow = '';
-    } else {
-      document.body.style.paddingRight = `${scrollWidth}px`;
-      document.body.style.overflow = 'hidden';
-    }
-  };
-
-  const handleFocus = () => {
-    if (disabled) return;
-    setShowDropdownOptions(true);
-  };
-
-  const onSelectBlur = () => {
-    setShowDropdownOptions(false);
-    setDropdownPosition({
-      positionX: 0,
-      positionY: 0,
-      fromBottom: 0,
-      width: 0,
-    });
-    setSearchedOption({
-      searchedText: getValue(selectedOption, valueAccessor),
-      searchedIcon: selectedOption.iconName,
-    });
-    setSelectOptionList(optionsList);
-    setCustomRecurrence(false);
-    onBlur();
-  };
-
-  const onSelectOptionSelector = (option: Option): void => {
-    if (disabled) return;
-    const isCustomRecurrence = option?.recurrence || false;
-    setCustomRecurrence(isCustomRecurrence);
-    setSearchedOption({
-      searchedText: getValue(selectedOption, valueAccessor),
-      searchedIcon: selectedOption.iconName,
-    });
-    if (onChange) {
-      onChange(option);
-    }
-    if (!isCustomRecurrence) {
-      onSelectBlur();
-    }
-  };
-
-  const handleResizeOrScroll = () => onSelectUpdatePosition();
-
-  const hideShowScrollbar = () => {
-    if (disabled) return;
-    if (showDropdownOptions && optionsRequired) {
-      onSelectToggleScroll(!showDropdownOptions);
-    }
-    onSelectUpdatePosition();
-
-    window.addEventListener('resize', handleResizeOrScroll);
-    window.addEventListener('scroll', handleResizeOrScroll);
-  };
-
-  useEffect(() => {
-    hideShowScrollbar();
-    return () => {
-      onSelectToggleScroll(true);
-      window.removeEventListener('resize', handleResizeOrScroll);
-      window.removeEventListener('scroll', handleResizeOrScroll);
-    };
-  }, [showDropdownOptions]);
-
-  useEffect(() => {
-    setSearchedOption({
-      searchedText: getValue(selectedOption, valueAccessor),
-      searchedIcon: selectedOption.iconName,
-    });
-  }, [selectedOption]);
-
-  useEffect(() => {
-    if (checkEmpty(optionsList)) return;
-    setSelectOptionList(optionsList);
-  }, [optionsList]);
-
-  if (showLabel) {
-    placeHolder = '';
-  }
-
-  return (
-    <div
-      className={`ff-select-wrapper ${className}`}
-      ref={selectWrapperRef}
-      style={{ height: `${height}px`, width: `${selectWidth}` }}
-    >
-      <div
-        className={classNames('ff-select', {
-          'ff-select__focus': showDropdownOptions,
-          'ff-select__disabled': disabled,
-          'ff-select__error': !!errorMsg,
-          'ff-select__error__focused': !!errorMsg && showDropdownOptions,
-          'ff-select__no_border': !showBorder,
-        })}
-      >
-        {showIcon && (
-          <Tooltip placement="bottom" title={searchedText}>
-            <Icon name={searchedIcon} className="ff-select-input-icon" />
-          </Tooltip>
-        )}
-        <input
-          type="text"
-          ref={inputRef}
-          id="select-input-element"
-          className={classNames('ff-select-inputField', {
-            'ff-select-inputField__disabled': disabled,
-            'ff-select-inputField__readonly': disableInput,
-            'ff-select-inputField__icon': showIcon,
-          })}
-          onFocus={handleFocus}
-          value={searchedText}
-          autoCorrect="off"
-          autoComplete="off"
-          spellCheck="false"
-          style={{ zIndex: optionZIndex, color: selectedOptionColor }}
-          disabled={disabled}
-          onChange={handleChange}
-          readOnly={disableInput}
-          placeholder={placeHolder}
-        />
-        {optionsRequired && (
-          <div
-            ref={selectArrowRef}
-            className={classNames('ff-select-arrows-wrapper', {
-              'ff-select-arrows-wrapper__disabled': disabled,
-            })}
-            onClick={handleIconClick}
-          >
-            <Icon
-              name="arrow_down"
-              className="ff-select-arrows"
-              height={8}
-              width={12}
-            />
-          </div>
-        )}
-        {showLabel && (
-          <Typography
-            as="span"
-            className={classNames('ff-select-labels', {
-              'ff-select-labels__icon': showIcon,
-              'ff-select-labels__active': searchedText,
-            })}
-            fontSize={searchedText || showDropdownOptions ? 10 : 12}
-            lineHeight={searchedText || showDropdownOptions ? '10px' : '12px'}
-            required={required}
-          >
-            {label}
-          </Typography>
-        )}
-      </div>
-      {errorMsg && (
-        <Typography
-          as="div"
-          lineHeight="15px"
-          fontSize={10}
-          color="var(--error_light)"
-          className="ff-select-error-msg"
-        >
-          {errorMsg}
-        </Typography>
-      )}
-
-      {optionsRequired && (
-        <div ref={DropdownRef}>
-          {showDropdownOptions &&
-            createPortal(
-              <Dropdown
-                options={selectOptionList}
-                dropdownPosition={dropdownPosition}
-                labelAccessor={labelAccessor}
-                optionZIndex={optionZIndex}
-                inputRef={inputRef}
-                selectArrowRef={selectArrowRef}
-                onSelectBlur={onSelectBlur}
-                onSelectOptionSelector={onSelectOptionSelector}
-                heightFromTop={height}
-                selectedOption={searchedText}
-                showIcon={showIcon}
-                showToolTip={showToolTip}
-                customReccurenece={customRecurrence}
-                onSaveModal={onSaveModal}
-                onCancelModal={onCancelModal}
-                modalJSXProps={modalJSXProps}
-                recurrence={recurrence}
-                valueAccessor={valueAccessor}
-              />,
-              document.body
-            )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Select;

package/src/components/Select/components/Dropdown.tsx

@@ -1,196 +0,0 @@
-import React, { type FC, useContext, useRef } from 'react';
-import { dropdownDefaultCSSData, DropdownProps } from './types';
-import './Dropdown.scss';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-import Typography from '../../Typography';
-import { ffid } from '../../../utils/ffID/ffid';
-import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import {
-  getLabel,
-  getValue,
-} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
-import useClickOutside from '../../../hooks/useClickOutside';
-import Icon from '../../Icon';
-import Tooltip from '../../Tooltip';
-import Button from '../../Button';
-
-const Dropdown: FC<DropdownProps> = ({
-  options = [],
-  optionZIndex = 10000000,
-  dropdownPosition,
-  labelAccessor,
-  onSelectOptionSelector,
-  onSelectBlur,
-  inputRef,
-  selectArrowRef,
-  heightFromTop,
-  selectedOption,
-  valueAccessor,
-  showIcon = false,
-  showToolTip = false,
-  customReccurenece = true,
-  onCancelModal = () => {},
-  onSaveModal = () => {},
-  recurrence = false,
-  modalJSXProps = <></>,
-}) => {
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-
-  const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
-
-  const optionsWrapperRef = useRef<HTMLDivElement>(null);
-  useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [
-    inputRef,
-    selectArrowRef,
-  ]);
-
-  const { positionX, positionY, fromBottom, width } = dropdownPosition;
-  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
-    dropdownDefaultCSSData;
-
-  const updateDropdownPosition = () => {
-    let dropdownContainerHeight;
-
-    if (checkEmpty(options)) {
-      dropdownContainerHeight = 32 + 2 * dropDownWrapperPadding;
-    } else if (options?.length > 5) {
-      dropdownContainerHeight = 160;
-    } else {
-      dropdownContainerHeight =
-        options.length * optionHeight + 2 * dropDownWrapperPadding;
-    }
-
-    if (fromBottom > dropdownContainerHeight + margin) {
-      return {
-        left: positionX,
-        top: positionY + heightFromTop,
-        width: showIcon ? width + 56 : width + 30,
-        zIndex: optionZIndex,
-        marginLeft: showIcon ? '-29px' : '-2px',
-      };
-    }
-    return {
-      zIndex: optionZIndex,
-      left: positionX,
-      width: showIcon ? width + 56 : width + 30,
-      top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
-      marginLeft: showIcon ? '-29px' : '-2px',
-    };
-  };
-
-  const getOptionLabel = (label: any, icon: string) => {
-    if (React.isValidElement(label)) {
-      return label;
-    }
-    return (
-      <Tooltip
-        placement="bottom"
-        title={showToolTip ? label : ''}
-        zIndex={optionZIndex + 1}
-      >
-        <Typography
-          as="div"
-          lineHeight="30px"
-          color="var(--ff-select-text-color)"
-          className={classNames({
-            'ff-select-dropdown-icon-container': showIcon,
-          })}
-        >
-          {showIcon && (
-            <Icon
-              name={icon}
-              className="ff-select-dropdown-icon-container__icon"
-            />
-          )}
-          {label}
-        </Typography>
-      </Tooltip>
-    );
-  };
-
-  const onHandleCancelModal = () => {
-    onSelectBlur();
-    onCancelModal();
-  };
-
-  const onHandleSaveModal = () => {
-    onSelectBlur();
-    onSaveModal();
-  };
-
-  return (
-    <div
-      className={classNames('ff-select-dropdown-wrapper', currentTheme, {
-        'ff-select-dropdown-modal-wrapper': recurrence,
-        'ff-select-dropdown-mini-modal-wrapper': customReccurenece,
-      })}
-      ref={optionsWrapperRef}
-      style={updateDropdownPosition()}
-    >
-      <div
-        className={classNames({
-          'ff-select-label-minimodal-wrapper': customReccurenece,
-        })}
-      >
-        {!checkEmpty(options) ? (
-          options.map((option) => (
-                <div
-                  className={classNames(
-                    'ff-select-dropdown-option',
-                    {
-                      'ff-select-dropdown-option__selected':
-                        getValue(option, valueAccessor) === selectedOption,
-                    },
-                    currentTheme
-                  )}
-                  key={ffid()}
-                  onClick={() => {
-                    if ('disable' in option && option['disable']) return;
-                    onSelectOptionSelector(option);
-                  }}
-                >
-                  {getOptionLabel(
-                    getLabel(option, labelAccessor),
-                    'iconName' in option && option['iconName']
-                  )}
-                </div>
-          ))
-        ) : (
-          <Typography
-            textAlign="center"
-            as="div"
-            lineHeight="32px"
-            color="var(--ff-select-text-color)"
-            className={classNames('ff-select-no-option', currentTheme)}
-          >
-            No Results found
-          </Typography>
-        )}
-      </div>
-
-      {customReccurenece && (
-        <div className="ff-select-mini-modal-wrapper" id="ff-select-mini-id">
-          <div className="ff-select-modal-wrapper">
-            {<>{modalJSXProps}</>}
-            <div className="ff-select-mini-modal-footer">
-              <Button
-                label="Cancel"
-                variant="tertiary"
-                onClick={onHandleCancelModal}
-              />
-              <Button
-                label="Save"
-                variant="secondary"
-                onClick={onHandleSaveModal}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;

package/src/components/Select/components/types.ts

@@ -1,30 +0,0 @@
-import { DropdownPosition, Option } from '../types';
-import { ReactNode, RefObject } from 'react';
-
-export interface DropdownProps {
-  options: Option[];
-  dropdownPosition: DropdownPosition;
-  optionZIndex: number;
-  labelAccessor?: string;
-  valueAccessor?: string;
-  onSelectBlur: () => void;
-  onSelectOptionSelector: (option: Option) => void;
-  inputRef?: RefObject<HTMLInputElement>;
-  selectArrowRef?: RefObject<HTMLDivElement>;
-  heightFromTop: number;
-  selectedOption?: Option;
-  showIcon?: boolean;
-  showToolTip?: boolean;
-  customReccurenece?: boolean;
-  onCancelModal?: () => void;
-  onSaveModal?: () => void;
-  modalJSXProps?: ReactNode;
-  recurrence?: boolean;
-}
-
-export const dropdownDefaultCSSData = {
-  margin: 6,
-  optionHeight: 32,
-  selectInputHeight: 38,
-  dropDownWrapperPadding: 0,
-};

package/src/components/Select/index.ts

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

package/src/components/Select/types.ts

@@ -1,171 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface SelectProps {
-  /*
-   * Label for the select dropdown
-   */
-  label?: string;
-
-  /*
-   * If true, the select dropdown will have a label
-   */
-  showLabel?: boolean;
-
-  /*
-   * Options for the select dropdown
-   */
-  optionsList: Option[];
-
-  /*
-   * Selected option for the select dropdown
-   */
-  selectedOption: Option;
-
-  /*
-   * onChange callback function for handling selected option changes
-   */
-  onChange: (option: Option) => void;
-
-  /*
-   * If error is true, this message will be displayed
-   */
-  errorMsg?: string;
-
-  /*
-   * provide the className for the select dropdown
-   */
-  className?: string;
-
-  /*
-   *  Providing the z-index for dropdown and select
-   */
-  optionZIndex?: number;
-
-  /*
-   * Provide disable prop for the disabling the select component
-   */
-  disabled?: boolean;
-
-  /*
-   * Provide disable prop for the providing border radius at right side
-   */
-  borderRadius?: boolean;
-
-  /*
-   * Provide boolean value to show border or not
-   */
-  showBorder?: boolean;
-
-  /*
-   * Provide the boolean value if the select component is required or not
-   */
-  required?: boolean;
-  /**
-   * optionsRequired:false prop removes options from dropdown & shows static label only
-   */
-  optionsRequired?: boolean;
-
-  /*
-   * selectedOptionColor prop provides the custom color for the selected option
-   */
-  selectedOptionColor?: string;
-
-  /*
-   * Label accessor
-   */
-
-  labelAccessor?: string;
-
-  /*
-   * Value accessor
-   */
-  valueAccessor?: string;
-
-  /*
-   * Provide the custom height for the select container
-   */
-  height?: number;
-
-  /*
-   * Provide the custom width for the select container
-   */
-  width?: number | string;
-
-  /*
-   *  Provide the onBlur functionality for the select
-   */
-  onBlur?: () => void;
-
-  /*
-   * Disable the select component input
-   */
-  disableInput?: boolean;
-
-  /*
-   *  Provide the icon for the select
-   */
-  showIcon?: boolean;
-
-  /*
-   *  Provide the icon name for the select
-   */
-  iconName?: string;
-
-  /**
-   * Provide the placehoder for the select
-   */
-  placeHolder?: string;
-
-  /**
-   * Provide the boolean value if tooltip is reuired or not
-   */
-  showToolTip?: boolean;
-
-  /**
-   * Provide the background color for the select label on the hover state
-   */
-  labelBackgroundColor?: string;
-
-  /**
-   * To close the modal in the select dropdown
-   */
-  onCancelModal?: () => void;
-
-  /**
-   * To close the modal in the select dropdown
-   */
-  onSaveModal?: () => void;
-
-  /**
-   * Pass the custom Jsx for the Modal
-   */
-  modalJSXProps?: ReactNode;
-
-  /**
-   * Pass the recurrence boolean for the exeception cases
-   */
-  recurrence?: boolean;
-}
-
-export interface DropdownPosition {
-  positionX: number;
-  positionY: number;
-  width: number;
-  fromBottom: number;
-}
-
-export interface SelectState {
-  isInputFocused: boolean;
-  iconColor: string;
-  isIconClick: boolean;
-  showOptions: boolean;
-  options: Option[];
-  option: string;
-  dropdownPosition: DropdownPosition;
-}
-
-type OptionValue = any;
-
-export interface Option {
-  [key: string]: OptionValue;
-}