@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-236

package/es/v1/Select/SelectWithIcon.js

@@ -1,545 +0,0 @@
-import React, { Component } from 'react';
-import { SelectWithIcon_defaultProps } from "./props/defaultProps";
-import { SelectWithIcon_propTypes } from "./props/propTypes";
-/**** Components ****/
-
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import { Icon } from '@zohodesk/icons';
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
-import Card, { CardHeader, CardContent } from "../Card/Card";
-import EmptyState from "../MultiSelect/EmptyState";
-import { Container, Box } from "../Layout";
-import { getUniqueId } from "../../Provider/IdProvider";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
-/**** Methods ****/
-
-import { scrollTo, findScrollEnd } from "../../utils/Common.js";
-/**** CSS ****/
-
-import style from "../../Select/Select.module.css";
-
-class SelectWithIcon extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: '',
-      selectedIndex: 0,
-      options: props.options,
-      isFetchingOptions: false
-    };
-    this._isMounted = false;
-    this.onSearchClear = this.onSearchClear.bind(this);
-    this.onSearch = this.onSearch.bind(this);
-    this.togglePopup = this.togglePopup.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.scrollContentRef = this.scrollContentRef.bind(this);
-    this.itemRef = this.itemRef.bind(this);
-    this.searchInputRef = this.searchInputRef.bind(this);
-    this.inputRef = this.inputRef.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.getNextAriaId = getUniqueId(this);
-    this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
-    this.handleFetchOptions = this.handleFetchOptions.bind(this);
-  }
-
-  componentDidMount() {
-    this._isMounted = true;
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-
-  inputRef(el) {
-    this.input = el;
-  }
-
-  itemRef(ele, index, id) {
-    this[`suggestion_${id}`] = ele;
-  }
-
-  searchInputRef(el) {
-    this.searchInput = el;
-  }
-
-  scrollContentRef(el) {
-    let {
-      isPopupOpen
-    } = this.props;
-
-    if (isPopupOpen) {
-      this.optionsContainer = el;
-    }
-  }
-
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
-
-  handleKeyDown(e) {
-    let {
-      keyCode
-    } = e;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-    let {
-      idKey,
-      valueKey,
-      isPopupOpen,
-      selectedId
-    } = this.props;
-
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    } else if (!isPopupOpen && (keyCode === 40 || keyCode === 13)) {
-      e.preventDefault(); //prevent body scroll
-
-      this.togglePopup(e);
-      options.map((list, index) => {
-        if (list.id === selectedId) {
-          this.setState({
-            selectedIndex: index
-          });
-        }
-      });
-    }
-
-    if (isPopupOpen) {
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === options.length - 1) {
-            this.setState({
-              selectedIndex: 0
-            });
-          } else {
-            if (selectedIndex === options.length - 3) {
-              this.handleGetNextOptions();
-            }
-
-            this.setState({
-              selectedIndex: selectedIndex + 1
-            });
-          }
-
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: options.length - 1
-            });
-          } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
-          }
-
-          break;
-
-        case 13:
-          {
-            let option = options[selectedIndex];
-            this.handleChange && this.handleChange(option[idKey], option[valueKey], selectedIndex, e);
-            break;
-          }
-      }
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    let {
-      idKey,
-      isPopupOpen,
-      needSearch
-    } = this.props;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-
-    if (prevProps.isPopupOpen != isPopupOpen) {
-      setTimeout(() => {
-        isPopupOpen ? needSearch ? this.searchInput.focus({
-          preventScroll: true
-        }) : this.input.focus({
-          preventScroll: true
-        }) : this.input.focus({
-          preventScroll: true
-        });
-      }, 10);
-    }
-
-    let option = options[selectedIndex];
-    let id = option && option[idKey] || {};
-    let selSuggestion = this[`suggestion_${id}`];
-
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
-  }
-
-  searchList(searchValue) {
-    let datas = [];
-    let {
-      options,
-      valueKey
-    } = this.props;
-
-    if (options.length) {
-      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
-    }
-
-    return datas;
-  }
-
-  onSearchClear() {
-    let options = this.searchList(''); // this.searchInput.focus({preventScroll:false});
-
-    this.setState({
-      searchValue: '',
-      options
-    });
-  }
-
-  onSearch(searchValue) {
-    let options = this.searchList(searchValue);
-    this.setState({
-      searchValue,
-      selectedIndex: -1,
-      options
-    });
-  }
-
-  togglePopup(e) {
-    let {
-      togglePopup,
-      isReadOnly,
-      boxPosition
-    } = this.props;
-    !isReadOnly && togglePopup(e, boxPosition);
-  }
-
-  handleChange(id, value, index, e) {
-    let {
-      onChange,
-      isReadOnly
-    } = this.props;
-    !isReadOnly && onChange && onChange(id, value, index, e);
-    this.togglePopup(e);
-  }
-
-  handleScroll(e) {
-    let ele = e.target;
-    let isScrollReachedBottom = findScrollEnd(ele);
-    isScrollReachedBottom && this.handleGetNextOptions();
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.options.length != this.props.options.length) {
-      this.setState({
-        options: nextProps.options
-      });
-    }
-  }
-
-  handleGetNextOptions() {
-    let {
-      isNextOptions,
-      getNextOptions
-    } = this.props;
-    let {
-      searchValue
-    } = this.state;
-    isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
-  }
-
-  handleFetchOptions(APICall) {
-    let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    let {
-      isFetchingOptions = false
-    } = this.state;
-    let {
-      _isMounted
-    } = this;
-
-    if (!isFetchingOptions && APICall) {
-      this.setState({
-        isFetchingOptions: true
-      });
-
-      try {
-        return APICall(searchValue).then(() => {
-          _isMounted && this.setState({
-            isFetchingOptions: false
-          });
-        }, () => {
-          _isMounted && this.setState({
-            isFetchingOptions: false
-          });
-        });
-      } catch (e) {
-        _isMounted && this.setState({
-          isFetchingOptions: false
-        });
-      }
-    }
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
-  render() {
-    let {
-      animationStyle,
-      removeClose,
-      selectedValue,
-      searchBoxPlaceHolder,
-      needSearch,
-      searchEmptyMessage,
-      dataId,
-      maxLength,
-      isDisabled,
-      isReadOnly,
-      placeHolder,
-      textBoxSize,
-      textBoxVariant,
-      selectedId,
-      isPopupOpen,
-      isPopupReady,
-      position,
-      getContainerRef,
-      isAbsolutePositioningNeeded,
-      positionsOffset,
-      targetOffset,
-      isRestrictScroll,
-      valueKey,
-      idKey,
-      needListBorder,
-      needTick,
-      size,
-      borderColor,
-      title,
-      className,
-      needBorder,
-      searchBoxSize,
-      getTargetRef,
-      needResponsive,
-      boxSize,
-      dropBoxSize,
-      emptyMessage,
-      needIcon,
-      iconName,
-      iconSize,
-      iconClass,
-      i18nKeys,
-      htmlId,
-      isLoading,
-      dataSelectorId
-    } = this.props;
-    i18nKeys = Object.assign({}, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
-    });
-    let {
-      searchValue,
-      selectedIndex,
-      options,
-      isFetchingOptions
-    } = this.state;
-    let setAriaId = this.getNextAriaId();
-    let ariaErrorId = this.getNextAriaId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
-      onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-      ref: getTargetRef,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row"
-    }, needIcon ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: `${style.leftIcon} ${isDisabled ? style.disable : ''}`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      size: iconSize,
-      iconClass: iconClass,
-      dataId: `${dataId}_icon`
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      a11y: {
-        role: 'combobox',
-        ariaLabel: 'click to select options',
-        ariaControls: setAriaId,
-        ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
-        ariaHaspopup: true,
-        ariaReadonly: true,
-        ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
-      },
-      htmlId: htmlId,
-      value: selectedValue,
-      isReadOnly: true,
-      needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: `${dataId}_textBox`,
-      maxLength: maxLength,
-      needBorder: needBorder,
-      isDisabled: isDisabled,
-      placeHolder: placeHolder,
-      size: textBoxSize,
-      variant: textBoxVariant,
-      iconRotated: isPopupOpen,
-      inputRef: this.inputRef,
-      onKeyDown: this.handleKeyDown,
-      isClickable: isReadOnly || isDisabled ? false : true,
-      customClass: {
-        customTBoxWrap: `${isReadOnly || isDisabled ? '' : style.input} ${needIcon ? style.iconSelect : ''}`
-      },
-      needEffect: isReadOnly || isDisabled ? false : true,
-      borderColor: borderColor,
-      autoComplete: false,
-      isFocus: isPopupReady
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      dataId: `${dataId}_downIcon`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-down",
-      size: "7"
-    })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        getRef: getContainerRef,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        dataId: `${dataId}_suggestions`,
-        size: boxSize,
-        isPadding: false,
-        isResponsivePadding: true,
-        alignBox: "row"
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        onScroll: this.handleScroll,
-        htmlId: setAriaId,
-        a11y: {
-          role: 'listbox'
-        }
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${style.search} ${style[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        onClear: this.onSearchClear,
-        onChange: this.onSearch,
-        placeHolder: searchBoxPlaceHolder,
-        value: searchValue,
-        maxLength: maxLength,
-        onKeyDown: this.handleKeyDown,
-        inputRef: this.searchInputRef,
-        size: searchBoxSize,
-        dataId: `${dataId}_search`,
-        a11y: {
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
-        shrink: true,
-        eleRef: this.scrollContentRef,
-        dataId: `${dataId}_Options`
-      }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
-        let {
-          iconName,
-          iconSize,
-          iconColor
-        } = options;
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, {
-          key: options[idKey],
-          value: options[valueKey],
-          size: "medium",
-          onClick: this.handleChange,
-          id: options[idKey],
-          index: i,
-          title: options[valueKey],
-          palette: "default",
-          dataId: options[idKey],
-          iconName: iconName,
-          iconSize: iconSize,
-          iconClass: iconColor,
-          active: selectedId === options[idKey],
-          needBorder: needListBorder,
-          needTick: needTick,
-          onMouseEnter: this.handleMouseEnter,
-          highlight: selectedIndex === i,
-          getRef: this.itemRef,
-          a11y: {
-            role: 'option',
-            ariaSelected: selectedId === options[idKey],
-            ariaLabel: options[valueKey]
-          }
-        });
-      })) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchValue,
-        suggestions: options,
-        dataId: dataId,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))))));
-    }) : null);
-  }
-
-}
-
-SelectWithIcon.propTypes = SelectWithIcon_propTypes;
-SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
-const SelectWithIconComponent = Popup(SelectWithIcon);
-SelectWithIconComponent.defaultProps = SelectWithIcon.defaultProps;
-SelectWithIconComponent.propTypes = SelectWithIcon.propTypes; // if (__DOCS__) {
-//   SelectWithIcon.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
-
-export default SelectWithIconComponent;

package/es/v1/Select/index.js

@@ -1,4 +0,0 @@
-export { default as Select } from "./Select";
-export { default as GroupSelect } from "./GroupSelect";
-export { default as SelectWithAvatar } from "./SelectWithAvatar";
-export { default as SelectWithIcon } from "./SelectWithIcon";

package/es/v1/Select/props/defaultProps.js

@@ -1,126 +0,0 @@
-import { getLibraryConfig } from "../../../Provider/Config";
-export const Select_defaultProps = {
-  animationStyle: 'bounce',
-  autoComplete: getLibraryConfig('autoComplete'),
-  autoSelectOnType: true,
-  dataId: 'selectComponent',
-  dataSelectorId: 'select',
-  dropBoxSize: 'small',
-  isDefaultSelectValue: true,
-  isDisabled: false,
-  isPopupOpenOnEnter: false,
-  isReadOnly: false,
-  needBorder: true,
-  needLocalSearch: true,
-  needSearch: false,
-  needSelectDownIcon: true,
-  placeHolder: '',
-  searchBoxPlaceHolder: 'Search',
-  searchBoxSize: 'small',
-  size: 'medium',
-  textBoxSize: 'medium',
-  textBoxVariant: 'default',
-  textField: 'text',
-  valueField: 'id',
-  borderColor: 'default',
-  needTick: true,
-  boxSize: 'default',
-  needListBorder: false,
-  needCloseOnSelect: true,
-  isParentBased: true,
-  isSearchClearOnClose: true,
-  i18nKeys: {},
-  iconOnHover: false,
-  customProps: {},
-  isLoading: false,
-  isAbsolutePositioningNeeded: true
-};
-export const GroupSelect_defaultProps = {
-  animationStyle: 'bounce',
-  defaultDropBoxPosition: 'bottom',
-  dropBoxSize: 'small',
-  dataSelectorId: 'groupSelect',
-  isDefaultSelectValue: true,
-  isDisabled: false,
-  isReadOnly: false,
-  needBorder: true,
-  needSearch: false,
-  needSelectDownIcon: true,
-  placeHolder: '',
-  searchBoxPlaceHolder: 'Search',
-  searchBoxSize: 'small',
-  size: 'medium',
-  textBoxSize: 'medium',
-  textBoxVariant: 'default',
-  textField: 'text',
-  valueField: 'id',
-  autoSelectOnType: true,
-  dataIdSlctComp: 'selectComponent',
-  dataIdDownIcon: 'downIcon',
-  dataIdLoading: 'loading',
-  dataIdSrchEmptyMsg: 'searchEmptyMessage',
-  dataId: 'GroupSelect',
-  isPopupOpenOnEnter: false,
-  borderColor: 'default',
-  needTick: true,
-  needLocalSearch: true,
-  isSearchClearOnClose: true,
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  i18nKeys: {},
-  iconOnHover: false,
-  isLoading: false
-};
-export const SelectWithAvatar_defaultProps = {
-  animationStyle: 'bounce',
-  defaultDropBoxPosition: 'bottom',
-  dropBoxSize: 'small',
-  isDefaultSelectValue: false,
-  isDisabled: false,
-  isReadOnly: false,
-  needBorder: true,
-  needLocalSearch: true,
-  needSearch: true,
-  placeHolder: '',
-  size: 'medium',
-  textBoxSize: 'medium',
-  textBoxVariant: 'default',
-  textField: 'text',
-  valueField: 'id',
-  dataId: 'selectWithAvatar',
-  dataSelectorId: 'selectWithAvatar',
-  borderColor: 'default',
-  isSearchClearOnClose: true,
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  i18nKeys: {},
-  needEffect: true,
-  isLoading: false
-};
-export const SelectWithIcon_defaultProps = {
-  isReadOnly: false,
-  isDisabled: false,
-  animationStyle: 'bounce',
-  valueKey: 'value',
-  idKey: 'id',
-  needListBorder: false,
-  needSearch: false,
-  boxSize: 'default',
-  needListBorder: false,
-  needCloseOnSelect: true,
-  borderColor: 'default',
-  needTick: true,
-  searchBoxSize: 'small',
-  size: 'medium',
-  textBoxSize: 'medium',
-  textBoxVariant: 'default',
-  dataId: 'selectWithIcon',
-  dataSelectorId: 'selectWithIcon',
-  dropBoxSize: 'small',
-  needIcon: true,
-  iconSize: '14',
-  i18nKeys: {},
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  isLoading: false
-};