@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/Select/GroupSelect.js

@@ -2,15 +2,15 @@
 import React, { PureComponent } from 'react';
 import { GroupSelect_defaultProps } from './props/defaultProps';
 import { GroupSelect_propTypes } from './props/propTypes';
-
 /**** Components ****/
+
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import Textbox from '../TextBox/TextBox';
 import Card, { CardHeader, CardContent, CardFooter } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { Container, Box } from '../Layout';
@@ -18,13 +18,14 @@ import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './Select.module.css';
-
 /**** Methods ****/
+
 import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
 import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd } from '../utils/Common';
-
 /* eslint-disable react/no-unused-prop-types */
+
 /* eslint-disable react/sort-prop-types */
+
 /* eslint-disable react/forbid-component-props */
 
 export class GroupSelectComponent extends PureComponent {
@@ -84,9 +85,11 @@ export class GroupSelectComponent extends PureComponent {
     };
     this._isMounted = false;
   }
+
   componentDidMount() {
     this._isMounted = true;
   }
+
   componentDidUpdate(prevProps) {
     let {
       groupedOptions,
@@ -106,6 +109,7 @@ export class GroupSelectComponent extends PureComponent {
     } = this;
     let newOptionIds = allOptionIds;
     let newSelectedId = selectedId;
+
     if (groupedOptions !== prevProps.groupedOptions) {
       let {
         revampedGroups,
@@ -121,6 +125,7 @@ export class GroupSelectComponent extends PureComponent {
         allOptionIds
       });
     }
+
     if (selectedOption !== prevProps.selectedOption) {
       let {
         selectedId,
@@ -132,12 +137,14 @@ export class GroupSelectComponent extends PureComponent {
         hoverIndex
       });
     }
+
     let {
       suggestionOptionIds
     } = this.handleFilterSuggestions();
     let hoverId = getIsEmptyValue(suggestionOptionIds[hoverIndex]) ? '' : suggestionOptionIds[hoverIndex];
     let selSuggestion = this[`suggestion_${hoverId}`];
     isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+
     if (isPopupOpen !== prevProps.isPopupOpen) {
       if (isPopupOpen) {
         setTimeout(() => {
@@ -156,9 +163,11 @@ export class GroupSelectComponent extends PureComponent {
       }
     }
   }
+
   componentWillUnmount() {
     this._isMounted = false;
   }
+
   handleGetGroupSelectOptions(props) {
     let {
       groupedOptions
@@ -167,6 +176,7 @@ export class GroupSelectComponent extends PureComponent {
       groupedOptions
     });
   }
+
   handleGetSelectedId(props, allOptionIds) {
     let {
       selectedOption,
@@ -178,19 +188,23 @@ export class GroupSelectComponent extends PureComponent {
     } = selectedOption;
     let selectedId = optionIdGrouping(selected, groupId);
     let selectedIdIndex = allOptionIds.indexOf(selectedId);
+
     if (selectedIdIndex === -1) {
       selectedIdIndex = 0;
+
       if (isDefaultSelectValue) {
         [selectedId] = allOptionIds;
       } else {
         selectedId = '';
       }
     }
+
     return {
       selectedId,
       hoverIndex: selectedIdIndex
     };
   }
+
   handleFilterSuggestions() {
     let {
       needSearch,
@@ -201,6 +215,7 @@ export class GroupSelectComponent extends PureComponent {
       searchStr = '',
       allOptionIds
     } = this.state;
+
     if (needSearch && searchStr && searchStr.trim().length) {
       searchStr = getSearchString(searchStr);
       let {
@@ -216,11 +231,13 @@ export class GroupSelectComponent extends PureComponent {
         suggestionOptionIds
       };
     }
+
     return {
       suggestionGroups: revampedGroups,
       suggestionOptionIds: allOptionIds
     };
   }
+
   handleSearchOptions() {
     let {
       onSearch
@@ -230,6 +247,7 @@ export class GroupSelectComponent extends PureComponent {
     } = this.state;
     searchStr && this.handleFetchOptions(onSearch, searchStr);
   }
+
   handleSearch(value) {
     // let { value = '' } = e.target;
     let {
@@ -252,6 +270,7 @@ export class GroupSelectComponent extends PureComponent {
       }
     });
   }
+
   handleKeyDown(e) {
     let {
       isPopupOpen,
@@ -267,33 +286,38 @@ export class GroupSelectComponent extends PureComponent {
     let {
       keyCode
     } = e;
+
     if (!isPopupOpen && !isPopupOpenOnEnter) {
       onKeyDown && onKeyDown(e);
     }
+
     if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     } else if (!isPopupOpen && keyCode === 40) {
       e.preventDefault(); //prevent body scroll
+
       this.togglePopup(e);
     }
+
     if (keyCode === 38 && isPopupOpen && suggestionOptionIds.length) {
-      if (hoverIndex === 0) {
-        // hoverIndex = options.length - 1;
+      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
       } else {
         hoverIndex -= 1;
       }
+
       this.setState({
         hoverIndex
       });
     } else if (keyCode === 40 && isPopupOpen && suggestionOptionIds.length) {
-      if (hoverIndex === suggestionOptionIds.length - 1) {
-        // hoverIndex = 0;
+      if (hoverIndex === suggestionOptionIds.length - 1) {// hoverIndex = 0;
       } else {
         if (hoverIndex === suggestionOptionIds.length - 3) {
           this.handleGetNextOptions();
         }
+
         hoverIndex += 1;
       }
+
       this.setState({
         hoverIndex
       });
@@ -304,8 +328,7 @@ export class GroupSelectComponent extends PureComponent {
     } else if (keyCode === 27) {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
-      });
-      // this.handlePopupClose(e);
+      }); // this.handlePopupClose(e);
     }
   }
 
@@ -321,6 +344,7 @@ export class GroupSelectComponent extends PureComponent {
       hoverIndex: newHoverIndex
     });
   }
+
   handleChange(id, value, index, e) {
     e && e.preventDefault && e.preventDefault();
     let {
@@ -334,13 +358,13 @@ export class GroupSelectComponent extends PureComponent {
       id: selected,
       groupId
     } = extractOptionId(id);
+
     if (!getIsEmptyValue(id) && !isReadOnly) {
       onChange && onChange({
         groupId,
         selected
       }, normalizedAllOptions[id]);
-      this.handlePopupClose();
-      // this.valueInput && this.valueInput.focus({preventScroll:true});
+      this.handlePopupClose(); // this.valueInput && this.valueInput.focus({preventScroll:true});
     }
   }
 
@@ -352,6 +376,7 @@ export class GroupSelectComponent extends PureComponent {
     } = this.props;
     !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
   }
+
   handlePopupClose(e) {
     let {
       closePopupOnly,
@@ -362,15 +387,19 @@ export class GroupSelectComponent extends PureComponent {
     });
     isPopupOpen && closePopupOnly(e);
   }
+
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
   }
+
   suggestionItemRef(el, index, id) {
     this[`suggestion_${id}`] = el;
   }
+
   searchInputRef(el) {
     this.searchInput = el;
   }
+
   valueInputRef(el) {
     let {
       getRef
@@ -378,12 +407,14 @@ export class GroupSelectComponent extends PureComponent {
     this.valueInput = el;
     getRef && getRef(el);
   }
+
   handleSelectFocus(e) {
     let {
       target
     } = e || {};
     target && target.setSelectionRange(target, 0);
   }
+
   handleClearSearch() {
     this.handleSearch('');
     setTimeout(() => {
@@ -392,6 +423,7 @@ export class GroupSelectComponent extends PureComponent {
       });
     }, 1);
   }
+
   handleValueInputChange(e) {
     let {
       which
@@ -401,22 +433,26 @@ export class GroupSelectComponent extends PureComponent {
       isPopupOpen,
       autoSelectOnType
     } = this.props;
+
     if (!isPopupOpen && autoSelectOnType) {
       this.valueInputTypeString += (typeString || '').trim();
       this.handleChangeOnType();
     }
   }
+
   handleChangeOnType() {
     let {
       revampedGroups
     } = this.state;
     let typeString = this.valueInputTypeString;
     this.valueInputTypeString = '';
+
     let changeValue = () => {
       let id = this.autoSelectSuggestions[this.autoSelectIndex];
       let {
         suggestionOptionIds
       } = this.handleFilterSuggestions();
+
       if (!getIsEmptyValue(id)) {
         this.handleChange(id);
         let hoverIndex = suggestionOptionIds.indexOf(id);
@@ -425,12 +461,14 @@ export class GroupSelectComponent extends PureComponent {
         });
       }
     };
+
     if (typeString && typeString === this.valueInputSearchString) {
       if (this.autoSelectIndex < this.autoSelectSuggestions.length - 1) {
         this.autoSelectIndex += 1;
       } else {
         this.autoSelectIndex = 0;
       }
+
       changeValue();
     } else if (typeString) {
       this.valueInputSearchString = typeString;
@@ -447,11 +485,13 @@ export class GroupSelectComponent extends PureComponent {
       changeValue();
     }
   }
+
   handleScroll(e) {
     let ele = e.target;
     let isScrollReachedBottom = findScrollEnd(ele);
     isScrollReachedBottom && this.handleGetNextOptions();
   }
+
   handleFetchOptions(APICall) {
     let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
@@ -461,10 +501,12 @@ export class GroupSelectComponent extends PureComponent {
     let {
       _isMounted
     } = this;
+
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
+
       try {
         return APICall(searchStr).then(() => {
           _isMounted && this.setState({
@@ -482,6 +524,7 @@ export class GroupSelectComponent extends PureComponent {
       }
     }
   }
+
   handleGetNextOptions() {
     let {
       isNextOptions,
@@ -492,6 +535,7 @@ export class GroupSelectComponent extends PureComponent {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -502,6 +546,7 @@ export class GroupSelectComponent extends PureComponent {
       }])
     };
   }
+
   render() {
     let {
       isDisabled,
@@ -541,7 +586,8 @@ export class GroupSelectComponent extends PureComponent {
       i18nKeys,
       htmlId,
       iconOnHover,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -569,7 +615,9 @@ export class GroupSelectComponent extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
-      "data-title": isDisabled ? title : null
+      "data-test-id": dataIdSlctComp,
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
@@ -735,18 +783,18 @@ export class GroupSelectComponent extends PureComponent {
       }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
     }) : null);
   }
+
 }
 GroupSelectComponent.propTypes = GroupSelect_propTypes;
 GroupSelectComponent.defaultProps = GroupSelect_defaultProps;
 GroupSelectComponent.displayName = 'GroupSelect';
 let GroupSelect = Popup(GroupSelectComponent);
 GroupSelect.defaultProps = GroupSelectComponent.defaultProps;
-export default GroupSelect;
-if (false) {
-  GroupSelect.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  GroupSelect.propTypes = GroupSelectComponent.propTypes;
-}
+export default GroupSelect; // if (__DOCS__) {
+//   GroupSelect.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   GroupSelect.propTypes = GroupSelectComponent.propTypes;
+// }