@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,10 +1,11 @@
 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 ****/
+
 import { MultiSelectComponent } from './MultiSelect';
 import SelectedOptions from './SelectedOptions';
 import Suggestions from './Suggestions';
@@ -14,21 +15,22 @@ import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 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.module.css';
 
+import style from './MultiSelect.module.css';
 /**** Methods ****/
+
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
 import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
-
 /* eslint-disable react/sort-prop-types */
+
 /* eslint-disable react/no-unused-prop-types */
+
 /* eslint-disable react/forbid-component-props */
 
 const dummyArray = [];
@@ -56,6 +58,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.handleMoreClick = this.handleMoreClick.bind(this);
     this.getNextAriaId = getUniqueId(this);
   }
+
   handleFilterSuggestions() {
     const {
       options = dummyArray,
@@ -76,6 +79,7 @@ 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;
@@ -100,32 +104,38 @@ 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);
   }
 
   handleFormatOptions(props) {
@@ -152,6 +162,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
+
   handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
     //handle selectedoptions length
     let {
@@ -175,6 +186,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       selectedOptionsLength: showedSelectedOptionsCount
     });
   }
+
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     const {
       valueField,
@@ -196,6 +208,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
+
   handleComponentDidUpdate(prevProps, prevState) {
     const {
       allSelectedOptionsDetails: oldAllSelectedOptionsDetails
@@ -215,6 +228,7 @@ 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({
@@ -222,6 +236,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       });
       return;
     }
+
     if (oldCount !== prevState.showedSelectedOptionsCount || selectedOptionDetails !== prevProps.selectedOptionDetails) {
       //When showedSelectedOptionsCount update, setState the updated selected option details
       const {
@@ -239,6 +254,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         selectedOptionIds
       });
     }
+
     if (getIsEmptyValue(oldCount) || oldSelectedOptionsLen <= oldCount) {
       //handle not more options case
       if (selectedOptionsLen > oldCount) {
@@ -262,12 +278,14 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         const {
           showedSelectedOptionsCount
         } = this.state;
+
         if (showedSelectedOptionsCount === 0) {
           this.handleMoreClick();
         }
       });
     }
   }
+
   handleMoreClick(e) {
     const {
       showedSelectedOptionsCount
@@ -280,23 +298,26 @@ 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
@@ -307,6 +328,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }])
     };
   }
+
   render() {
     let {
       isReadOnly,
@@ -346,7 +368,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       customProps,
       needEffect,
       disabledOptions,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -388,8 +411,10 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
+      "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -525,18 +550,19 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }, /*#__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
-  AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
-}
+AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps; // if (__DOCS__) {
+//   AdvancedMultiSelectComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
+// }
+
 export default AdvancedMultiSelect;

package/es/MultiSelect/EmptyState.js

@@ -3,6 +3,7 @@ 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() {
@@ -34,25 +35,30 @@ export default class EmptyState extends React.PureComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_Loading`,
+      "data-test-id": `${dataId}_Loading`,
       role: role,
       id: htmlId
     }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_srchEmptyMsg`,
+      "data-test-id": `${dataId}_srchEmptyMsg`,
       role: role,
       id: htmlId
     }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_noOptnsMsg`,
+      "data-test-id": `${dataId}_noOptnsMsg`,
       role: role,
       id: htmlId
     }, emptyText) : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_NoMoreOptionMsg`,
+      "data-test-id": `${dataId}_NoMoreOptionMsg`,
       role: role,
       id: htmlId
     }, noMoreText || emptyText));
   }
+
 }
 EmptyState.propTypes = EmptyState_propTypes;
 EmptyState.defaultProps = EmptyState_defaultProps;