@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/Select/SelectWithAvatar.js

@@ -1,356 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { SelectWithAvatar_defaultProps } from "./props/defaultProps";
-import { SelectWithAvatar_propTypes } from "./props/propTypes";
-/**** Components ****/
-
-import { SelectComponent } from "./Select";
-import Popup from "../Popup/Popup";
-import Tag from "../Tag/Tag";
-import Textbox from "../TextBox/TextBox";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import { Container, Box } from "../Layout";
-import Card, { CardContent, CardHeader } from "../Card/Card";
-import Suggestions from "../MultiSelect/Suggestions";
-import EmptyState from "../MultiSelect/EmptyState";
-import DropDownHeading from "../DropDown/DropDownHeading";
-import { getUniqueId } from "../../Provider/IdProvider";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
-/**** CSS ****/
-
-import style from "../../MultiSelect/MultiSelect.module.css";
-import selectStyle from "../../Select/Select.module.css";
-
-class SelectWithAvatarComponent extends SelectComponent {
-  constructor(props) {
-    super(props);
-    this.isSelectWithAvatarComponent = true;
-    this.handleFormatOptions = this.handleFormatOptions.bind(this);
-    this.handleActive = this.handleActive.bind(this);
-    this.handleInactive = this.handleInactive.bind(this);
-    this.handleSearchChange = this.handleSearchChange.bind(this);
-    this.handleRemoveOption = this.handleRemoveOption.bind(this);
-    this.getNextAriaId = getUniqueId(this);
-  }
-
-  handleFormatOptions(props) {
-    let {
-      options,
-      valueField,
-      textField,
-      imageField
-    } = props;
-    return this.formatOptions({
-      options,
-      valueField,
-      textField,
-      imageField,
-      optionType: 'avatar'
-    });
-  }
-
-  handleActive(e) {
-    let {
-      isActive
-    } = this.state;
-
-    if (!isActive) {
-      this.setState({
-        isActive: true
-      });
-    }
-
-    let {
-      target
-    } = e || {};
-    target && target.setSelectionRange(target, 0);
-    let {
-      onFocus
-    } = this.props;
-    onFocus && onFocus(this.state.searchStr);
-  }
-
-  handleInactive() {
-    let {
-      isActive
-    } = this.state;
-
-    if (isActive) {
-      this.setState({
-        isActive: false
-      });
-    }
-  }
-
-  handleSearchChange(e) {
-    let {
-      isPopupOpen
-    } = this.props;
-    !isPopupOpen && this.togglePopup(e);
-    this.handleSearch(e);
-  }
-
-  handleRemoveOption(e) {
-    let {
-      keyCode
-    } = e;
-    let {
-      searchStr = ''
-    } = this.state;
-    let {
-      isDefaultSelectValue
-    } = this.props;
-
-    if (keyCode === 8 && searchStr.length === 0 && !isDefaultSelectValue) {
-      this.handleChange('');
-    } else {
-      this.handleKeyDown(e);
-    }
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
-  render() {
-    let {
-      dropBoxSize,
-      emptyMessage,
-      searchEmptyMessage,
-      needBorder,
-      position,
-      defaultDropBoxPosition,
-      getContainerRef,
-      isPopupOpen,
-      removeClose,
-      isPopupReady,
-      isAbsolutePositioningNeeded,
-      positionsOffset,
-      targetOffset,
-      isRestrictScroll,
-      animationStyle,
-      textBoxSize,
-      textBoxVariant,
-      maxLength,
-      isDisabled,
-      title,
-      size,
-      isReadOnly,
-      placeHolder,
-      className,
-      needResponsive,
-      dataId,
-      borderColor,
-      searchBoxPlaceHolder,
-      searchBoxSize,
-      needSearch,
-      textBoxClass,
-      onRemove,
-      avatarPalette,
-      tagSize,
-      groupName,
-      i18nKeys,
-      htmlId,
-      needEffect,
-      isLoading,
-      dataSelectorId,
-      getTargetRef
-    } = this.props;
-    i18nKeys = Object.assign({}, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
-    });
-    let {
-      hoverIndex,
-      searchStr,
-      isFetchingOptions,
-      selectedId,
-      isActive,
-      options
-    } = this.state;
-    let suggestions = this.handleFilterSuggestions();
-    let {
-      id,
-      value: text,
-      photoURL
-    } = this.normalizedFormatOptions[selectedId] || {};
-    let setAriaId = this.getNextAriaId();
-    let ariaErrorId = this.getNextAriaId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
-      eleRef: getTargetRef,
-      onClick: !isDisabled && this.togglePopup
-    }, selectedId ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tag,
-      "data-id": `${dataId}_SelectTag`,
-      "data-test-id": `${dataId}_SelectTag`,
-      key: `${id}tag`
-    }, /*#__PURE__*/React.createElement(Tag, {
-      avatarPalette: avatarPalette,
-      hasAvatar: true,
-      id: id,
-      imageURL: photoURL,
-      initial: text,
-      onRemove: onRemove,
-      text: text,
-      disabled: isReadOnly || isDisabled,
-      size: tagSize
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.textBox,
-      dataId: `${dataId}_textBox`
-    }, /*#__PURE__*/React.createElement(Textbox, {
-      a11y: {
-        ariaActivedescendant: selectedId,
-        role: 'combobox',
-        ariaControls: setAriaId,
-        ariaOwns: setAriaId,
-        ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
-        ariaHaspopup: true,
-        ariaReadonly: true
-      },
-      isDisabled: isDisabled,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      inputRef: this.valueInputRef,
-      maxLength: maxLength,
-      needBorder: false,
-      onBlur: this.handleInactive,
-      onChange: this.handleSearchChange,
-      onFocus: this.handleActive,
-      onKeyDown: this.handleRemoveOption,
-      onKeyPress: this.handleValueInputChange,
-      placeHolder: !selectedId ? placeHolder : '',
-      size: textBoxSize,
-      variant: textBoxVariant,
-      needReadOnlyStyle: isReadOnly ? true : false,
-      isReadOnly: true,
-      isClickable: isReadOnly || isDisabled ? false : true,
-      borderColor: borderColor,
-      htmlId: htmlId,
-      autoComplete: false
-    }))), !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 || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        isPadding: false,
-        isResponsivePadding: true,
-        alignBox: "row",
-        dataId: `${dataId}_dropbox`
-      }, 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
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${selectStyle.search} ${selectStyle[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        dataId: `${dataId}_search`,
-        a11y: {
-          ariaAutocomplete: 'list',
-          ariaControls: setAriaId,
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, groupName ? /*#__PURE__*/React.createElement("div", {
-        className: style.title
-      }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        text: groupName,
-        a11y: {
-          role: 'heading'
-        }
-      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
-        dataId: `${dataId}_Options`,
-        activeId: selectedId,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        needTick: true,
-        needBorder: false,
-        selectedOptions: [selectedId],
-        className: selectStyle.listItemContainer,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))))));
-    }) : null);
-  }
-
-}
-
-SelectWithAvatarComponent.propTypes = SelectWithAvatar_propTypes;
-SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
-SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
-let SelectWithAvatar = Popup(SelectWithAvatarComponent);
-SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
-SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes; // if (__DOCS__) {
-//   SelectWithAvatar.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-//   // eslint-disable-next-line react/forbid-foreign-prop-types
-//   SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
-// }
-
-export default SelectWithAvatar;