@zohodesk/components 1.2.21 → 1.2.23

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { AdvancedGroupMultiSelect_propTypes } from './props/propTypes';
 import { AdvancedGroupMultiSelect_defaultProps } from './props/defaultProps';
 /**** Components ****/
-
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
@@ -16,20 +15,19 @@ import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-/**** Icons ****/
 
+/**** Icons ****/
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
-
 import style from '../../MultiSelect/MultiSelect.module.css';
-/**** Methods ****/
 
+/**** Methods ****/
 import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../../utils/Common.js';
 import { makeGetMultiSelectSelectedOptions, makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, makeGetOptionIdChange, extractOptionId, makeFormatOptions, makeObjectConcat } from '../../utils/dropDownUtils';
+
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
-
 class AdvancedGroupMultiSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -108,7 +106,6 @@ class AdvancedGroupMultiSelect extends React.Component {
     };
     this._isMounted = false;
   }
-
   handleGetSelectedOptions(selectedOptionDetails) {
     let {
       normalizedFormatOptions: normalizedSelectedOptions
@@ -117,7 +114,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       normalizedSelectedOptions
     };
   }
-
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     let {
       valueField,
@@ -129,7 +125,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       textField
     });
   }
-
   handleSelectedOptionDetailsIdChange(props, state) {
     let {
       groupIds,
@@ -156,15 +151,12 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
     return newSelectedOptionDetails;
   }
-
   selectedOptionRef(el, id) {
     this[`selectedOption_${id}`] = el;
   }
-
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
   }
-
   selectedOptionContainerRef(el) {
     let {
       getTargetRef
@@ -172,15 +164,12 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.selectedOptionContainer = el;
     getTargetRef(el);
   }
-
   suggestionItemRef(el, index, id) {
     this[`suggestion_${id}`] = el;
   }
-
   searchInputRef(ref) {
     this.searchInput = ref;
   }
-
   handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
     let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
     let selectedOptionsLength = newSelectedOptions.length;
@@ -194,7 +183,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       selectedOptionsLength
     });
   }
-
   togglePopup(e) {
     let {
       togglePopup,
@@ -203,7 +191,6 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.props;
     !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
   }
-
   handleFilterSuggestions() {
     let {
       revampedGroups,
@@ -213,7 +200,6 @@ class AdvancedGroupMultiSelect extends React.Component {
     let {
       needLocalSearch
     } = this.props;
-
     if (searchStr && searchStr.trim().length) {
       searchStr = getSearchString(searchStr);
       let {
@@ -229,13 +215,11 @@ class AdvancedGroupMultiSelect extends React.Component {
         suggestionOptionIds
       };
     }
-
     return {
       suggestionGroups: revampedGroups,
       suggestionOptionIds: allOptionIds
     };
   }
-
   handleGetGroupSelectOptions(props) {
     let {
       groupedOptions = []
@@ -244,7 +228,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       groupedOptions
     });
   }
-
   handleInputCick(e) {
     let {
       highLightedSelectOptions
@@ -255,7 +238,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       lastHighLightedSelectOption: ''
     }) : this.togglePopup(e);
   }
-
   handleClickSelectedOption() {
     let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let e = arguments.length > 1 ? arguments[1] : undefined;
@@ -271,16 +253,13 @@ class AdvancedGroupMultiSelect extends React.Component {
       ctrlKey,
       shiftKey
     } = e;
-
     if (e && shiftKey) {
       //shift+click
       let from = selectedOptionIds.indexOf(lastHighLightedSelectOption) >= 0 ? selectedOptionIds.indexOf(lastHighLightedSelectOption) : 0;
       let to = id && selectedOptionIds.indexOf(id) >= 0 ? selectedOptionIds.indexOf(id) : null;
-
       if (to >= 0 && to < from) {
         [to] = [from, from = to];
       }
-
       to += 1;
       let newSelectedHighlights = to ? selectedOptionIds.slice(from, to) : [];
       to && this.setState({
@@ -291,7 +270,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       //ctrl+click
       let isRemove = highLightedSelectOptions.indexOf(id) >= 0;
       let newSelectedHighlights = [];
-
       if (isRemove) {
         lastHighLightedSelectOption = id === lastHighLightedSelectOption ? '' : lastHighLightedSelectOption;
         newSelectedHighlights = highLightedSelectOptions.filter(option => option !== id);
@@ -299,7 +277,6 @@ class AdvancedGroupMultiSelect extends React.Component {
         lastHighLightedSelectOption = id;
         newSelectedHighlights = [...highLightedSelectOptions, id];
       }
-
       this.setState({
         highLightedSelectOptions: newSelectedHighlights,
         lastHighLightedSelectOption
@@ -310,7 +287,6 @@ class AdvancedGroupMultiSelect extends React.Component {
         lastHighLightedSelectOption: id
       });
     }
-
     this.setState({
       shiftKeyPressHighLighted: 0
     });
@@ -318,7 +294,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       preventScroll: true
     });
   }
-
   handleRemoveOption(options) {
     let newOptions = !getIsEmptyValue(options) && !Array.isArray(options) ? [options] : options;
     let {
@@ -332,22 +307,18 @@ class AdvancedGroupMultiSelect extends React.Component {
       lastHighLightedSelectOption,
       shiftKeyPressHighLighted
     } = this.state;
-
     if (newOptions.length && !isReadOnly) {
       let newSelectedOptions = selectedOptionIds.filter(option => newOptions.indexOf(option) === -1);
       let newHighLightedSelectOptions = highLightedSelectOptions.filter(option => newSelectedOptions.indexOf(option) >= 0);
       let isHighlightedRemoved = false;
       let newOptionsLen = newOptions.length;
-
       for (let i = 0; i < newOptionsLen; i++) {
         let removedOption = newOptions[i];
-
         if (highLightedSelectOptions.indexOf(removedOption) >= 0) {
           isHighlightedRemoved = true;
           break;
         }
       }
-
       this.setState({
         lastHighLightedSelectOption: newSelectedOptions.indexOf(lastHighLightedSelectOption) >= 0 && !isHighlightedRemoved ? lastHighLightedSelectOption : '',
         highLightedSelectOptions: isHighlightedRemoved ? [] : newHighLightedSelectOptions,
@@ -355,12 +326,10 @@ class AdvancedGroupMultiSelect extends React.Component {
       });
       this.handleChange(newSelectedOptions);
     }
-
     this.searchInput && this.searchInput.focus({
       preventScroll: true
     });
   }
-
   handleKeyDown(e) {
     let {
       keyCode,
@@ -385,30 +354,23 @@ class AdvancedGroupMultiSelect extends React.Component {
       onKeyDown
     } = this.props;
     let highLightedSelectOptionsLen = highLightedSelectOptions.length;
-
     if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
       let {
         suggestionOptionIds
       } = this.handleFilterSuggestions();
       suggestions = suggestionOptionIds;
     }
-
     if (!isPopupOpen && !isPopupOpenOnEnter) {
       onKeyDown && onKeyDown(e);
     }
-
     if (!isPopupOpen && keyCode === 40) {
       //down arrow press popup open
       e.preventDefault(); //prevent body scroll
-
       this.togglePopup(e);
     }
-
     let suggestionsLen = suggestions.length;
-
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
-
       /*if (hoverOption === 0) { //disable first to last option higlight
         !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
@@ -419,7 +381,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       }
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
-
       /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
         //disable last to first option higlight
         !isNextOptions && this.setState({ hoverOption: 0 });
@@ -444,7 +405,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       if (highLightedSelectOptionsLen) {
         this.handleRemoveOption(highLightedSelectOptions);
       } else {
-        this.handleRemoveOption(selectedOptions.slice(-1)); // this.setState({
+        this.handleRemoveOption(selectedOptions.slice(-1));
+        // this.setState({
         //   highLightedSelectOptions: selectedOptions.slice(-1)
         // });
       }
@@ -459,7 +421,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       let lastHighLightedSelectOptionIndex = lastHighLightedSelectOption && selectedOptions.indexOf(lastHighLightedSelectOption) >= 0 ? selectedOptions.indexOf(lastHighLightedSelectOption) : 0;
       let newShiftKeyPressHighLighted = shiftKeyPressHighLighted ? shiftKeyPressHighLighted : shiftKeyPressHighLighted + 1;
       let newHighLightedSelectOption = lastHighLightedSelectOptionIndex !== null ? selectedOptions[lastHighLightedSelectOptionIndex + newShiftKeyPressHighLighted] : selectedOptions[0];
-
       if (!getIsEmptyValue(newHighLightedSelectOption)) {
         let newLastHighLightedSelectOption = lastHighLightedSelectOption ? lastHighLightedSelectOption : selectedOptions[0];
         highLightedSelectOptions = !shiftKeyPressHighLighted ? [newLastHighLightedSelectOption] : highLightedSelectOptions;
@@ -476,7 +437,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       let lastHighLightedSelectOptionIndex = lastHighLightedSelectOption ? selectedOptions.indexOf(lastHighLightedSelectOption) : selectedOptions.length - 1;
       let newShiftKeyPressHighLighted = shiftKeyPressHighLighted !== 1 ? shiftKeyPressHighLighted : shiftKeyPressHighLighted - 1;
       let newHighLightedSelectOption = selectedOptions[lastHighLightedSelectOptionIndex + newShiftKeyPressHighLighted - 1];
-
       if (!getIsEmptyValue(newHighLightedSelectOption)) {
         let newLastHighLightedSelectOption = lastHighLightedSelectOption ? lastHighLightedSelectOption : selectedOptions.slice(-1)[0];
         highLightedSelectOptions = !shiftKeyPressHighLighted ? [newLastHighLightedSelectOption] : highLightedSelectOptions;
@@ -489,15 +449,14 @@ class AdvancedGroupMultiSelect extends React.Component {
         });
       }
     } else if ((keyCode === 39 || keyCode === 37) && selectedOptions.length && !searchStr.length) {
-      let isRightArrow = keyCode === 39 ? true : false; // let isLefttArrow = keyCode === 37 ? true : false;
-
+      let isRightArrow = keyCode === 39 ? true : false;
+      // let isLefttArrow = keyCode === 37 ? true : false;
       if (highLightedSelectOptions.length) {
         let [lastHighLightedSelectOption] = highLightedSelectOptions.slice(-1);
         let lastHighLightedSelectOptionIndex = selectedOptions.indexOf(lastHighLightedSelectOption);
         let newLastHighLightedSelectOptionIndex = isRightArrow ? lastHighLightedSelectOptionIndex === selectedOptions.length - 1 ? lastHighLightedSelectOptionIndex : lastHighLightedSelectOptionIndex + 1 : lastHighLightedSelectOptionIndex - 1;
         let newLastHighLightedSelectOption = selectedOptions[newLastHighLightedSelectOptionIndex];
         let isEmptyHighlighted = isRightArrow && highLightedSelectOptions.length === 1 && selectedOptions.slice(-1)[0] === lastHighLightedSelectOption ? true : false;
-
         if (!getIsEmptyValue(newLastHighLightedSelectOption)) {
           this.setState({
             lastHighLightedSelectOption: isEmptyHighlighted ? '' : newLastHighLightedSelectOption,
@@ -513,11 +472,12 @@ class AdvancedGroupMultiSelect extends React.Component {
           shiftKeyPressHighLighted: 0
         });
       }
-    } // eslint-disable-next-line
-    else if (keyCode === 27) {// this.handlePopupClose(e);
+    }
+    // eslint-disable-next-line
+    else if (keyCode === 27) {
+      // this.handlePopupClose(e);
     }
   }
-
   handleMouseEnter(id, val, hoverOptionIndex, e) {
     e && e.preventDefault();
     let {
@@ -529,12 +489,10 @@ class AdvancedGroupMultiSelect extends React.Component {
       hoverIndex: newHoverIndex
     });
   }
-
   handleFetchOptions() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -542,12 +500,10 @@ class AdvancedGroupMultiSelect extends React.Component {
     let {
       _isMounted
     } = this;
-
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
-
       try {
         return APICall(searchStr).then(() => {
           _isMounted && this.setState({
@@ -565,7 +521,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       }
     }
   }
-
   handleSearchOptions() {
     let {
       onSearch
@@ -575,7 +530,6 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.state;
     searchStr && this.handleFetchOptions(onSearch, searchStr);
   }
-
   handleSearch(value, e) {
     let {
       onSearch,
@@ -598,17 +552,14 @@ class AdvancedGroupMultiSelect extends React.Component {
       }
     });
   }
-
   handleScroll(e) {
     let {
       isNextOptions
     } = this.props;
-
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1 && isNextOptions) {
       this.handleScrollFuncCall();
     }
   }
-
   handleScrollFuncCall() {
     let {
       getNextOptions
@@ -618,7 +569,6 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.state;
     getNextOptions && getNextOptions(searchStr);
   }
-
   handleSelectAll(e) {
     e && e.preventDefault();
     let {
@@ -630,23 +580,19 @@ class AdvancedGroupMultiSelect extends React.Component {
     let newSelectedOptions = suggestionOptionIds.filter(id => selectedOptionIds.indexOf(id) === -1);
     this.handleChange([...selectedOptionIds, ...newSelectedOptions]);
   }
-
   handleDeselectAll(e) {
     e && e.preventDefault();
     let {
       highLightedSelectOptions
     } = this.state;
-
     if (highLightedSelectOptions.length) {
       this.setState({
         highLightedSelectOptions: [],
         lastHighLightedSelectOption: ''
       });
     }
-
     this.handleChange([]);
   }
-
   handleChange() {
     let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let e = arguments.length > 1 ? arguments[1] : undefined;
@@ -661,45 +607,37 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.state;
     let newSelectedOptions = selectedOptions.map(option => extractOptionId(option));
     onChange([...newSelectedOptions]);
-
     if (searchStr.trim() != '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
-
     this.searchInput && this.searchInput.focus({
       preventScroll: true
     });
-
     if (needToCloseOnSelect) {
       e && togglePopup(e);
     }
   }
-
   handleSelectOption(id, val, index, e) {
     e && e.preventDefault();
     let {
       selectedOptionIds
     } = this.state;
-
     if (selectedOptionIds.indexOf(id) === -1) {
       this.handleChange([...selectedOptionIds, id], e);
     } else {
       this.handleRemoveOption(id);
     }
   }
-
   handleActive(e) {
     let {
       searchStr,
       isActive
     } = this.state;
-
     if (!isActive) {
       this.setState({
         isActive: true
       });
     }
-
     let {
       target
     } = e || {};
@@ -709,19 +647,16 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.props;
     onFocus && onFocus(searchStr);
   }
-
   handleInactive() {
     let {
       isActive
     } = this.state;
-
     if (isActive) {
       this.setState({
         isActive: false
       });
     }
   }
-
   handleInputFocus() {
     let {
       isDisabled,
@@ -731,15 +666,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       preventScroll: true
     });
   }
-
   componentDidMount() {
     this._isMounted = true;
   }
-
   componentWillUnmount() {
     this._isMounted = false;
   }
-
   componentDidUpdate(prevProps) {
     let {
       groupedOptions,
@@ -754,7 +686,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       hoverIndex
     } = this.state;
     let newOptionIds = this.state.allOptionIds;
-
     if (prevProps.groupedOptions != groupedOptions) {
       let {
         revampedGroups,
@@ -775,7 +706,6 @@ class AdvancedGroupMultiSelect extends React.Component {
         groupDetails: normalizedGroupedOptions
       });
     }
-
     if (prevProps.selectedOptionDetails != selectedOptionDetails || prevProps.selectedGroupOptions != selectedGroupOptions) {
       let {
         groupDetails,
@@ -797,11 +727,11 @@ class AdvancedGroupMultiSelect extends React.Component {
         selectedOptionIds
       });
     }
-
     let hoverId = getIsEmptyValue(newOptionIds[hoverIndex]) ? '' : newOptionIds[hoverIndex];
     let selSuggestion = this[`suggestion_${hoverId}`];
-    isPopupOpen && scrollTo(this.suggestionContainer, selSuggestion); //When suggestions length less than 5, getNextOptions function call
+    isPopupOpen && scrollTo(this.suggestionContainer, selSuggestion);
 
+    //When suggestions length less than 5, getNextOptions function call
     let {
       isNextOptions,
       getNextOptions,
@@ -811,16 +741,13 @@ class AdvancedGroupMultiSelect extends React.Component {
       suggestionOptionIds: suggestions
     } = this.handleFilterSuggestions();
     let suggestionsLen = suggestions.length;
-
     if (isPopupOpen && suggestionsLen <= 5 && isNextOptions && getNextOptions && !needLocalSearch) {
       this.handleFetchOptions(getNextOptions, searchStr);
     }
-
     if (prevProps.isPopupOpen != isPopupOpen) {
       notifyPopupToggle && notifyPopupToggle(isPopupOpen);
     }
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -831,7 +758,6 @@ class AdvancedGroupMultiSelect extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       size,
@@ -1062,14 +988,13 @@ class AdvancedGroupMultiSelect extends React.Component {
       }, /*#__PURE__*/React.createElement(Loader, null)) : null)));
     }) : null);
   }
-
 }
-
 AdvancedGroupMultiSelect.defaultProps = AdvancedGroupMultiSelect_defaultProps;
 AdvancedGroupMultiSelect.propTypes = AdvancedGroupMultiSelect_propTypes;
 const AdvancedGroupMultiSelectComponent = Popup(AdvancedGroupMultiSelect);
 AdvancedGroupMultiSelectComponent.defaultProps = AdvancedGroupMultiSelect.defaultProps;
-AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes; // if (__DOCS__) {
+AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes;
+// if (__DOCS__) {
 //   AdvancedGroupMultiSelect.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'