@zohodesk/components 1.0.0-temp-80 → 1.0.0-temp-82

package/es/Select/Select.module.css

@@ -1,106 +1,109 @@
-.input {
-  cursor: pointer;
-}
-.small {
-  max-height: var(--zd_size200);
-}
-.medium {
-  max-height: var(--zd_size350);
-}
-.large {
-  max-height: var(--zd_size400);
-}
-.emptyState {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_select_emptystate_text);
-  composes: semibold from '../common/common.module.css';
-}
-.box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6);
-}
-.box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15);
-}
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-.container {
-  position: relative;
-}
-.arrowIcon {
-  height: var(--zd_size8);
-  line-height: var(--zd_size8);
-}
-.small.search {
-  padding: 0 var(--zd_size5);
-}
-.medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0;
-}
-.title {
-  margin-bottom: var(--zd_size6);
-}
-.groupTitle {
-  margin: var(--zd_size6) 0;
-}
-.listItemContainer {
-  padding: var(--zd_size10) 0;
-}
-.responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0;
-}
-.readonly {
-  --textboxicon_icon_cursor: not-allowed;
-}
-.transparentContainer .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-.disable {
-  color: var(--zdt_select_disable_text);
-}
-
-.leftIcon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size30);
-}
-
-[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;
-}
-.responsivedropBoxList{
-  padding: var(--zd_size10) 0 0 0;
-}
-.rotate {
-  transform: rotateX(180deg);
-}
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
+.input {
+  cursor: pointer;
+}
+.small {
+  max-height: var(--zd_size200);
+}
+.medium {
+  max-height: var(--zd_size350);
+}
+.large {
+  max-height: var(--zd_size400);
+}
+.emptyState {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_select_emptystate_text);
+  composes: semibold from '../common/common.module.css';
+}
+.box_small .emptyState {
+  padding: var(--zd_size12) var(--zd_size6);
+}
+.box_medium .emptyState {
+  padding: var(--zd_size12) var(--zd_size15);
+}
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+.container {
+  position: relative;
+}
+.arrowIcon {
+  height: var(--zd_size8);
+  line-height: var(--zd_size8);
+}
+.small.search {
+  padding: 0 var(--zd_size5);
+}
+.medium.search {
+  padding: var(--zd_size3) var(--zd_size20) 0;
+}
+.title {
+  margin-bottom: var(--zd_size6);
+}
+.groupTitle {
+  margin: var(--zd_size6) 0;
+}
+.listItemContainer {
+  padding: var(--zd_size10) 0;
+}
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 0;
+}
+.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+.disable {
+  color: var(--zdt_select_disable_text);
+}
+
+.leftIcon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--zd_size30);
+}
+
+[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;
+}
+.responsivedropBoxList{
+  padding: var(--zd_size10) 0 0 0;
+}
+.rotate {
+  transform: rotateX(180deg);
+}
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+.loader {
+  padding: var(--zd_size10);
+}

package/es/Select/SelectWithAvatar.js

@@ -16,6 +16,7 @@ import DropDownHeading from '../DropDown/DropDownHeading';
 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/MultiSelect.module.css';
@@ -142,7 +143,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       groupName,
       i18nKeys,
       htmlId,
-      needEffect
+      needEffect,
+      isLoading
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -239,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
@@ -296,7 +301,10 @@ 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);
   }
 }
@@ -313,4 +321,4 @@ if (false) {
   // eslint-disable-next-line react/forbid-foreign-prop-types
   SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
 }
-export default Popup(SelectWithAvatar);
+export default SelectWithAvatar;

package/es/Select/SelectWithIcon.js

@@ -12,8 +12,9 @@ import { Container, Box } from '../Layout';
 import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
-import { scrollTo } from '../utils/Common.js';
+import { scrollTo, findScrollEnd } from '../utils/Common.js';
 /**** CSS ****/
 import style from './Select.module.css';
 class SelectWithIcon extends Component {
@@ -22,8 +23,10 @@ class SelectWithIcon extends Component {
     this.state = {
       searchValue: '',
       selectedIndex: 0,
-      options: props.options
+      options: props.options,
+      isFetchingOptions: false
     };
+    this._isMounted = false;
     this.onSearchClear = this.onSearchClear.bind(this);
     this.onSearch = this.onSearch.bind(this);
     this.togglePopup = this.togglePopup.bind(this);
@@ -36,6 +39,14 @@ class SelectWithIcon extends Component {
     this.inputRef = this.inputRef.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.getNextAriaId = getUniqueId(this);
+    this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
+    this.handleFetchOptions = this.handleFetchOptions.bind(this);
+  }
+  componentDidMount() {
+    this._isMounted = true;
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
   }
   inputRef(el) {
     this.input = el;
@@ -68,8 +79,6 @@ class SelectWithIcon extends Component {
       options
     } = this.state;
     let {
-      isNextOptions,
-      getNextOptions,
       idKey,
       valueKey,
       isPopupOpen,
@@ -97,7 +106,7 @@ class SelectWithIcon extends Component {
             });
           } else {
             if (selectedIndex === options.length - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
+              this.handleGetNextOptions();
             }
             this.setState({
               selectedIndex: selectedIndex + 1
@@ -194,12 +203,54 @@ class SelectWithIcon extends Component {
     this.togglePopup(e);
   }
   handleScroll(e) {
-    const {
+    let ele = e.target;
+    let isScrollReachedBottom = findScrollEnd(ele);
+    isScrollReachedBottom && this.handleGetNextOptions();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.options.length != this.props.options.length) {
+      this.setState({
+        options: nextProps.options
+      });
+    }
+  }
+  handleGetNextOptions() {
+    let {
       isNextOptions,
       getNextOptions
     } = this.props;
-    if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-      isNextOptions && getNextOptions && getNextOptions(e);
+    let {
+      searchValue
+    } = this.state;
+    isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
+  }
+  handleFetchOptions(APICall) {
+    let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    let {
+      isFetchingOptions = false
+    } = this.state;
+    let {
+      _isMounted
+    } = this;
+    if (!isFetchingOptions && APICall) {
+      this.setState({
+        isFetchingOptions: true
+      });
+      try {
+        return APICall(searchValue).then(() => {
+          _isMounted && this.setState({
+            isFetchingOptions: false
+          });
+        }, () => {
+          _isMounted && this.setState({
+            isFetchingOptions: false
+          });
+        });
+      } catch (e) {
+        _isMounted && this.setState({
+          isFetchingOptions: false
+        });
+      }
     }
   }
   responsiveFunc(_ref) {
@@ -247,13 +298,13 @@ class SelectWithIcon extends Component {
       boxSize,
       dropBoxSize,
       emptyMessage,
-      isFetchingOptions,
       needIcon,
       iconName,
       iconSize,
       iconClass,
       i18nKeys,
-      htmlId
+      htmlId,
+      isLoading
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -262,7 +313,8 @@ class SelectWithIcon extends Component {
     let {
       searchValue,
       selectedIndex,
-      options
+      options,
+      isFetchingOptions
     } = this.state;
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
@@ -345,7 +397,10 @@ class SelectWithIcon extends Component {
         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,
@@ -411,7 +466,10 @@ class SelectWithIcon extends Component {
         dataId: dataId,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      })))));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
 }

package/es/Select/props/defaultProps.js

@@ -30,7 +30,8 @@ export const Select_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  customProps: {}
+  customProps: {},
+  isLoading: false
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -61,7 +62,8 @@ export const GroupSelect_defaultProps = {
   needLocalSearch: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  isLoading: false
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -83,7 +85,8 @@ export const SelectWithAvatar_defaultProps = {
   borderColor: 'default',
   isSearchClearOnClose: true,
   i18nKeys: {},
-  needEffect: true
+  needEffect: true,
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -106,5 +109,6 @@ export const SelectWithIcon_defaultProps = {
   dropBoxSize: 'small',
   needIcon: true,
   iconSize: '14',
-  i18nKeys: {}
+  i18nKeys: {},
+  isLoading: false
 };

package/es/Select/props/propTypes.js

@@ -83,7 +83,8 @@ export const Select_propTypes = {
     DropdownSearchTextBoxProps: PropTypes.object,
     listItemProps: PropTypes.object,
     SuggestionsProps: PropTypes.object
-  })
+  }),
+  isLoading: PropTypes.bool
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -159,7 +160,8 @@ export const GroupSelect_propTypes = {
     emptyText: PropTypes.string,
     noMoreText: PropTypes.string,
     searchEmptyText: PropTypes.string
-  })
+  }),
+  isLoading: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = {
   animationStyle: PropTypes.string,
@@ -216,7 +218,8 @@ export const SelectWithAvatar_propTypes = {
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
   htmlId: PropTypes.string,
-  needEffect: PropTypes.bool
+  needEffect: PropTypes.bool,
+  isLoading: PropTypes.bool
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -261,5 +264,6 @@ export const SelectWithIcon_propTypes = {
   textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
   togglePopup: PropTypes.func,
   valueKey: PropTypes.string,
-  htmlId: PropTypes.string
+  htmlId: PropTypes.string,
+  isLoading: PropTypes.bool
 };