@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Select/SelectWithAvatar.js

@@ -0,0 +1,344 @@
+/**** Libraries ****/
+import React from 'react';
+import { SelectWithAvatar_defaultProps } from '../../Select/props/defaultProps';
+import { SelectWithAvatar_propTypes } from '../../Select/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,
+      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
+    } = 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: this.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
+    }, /*#__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,
+        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
+      }, 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, {
+        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;