@zohodesk/components 1.2.23 → 1.2.24

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';
@@ -19,16 +20,17 @@ 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,25 +104,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);
@@ -126,6 +137,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       this.handleChange([...selectedOptions, option], e);
     }
   }
+
   handleFormatOptions(props) {
     const {
       options,
@@ -150,6 +162,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
+
   handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
     //handle selectedoptions length
     let {
@@ -173,6 +186,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       selectedOptionsLength: showedSelectedOptionsCount
     });
   }
+
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     const {
       valueField,
@@ -194,6 +208,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
+
   handleComponentDidUpdate(prevProps, prevState) {
     const {
       allSelectedOptionsDetails: oldAllSelectedOptionsDetails
@@ -213,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({
@@ -220,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 {
@@ -237,6 +254,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         selectedOptionIds
       });
     }
+
     if (getIsEmptyValue(oldCount) || oldSelectedOptionsLen <= oldCount) {
       //handle not more options case
       if (selectedOptionsLen > oldCount) {
@@ -260,12 +278,14 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         const {
           showedSelectedOptionsCount
         } = this.state;
+
         if (showedSelectedOptionsCount === 0) {
           this.handleMoreClick();
         }
       });
     }
   }
+
   handleMoreClick(e) {
     const {
       showedSelectedOptionsCount
@@ -278,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
@@ -305,6 +328,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }])
     };
   }
+
   render() {
     let {
       isReadOnly,
@@ -525,15 +549,14 @@ 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;
-AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
-
-// if (__DOCS__) {
+AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes; // if (__DOCS__) {
 //   AdvancedMultiSelectComponent.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

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() {
@@ -57,6 +58,7 @@ export default class EmptyState extends React.PureComponent {
       id: htmlId
     }, noMoreText || emptyText));
   }
+
 }
 EmptyState.propTypes = EmptyState_propTypes;
 EmptyState.defaultProps = EmptyState_defaultProps;

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -1,16 +1,16 @@
 .container{
-    padding: 0 20px 12px 20px;
+    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
   }
   .header{
-    padding-bottom: 4px;
+    padding-bottom: var(--zd_size4) ;
   }
   .cardHeading{
-    font-size: 16px;
+    font-size: var(--zd_font_size16) ;
     color: var(--zdt_multiselect_res_title_text);
     composes: bold dotted from '../../common/common.module.css'
   }
   .buttonText{
-    font-size: 15px;
+    font-size: var(--zd_font_size15) ;
     composes: dotted from '../../common/common.module.css';
-    padding: 0
+    padding: 0 
   }