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

package/es/Select/Select.js

@@ -1,11 +1,9 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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, { Component } from 'react';
 import { Select_defaultProps } from './props/defaultProps';
 import { Select_propTypes } from './props/propTypes';
 /**** Components ****/
-
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
@@ -17,16 +15,16 @@ import { getUniqueId } from '../Provider/IdProvider';
 import Icon from '@zohodesk/icons/lib/Icon';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-/**** Methods ****/
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
 
+/**** Methods ****/
 import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from '../utils/dropDownUtils';
-import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../utils/Common.js';
+import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd } from '../utils/Common.js';
 /**** CSS ****/
-
 import style from './Select.module.css';
 import { getLibraryConfig } from '../Provider/Config';
-/* eslint-disable react/no-deprecated */
 
+/* eslint-disable react/no-deprecated */
 /* eslint-disable react/no-unused-prop-types */
 
 let dummyArray = [];
@@ -67,10 +65,9 @@ export class SelectComponent extends Component {
       valueField,
       textField
     });
-
-    if (isSelfValueChanged) {// onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
+    if (isSelfValueChanged) {
+      // onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
     }
-
     this.state = {
       selected,
       options: allOptions,
@@ -113,10 +110,10 @@ export class SelectComponent extends Component {
     this.autoSelectSuggestions = [];
     this.autoSelectIndex = 0;
   }
-
   componentDidMount() {
     this._isMounted = true;
-    this.handleExposePopupHandlers(); // let { suggestionContainer } = this;
+    this.handleExposePopupHandlers();
+    // let { suggestionContainer } = this;
     // suggestionContainer &&
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
@@ -158,10 +155,9 @@ export class SelectComponent extends Component {
     let {
       selectedValue: oldSelectedValue
     } = this.props;
-
-    if (isSelfValueChanged && oldSelectedValue !== selectedValue) {// onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
+    if (isSelfValueChanged && oldSelectedValue !== selectedValue) {
+      // onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
     }
-
     this.selectedFormatOptions = Object.assign(oldSelectedFormatOptions, selectedValueDetails);
     this.normalizedFormatOptions = normalizedFormatOptions;
     this.optionsOrder = optionsOrder;
@@ -174,7 +170,6 @@ export class SelectComponent extends Component {
       selectedValueIndex: hoverIndex
     });
   }
-
   componentDidUpdate(prevProps) {
     let {
       suggestionContainer,
@@ -197,7 +192,6 @@ export class SelectComponent extends Component {
     let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
     let selSuggestion = this[`suggestion_${hoverId}`];
     isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
-
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -215,22 +209,20 @@ export class SelectComponent extends Component {
           hoverIndex: selectedValueIndex
         });
       }
-    } //When suggestions length less than 5, getNextOptions function call
-
+    }
 
+    //When suggestions length less than 5, getNextOptions function call
     let {
       isNextOptions,
       getNextOptions
-    } = this.props; // let { searchStr } = this.state;
-
+    } = this.props;
+    // let { searchStr } = this.state;
     let suggestions = isPopupOpen ? this.handleFilterSuggestions() : [];
     let suggestionsLen = suggestions.length;
-
     if (isPopupOpen && suggestionsLen <= 5 && isNextOptions && getNextOptions && !needLocalSearch) {
       this.handleFetchOptions(getNextOptions, searchStr);
     }
   }
-
   componentWillUnmount() {
     this._isMounted = false;
     let {
@@ -242,7 +234,8 @@ export class SelectComponent extends Component {
       closePopup: null,
       togglePopup: null
     };
-    getPopupHandlers && getPopupHandlers(methods); // let { suggestionContainer } = this;
+    getPopupHandlers && getPopupHandlers(methods);
+    // let { suggestionContainer } = this;
     // suggestionContainer &&
     //   suggestionContainer.removeEventListener('scroll', this.handleScroll);
   }
@@ -264,7 +257,6 @@ export class SelectComponent extends Component {
       listItemProps
     });
   }
-
   handleChange(id, value, index, e) {
     e && e.preventDefault && e.preventDefault();
     let {
@@ -275,11 +267,10 @@ export class SelectComponent extends Component {
     let {
       optionsNormalize
     } = this.state;
-    !isReadOnly && onChange && onChange(id, optionsNormalize[id]); // this.valueInput && this.valueInput.focus({preventScroll:true});
-
+    !isReadOnly && onChange && onChange(id, optionsNormalize[id]);
+    // this.valueInput && this.valueInput.focus({preventScroll:true});
     needCloseOnSelect && this.handlePopupClose(e);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -290,7 +281,6 @@ export class SelectComponent extends Component {
       }])
     };
   }
-
   handleKeyDown(e) {
     let {
       onChange,
@@ -307,38 +297,33 @@ export class SelectComponent extends Component {
     let {
       keyCode
     } = e;
-
     if (!isPopupOpen && !isPopupOpenOnEnter) {
       onKeyDown && onKeyDown(e);
     }
-
     if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll  and enter key prevent
     } else if (!isPopupOpen && keyCode === 40) {
       e.preventDefault(); //prevent body scroll
-
       this.togglePopup(e);
     }
-
     if (keyCode === 38 && isPopupOpen && options.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 && options.length) {
-      if (hoverIndex === options.length - 1) {// hoverIndex = 0;
+      if (hoverIndex === options.length - 1) {
+        // hoverIndex = 0;
       } else {
         if (hoverIndex === options.length - 3) {
           this.handleGetNextOptions();
         }
-
         hoverIndex += 1;
       }
-
       this.setState({
         hoverIndex
       });
@@ -347,36 +332,32 @@ export class SelectComponent extends Component {
       let {
         id
       } = option || {};
-
       if (isPopupOpen && !getIsEmptyValue(id) && onChange) {
         onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }
-
       if (!isPopupOpen && isPopupOpenOnEnter) {
         this.togglePopup(e);
       }
     } else if (keyCode === 27) {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
-      }); //this.handlePopupClose(e);
+      });
+      //this.handlePopupClose(e);
     } else if (keyCode === 9) {
       let option = options[hoverIndex];
       let {
         id
       } = option || {};
-
       if (isPopupOpen && !getIsEmptyValue(id)) {
         onChange && onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }
-
       if (!isPopupOpen && isPopupOpenOnEnter) {
         this.togglePopup(e);
       }
     }
   }
-
   handleSearchOptions() {
     let {
       onSearch
@@ -386,7 +367,6 @@ export class SelectComponent extends Component {
     } = this.state;
     searchStr && this.handleFetchOptions(onSearch, searchStr);
   }
-
   handleSearch(value) {
     // let { value = '' } = e.target;
     let {
@@ -409,10 +389,7 @@ export class SelectComponent extends Component {
       }
     });
   }
-
-  handleMouseEnter(id
-  /*val, index*/
-  ) {
+  handleMouseEnter(id /*val, index*/) {
     let {
       hoverIndex
     } = this.state;
@@ -424,21 +401,21 @@ export class SelectComponent extends Component {
       hoverIndex: newHoverIndex
     });
   }
-
   handleFilterSuggestions() {
     let {
       needLocalSearch,
-      excludeOptions = dummyArray // needSearch
-
+      excludeOptions = dummyArray
+      // needSearch
     } = this.props;
     let {
       options = dummyArray,
       searchStr = ''
-    } = this.state; // if (
+    } = this.state;
+
+    // if (
     //   (needSearch && searchStr && searchStr.trim().length) ||
     //   (excludeOptions && excludeOptions.length)
     // ) {
-
     searchStr = getSearchString(searchStr);
     let {
       suggestions,
@@ -450,25 +427,16 @@ export class SelectComponent extends Component {
       needSearch: needLocalSearch
     });
     this.optionsOrder = suggestionIds;
-    return suggestions; // }
+    return suggestions;
+    // }
     // return options;
   }
 
   handleScroll(e) {
     let ele = e.target;
-    let {
-      height: eleHeight
-    } = ele.getBoundingClientRect();
-    let elementHeight = eleHeight || ele.clientHeight; // let elementHeight = ele.clientHeight;
-
-    let eleScrollTop = ele.scrollTop;
-    let eleScrollHeight = ele.scrollHeight;
-
-    if (eleScrollHeight - (eleScrollTop + elementHeight) < 1) {
-      this.handleGetNextOptions();
-    }
+    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);
@@ -478,12 +446,10 @@ export class SelectComponent extends Component {
     let {
       _isMounted
     } = this;
-
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
-
       try {
         return APICall(searchStr).then(() => {
           _isMounted && this.setState({
@@ -501,7 +467,6 @@ export class SelectComponent extends Component {
       }
     }
   }
-
   handleGetNextOptions() {
     let {
       isNextOptions,
@@ -512,7 +477,6 @@ export class SelectComponent extends Component {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
   }
-
   togglePopup(e) {
     let {
       togglePopup,
@@ -524,7 +488,6 @@ export class SelectComponent extends Component {
     !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
     !isPopupOpen && typeof onFocus === 'function' && onFocus(e);
   }
-
   handlePopupClose(e) {
     let {
       closePopupOnly
@@ -534,19 +497,15 @@ export class SelectComponent extends Component {
     });
     closePopupOnly(e);
   }
-
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
   }
-
   suggestionItemRef(el, index, id) {
     this[`suggestion_${id}`] = el;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   valueInputRef(el) {
     let {
       getRef
@@ -554,14 +513,12 @@ export class SelectComponent extends Component {
     this.valueInput = el;
     getRef && getRef(el);
   }
-
   handleSelectFocus() {
     let {
       valueInput
     } = this;
     valueInput && valueInput.setSelectionRange(valueInput, 0);
   }
-
   handleClearSearch() {
     this.handleSearch('');
     setTimeout(() => {
@@ -570,7 +527,6 @@ export class SelectComponent extends Component {
       });
     }, 1);
   }
-
   handleValueInputChange(e) {
     let {
       which
@@ -580,13 +536,11 @@ export class SelectComponent extends Component {
       isPopupOpen,
       autoSelectOnType
     } = this.props;
-
     if (!isPopupOpen && autoSelectOnType) {
       this.valueInputTypeString += (typeString || '').trim();
       this.handleChangeOnType();
     }
   }
-
   handleChangeOnType() {
     let {
       excludeOptions = dummyArray
@@ -599,13 +553,11 @@ export class SelectComponent extends Component {
     } = this;
     let typeString = this.valueInputTypeString;
     this.valueInputTypeString = '';
-
     let changeValue = () => {
       let optionDetails = this.autoSelectSuggestions[this.autoSelectIndex];
       let {
         id
       } = optionDetails || {};
-
       if (!getIsEmptyValue(id)) {
         this.handleChange(id);
         let hoverIndex = optionsOrder.indexOf(id);
@@ -614,14 +566,12 @@ export class SelectComponent extends Component {
         });
       }
     };
-
     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;
@@ -639,7 +589,6 @@ export class SelectComponent extends Component {
       changeValue();
     }
   }
-
   handleAddNewOption() {
     let {
       searchStr
@@ -648,7 +597,6 @@ export class SelectComponent extends Component {
       onAddNewOption,
       getCustomEmptyState
     } = this.props;
-
     if (getCustomEmptyState) {
       this.setState({
         searchStr: ''
@@ -656,7 +604,6 @@ export class SelectComponent extends Component {
       this.handleFetchOptions(onAddNewOption, searchStr);
     }
   }
-
   handleExposePopupHandlers() {
     let {
       removeClose,
@@ -673,7 +620,6 @@ export class SelectComponent extends Component {
     };
     getPopupHandlers && getPopupHandlers(methods);
   }
-
   handleGetAddNewOptionText() {
     let {
       searchStr
@@ -686,7 +632,6 @@ export class SelectComponent extends Component {
       onAddNewOption: this.handleAddNewOption
     });
   }
-
   render() {
     let {
       needSearch,
@@ -730,7 +675,8 @@ export class SelectComponent extends Component {
       children,
       iconOnHover,
       customProps,
-      autoComplete
+      autoComplete,
+      isLoading
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -869,7 +815,10 @@ export class SelectComponent extends Component {
         isPadding: false,
         isResponsivePadding: getFooter ? false : true,
         alignBox: "row"
-      }, !getChildren ? /*#__PURE__*/React.createElement(Box, {
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         onScroll: this.handleScroll
@@ -926,12 +875,14 @@ export class SelectComponent extends Component {
         getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
         flexible: true
-      }, getChildren()));
+      }, getChildren())));
     }) : null);
   }
-
 }
 SelectComponent.propTypes = Select_propTypes;
 SelectComponent.defaultProps = Select_defaultProps;
@@ -939,14 +890,13 @@ SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
 export default Select;
-
 if (false) {
   Select.docs = {
     componentGroup: 'Form Elements',
     folderName: 'Style Guide',
     external: true,
     description: ' '
-  }; // eslint-disable-next-line react/forbid-foreign-prop-types
-
+  };
+  // eslint-disable-next-line react/forbid-foreign-prop-types
   Select.propTypes = SelectComponent.propTypes;
 }

package/es/Select/Select.module.css

@@ -68,12 +68,22 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
   width: var(--zd_size30);
 }
-.iconSelect {
+
+[dir=ltr] .leftIcon {
+  left: 0;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0;
+}
+[dir=ltr] .iconSelect {
   padding-left: var(--zd_size30);
 }
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30);
+}
 
 .dropBoxList {
   padding: var(--zd_size10) 0;
@@ -94,3 +104,6 @@
   opacity: 1;
   visibility: visible;
 }
+.loader {
+  padding: var(--zd_size10);
+}

package/es/Select/SelectWithAvatar.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { SelectWithAvatar_defaultProps } from './props/defaultProps';
 import { SelectWithAvatar_propTypes } from './props/propTypes';
 /**** Components ****/
-
 import { SelectComponent } from './Select';
 import Popup from '../Popup/Popup';
 import Tag from '../Tag/Tag';
@@ -17,11 +16,11 @@ import DropDownHeading from '../DropDown/DropDownHeading';
 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/MultiSelect.module.css';
 import selectStyle from './Select.module.css';
-
 class SelectWithAvatarComponent extends SelectComponent {
   constructor(props) {
     super(props);
@@ -33,7 +32,6 @@ class SelectWithAvatarComponent extends SelectComponent {
     this.handleRemoveOption = this.handleRemoveOption.bind(this);
     this.getNextAriaId = getUniqueId(this);
   }
-
   handleFormatOptions(props) {
     let {
       options,
@@ -49,18 +47,15 @@ class SelectWithAvatarComponent extends SelectComponent {
       optionType: 'avatar'
     });
   }
-
   handleActive(e) {
     let {
       isActive
     } = this.state;
-
     if (!isActive) {
       this.setState({
         isActive: true
       });
     }
-
     let {
       target
     } = e || {};
@@ -70,19 +65,16 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = this.props;
     onFocus && onFocus(this.state.searchStr);
   }
-
   handleInactive() {
     let {
       isActive
     } = this.state;
-
     if (isActive) {
       this.setState({
         isActive: false
       });
     }
   }
-
   handleSearchChange(e) {
     let {
       isPopupOpen
@@ -90,7 +82,6 @@ class SelectWithAvatarComponent extends SelectComponent {
     !isPopupOpen && this.togglePopup(e);
     this.handleSearch(e);
   }
-
   handleRemoveOption(e) {
     let {
       keyCode
@@ -101,14 +92,12 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       isDefaultSelectValue
     } = this.props;
-
     if (keyCode === 8 && searchStr.length === 0 && !isDefaultSelectValue) {
       this.handleChange('');
     } else {
       this.handleKeyDown(e);
     }
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -119,7 +108,6 @@ class SelectWithAvatarComponent extends SelectComponent {
       }])
     };
   }
-
   render() {
     let {
       dropBoxSize,
@@ -155,7 +143,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       groupName,
       i18nKeys,
       htmlId,
-      needEffect
+      needEffect,
+      isLoading
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -252,7 +241,10 @@ class SelectWithAvatarComponent extends SelectComponent {
         isPadding: false,
         isResponsivePadding: true,
         alignBox: "row"
-      }, /*#__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, {
         onScroll: this.handleScroll
@@ -309,25 +301,24 @@ class SelectWithAvatarComponent extends SelectComponent {
         dataId: dataId,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      })))));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
-
 }
-
 SelectWithAvatarComponent.propTypes = SelectWithAvatar_propTypes;
 SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);
 SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
-
 if (false) {
   SelectWithAvatar.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
   SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
 }
-
-export default Popup(SelectWithAvatar);
+export default SelectWithAvatar;