@zohodesk/components 1.0.0-alpha-250 → 1.0.0-alpha-252

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,11 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /**** Libraries ****/
 import React from 'react';
 import { AdvancedMultiSelect_propTypes } from './props/propTypes';
 import { AdvancedMultiSelect_defaultProps } from './props/defaultProps';
-/**** Components ****/
 
+/**** Components ****/
 import { MultiSelectComponent } from './MultiSelect';
 import SelectedOptions from './SelectedOptions';
 import Suggestions from './Suggestions';
@@ -19,17 +18,17 @@ import Icon from '@zohodesk/icons/lib/Icon';
 import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-/**** CSS ****/
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
 
+/**** CSS ****/
 import style from './MultiSelect.module.css';
-/**** Methods ****/
 
+/**** Methods ****/
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
 import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
-/* eslint-disable react/sort-prop-types */
 
+/* eslint-disable react/sort-prop-types */
 /* eslint-disable react/no-unused-prop-types */
-
 /* eslint-disable react/forbid-component-props */
 
 const dummyArray = [];
@@ -57,7 +56,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.handleMoreClick = this.handleMoreClick.bind(this);
     this.getNextAriaId = getUniqueId(this);
   }
-
   handleFilterSuggestions() {
     const {
       options = dummyArray,
@@ -78,7 +76,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.suggestionsOrder = suggestionIds;
     return suggestions;
   }
-
   handleChange() {
     let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let e = arguments.length > 1 ? arguments[1] : undefined;
@@ -103,39 +100,32 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
     const selectedOptionsLen = newSelectedOptions.length;
     const allSelectedOptionsDetails = [];
-
     for (let i = 0; i < selectedOptionsLen; i++) {
       const id = newSelectedOptions[i];
       allSelectedOptionsDetails.push(optionsNormalize[id]);
     }
-
     onChange && onChange(newSelectedOptions, allSelectedOptionsDetails);
-
     if (searchStr.trim() !== '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
-
     this.searchInput && this.searchInput.focus({
       preventScroll: true
     });
-
     if (needToCloseOnSelect) {
       e && togglePopup(e);
     }
   }
-
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions
     } = this.props;
-
     if (selectedOptions.indexOf(option) >= 0) {
       //toggle select option
       this.handleRemoveOption(option);
     } else {
       this.handleChange([...selectedOptions, option], e);
-    } // e && e.stopPropagation && this.handlePopupClose(e);
-
+    }
+    // e && e.stopPropagation && this.handlePopupClose(e);
   }
 
   handleFormatOptions(props) {
@@ -162,7 +152,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
-
   handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
     //handle selectedoptions length
     let {
@@ -186,7 +175,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       selectedOptionsLength: showedSelectedOptionsCount
     });
   }
-
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     const {
       valueField,
@@ -208,7 +196,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
-
   handleComponentDidUpdate(prevProps, prevState) {
     const {
       allSelectedOptionsDetails: oldAllSelectedOptionsDetails
@@ -228,7 +215,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } = this.state;
     const selectedOptionsLen = selectedOptions.length;
     const oldSelectedOptionsLen = oldSelectedOptions.length;
-
     if (id !== prevProps.id || selectedOptionsLimit !== oldSelectedOptionsLimit) {
       //handle component update case (New set of options or new selectedOptionsLimit update)
       this.setState({
@@ -236,7 +222,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       });
       return;
     }
-
     if (oldCount !== prevState.showedSelectedOptionsCount || selectedOptionDetails !== prevProps.selectedOptionDetails) {
       //When showedSelectedOptionsCount update, setState the updated selected option details
       const {
@@ -254,7 +239,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         selectedOptionIds
       });
     }
-
     if (getIsEmptyValue(oldCount) || oldSelectedOptionsLen <= oldCount) {
       //handle not more options case
       if (selectedOptionsLen > oldCount) {
@@ -278,14 +262,12 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         const {
           showedSelectedOptionsCount
         } = this.state;
-
         if (showedSelectedOptionsCount === 0) {
           this.handleMoreClick();
         }
       });
     }
   }
-
   handleMoreClick(e) {
     const {
       showedSelectedOptionsCount
@@ -298,26 +280,23 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } = this.props;
     removeClose(e);
     const selectedOptionsLen = selectedOptions.length;
-
     if (showedSelectedOptionsCount < selectedOptionsLen) {
       const newCount = showedSelectedOptionsCount + selectedOptionsLimit;
       const newSelectedOptionIds = selectedOptions.slice(showedSelectedOptionsCount, newCount);
-
       try {
         getSelectedOptionDetails(newSelectedOptionIds).then(() => {
           this.setState({
             showedSelectedOptionsCount: showedSelectedOptionsCount + newSelectedOptionIds.length
           });
         });
-      } catch (e) {//console.error('getSelectedOptionDetails is not a promise function.');
+      } catch (e) {
+        //console.error('getSelectedOptionDetails is not a promise function.');
       }
     }
-
     this.searchInput && this.searchInput.focus({
       preventScroll: true
     });
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -328,7 +307,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }])
     };
   }
-
   render() {
     let {
       isReadOnly,
@@ -367,7 +345,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       getFooter,
       customProps,
       needEffect,
-      disabledOptions
+      disabledOptions,
+      isLoading
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -502,7 +481,10 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }, DropBoxProps, {
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
-      }), /*#__PURE__*/React.createElement(Box, {
+      }), 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, {
         customClass: style.box,
@@ -537,24 +519,24 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         dataId: dataIdLoading,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
     }) : null);
   }
-
 }
 AdvancedMultiSelectComponent.propTypes = AdvancedMultiSelect_propTypes;
 AdvancedMultiSelectComponent.defaultProps = AdvancedMultiSelect_defaultProps;
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);
 AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;
-
 if (false) {
   AdvancedMultiSelectComponent.docs = {
     componentGroup: 'Form Elements',
     folderName: 'Style Guide'
-  }; // eslint-disable-next-line react/forbid-foreign-prop-types
-
+  };
+  // eslint-disable-next-line react/forbid-foreign-prop-types
   AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
 }
-
 export default AdvancedMultiSelect;

package/es/MultiSelect/EmptyState.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { EmptyState_propTypes } from './props/propTypes';
 import { EmptyState_defaultProps } from './props/defaultProps';
 /**** CSS ****/
-
 import style from './MultiSelect.module.css';
 export default class EmptyState extends React.PureComponent {
   render() {
@@ -54,7 +53,6 @@ export default class EmptyState extends React.PureComponent {
       id: htmlId
     }, noMoreText || emptyText));
   }
-
 }
 EmptyState.propTypes = EmptyState_propTypes;
 EmptyState.defaultProps = EmptyState_defaultProps;