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

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;

package/es/Select/SelectWithIcon.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { SelectWithIcon_defaultProps } from './props/defaultProps';
 import { SelectWithIcon_propTypes } from './props/propTypes';
 /**** Components ****/
-
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -13,21 +12,21 @@ 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 {
   constructor(props) {
     super(props);
     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);
@@ -40,36 +39,37 @@ 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;
   }
-
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   scrollContentRef(el) {
     let {
       isPopupOpen
     } = this.props;
-
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
-
   handleMouseEnter(id, value, index, e) {
     this.setState({
       selectedIndex: index
     });
   }
-
   handleKeyDown(e) {
     let {
       keyCode
@@ -79,19 +79,15 @@ class SelectWithIcon extends Component {
       options
     } = this.state;
     let {
-      isNextOptions,
-      getNextOptions,
       idKey,
       valueKey,
       isPopupOpen,
       selectedId
     } = this.props;
-
     if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     } else if (!isPopupOpen && (keyCode === 40 || keyCode === 13)) {
       e.preventDefault(); //prevent body scroll
-
       this.togglePopup(e);
       options.map((list, index) => {
         if (list.id === selectedId) {
@@ -101,7 +97,6 @@ class SelectWithIcon extends Component {
         }
       });
     }
-
     if (isPopupOpen) {
       switch (keyCode) {
         case 40:
@@ -111,16 +106,13 @@ class SelectWithIcon extends Component {
             });
           } else {
             if (selectedIndex === options.length - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
+              this.handleGetNextOptions();
             }
-
             this.setState({
               selectedIndex: selectedIndex + 1
             });
           }
-
           break;
-
         case 38:
           if (selectedIndex === 0) {
             this.setState({
@@ -131,9 +123,7 @@ class SelectWithIcon extends Component {
               selectedIndex: selectedIndex - 1
             });
           }
-
           break;
-
         case 13:
           let option = options[selectedIndex];
           this.handleChange && this.handleChange(option[idKey], option[valueKey], selectedIndex, e);
@@ -141,7 +131,6 @@ class SelectWithIcon extends Component {
       }
     }
   }
-
   componentDidUpdate(prevProps) {
     let {
       idKey,
@@ -152,7 +141,6 @@ class SelectWithIcon extends Component {
       selectedIndex,
       options
     } = this.state;
-
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
         isPopupOpen ? needSearch ? this.searchInput.focus({
@@ -164,39 +152,32 @@ class SelectWithIcon extends Component {
         });
       }, 10);
     }
-
     let option = options[selectedIndex];
     let id = option && option[idKey] || {};
     let selSuggestion = this[`suggestion_${id}`];
-
     if (isPopupOpen) {
       this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
     }
   }
-
   searchList(searchValue) {
     let datas = [];
     let {
       options,
       valueKey
     } = this.props;
-
     if (options.length) {
       datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
     }
-
     return datas;
   }
-
   onSearchClear() {
-    let options = this.searchList(''); // this.searchInput.focus({preventScroll:false});
-
+    let options = this.searchList('');
+    // this.searchInput.focus({preventScroll:false});
     this.setState({
       searchValue: '',
       options
     });
   }
-
   onSearch(searchValue) {
     let options = this.searchList(searchValue);
     this.setState({
@@ -205,7 +186,6 @@ class SelectWithIcon extends Component {
       options
     });
   }
-
   togglePopup(e) {
     let {
       togglePopup,
@@ -214,7 +194,6 @@ class SelectWithIcon extends Component {
     } = this.props;
     !isReadOnly && togglePopup(e, boxPosition);
   }
-
   handleChange(id, value, index, e) {
     let {
       onChange,
@@ -223,18 +202,57 @@ class SelectWithIcon extends Component {
     !isReadOnly && onChange && onChange(id, value, index, e);
     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) {
     let {
       mediaQueryOR
@@ -245,7 +263,6 @@ class SelectWithIcon extends Component {
       }])
     };
   }
-
   render() {
     let {
       animationStyle,
@@ -281,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,
@@ -296,7 +313,8 @@ class SelectWithIcon extends Component {
     let {
       searchValue,
       selectedIndex,
-      options
+      options,
+      isFetchingOptions
     } = this.state;
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
@@ -379,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,
@@ -434,7 +455,8 @@ class SelectWithIcon extends Component {
           getRef: this.itemRef,
           a11y: {
             role: 'option',
-            ariaSelected: selectedId === options[idKey]
+            ariaSelected: selectedId === options[idKey],
+            ariaLabel: options[valueKey]
           }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
@@ -445,20 +467,19 @@ 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);
   }
-
 }
-
 SelectWithIcon.propTypes = SelectWithIcon_propTypes;
 SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
-
 if (false) {
   SelectWithIcon.docs = {
     componentGroup: 'Form Elements',
     folderName: 'Style Guide'
   };
 }
-
 export default Popup(SelectWithIcon);

package/es/Select/__tests__/Select.spec.js

@@ -1,9 +1,8 @@
 /* eslint-disable no-undef */
-
 /**** Libraries ****/
 import expect from 'expect';
-/**** Components ****/
 
+/**** Components ****/
 import Select from '../Select';
 import ListItem from '../../ListItem/ListItem';
 describe('Select component conditions', () => {
@@ -189,8 +188,9 @@ describe('Select component conditions', () => {
       target: {
         value: 'value changed'
       }
-    }); //
+    });
 
+    //
     setTimeout(() => {
       expect(props.onSearch).toHaveBeenCalled();
       expect(props.onSearch.mock.calls[0][0]).toEqual('value changed');
@@ -202,8 +202,10 @@ describe('Select component conditions', () => {
         expect(loadingEleArr.length).toBe(0);
         cb();
       });
-    }, searchDebounceTime); //
+    }, searchDebounceTime);
+    //
   });
+
   it('Should call onChange, When select list item', () => {
     let defaultProps = {
       options: [{
@@ -299,11 +301,11 @@ describe('Select component conditions', () => {
     };
     let {
       renderedDOM
-    } = setup(Select, defaultProps); // let liteItemArr = TestUtils.scryRenderedComponentsWithTestid(
+    } = setup(Select, defaultProps);
+    // let liteItemArr = TestUtils.scryRenderedComponentsWithTestid(
     //   renderedDOM,
     //   'listItem'
     // );
-
     let liteItemArr = TestUtils.scryRenderedComponentsWithType(renderedDOM, ListItem);
     expect(liteItemArr.length).toBe(3);
   });

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({
@@ -145,7 +146,6 @@ export const GroupSelect_propTypes = {
   getFooter: PropTypes.func,
   htmlId: PropTypes.string,
   iconOnHover: PropTypes.bool,
-
   /**** Popup Props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,
@@ -160,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,
@@ -217,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']),
@@ -262,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
 };

package/es/Stencils/Stencils.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
-
 import style from './Stencils.module.css';
 export default class Stencils extends React.PureComponent {
   render() {
@@ -18,11 +17,9 @@ export default class Stencils extends React.PureComponent {
       className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
     });
   }
-
 }
 Stencils.propTypes = propTypes;
 Stencils.defaultProps = defaultProps;
-
 if (false) {
   Stencils.docs = {
     componentGroup: 'Atom',

package/es/Switch/Switch.js

@@ -1,5 +1,4 @@
 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -11,7 +10,6 @@ export default class Switch extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
-
   onChange(e) {
     let {
       onChange,
@@ -19,7 +17,6 @@ export default class Switch extends React.Component {
     } = this.props;
     onChange && onChange(!checked, e);
   }
-
   render() {
     let {
       id,
@@ -85,11 +82,9 @@ export default class Switch extends React.Component {
       customClass: customLabel
     }, LabelProps)));
   }
-
 }
 Switch.defaultProps = defaultProps;
 Switch.propTypes = propTypes;
-
 if (false) {
   Switch.docs = {
     componentGroup: 'Form Elements',