@hipay/hipay-material-ui 2.0.0-beta.66 → 2.0.0-beta.69

package/HiSelect/HiNestedSelectContent.js

@@ -43,12 +43,12 @@ var _helpers = require("../utils/helpers");
  */
 function getRecursiveFinalItemIdList(itemList) {
   var finalItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return [].concat((0, _toConsumableArray2.default)(finalItemIdList), (0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
+  return (0, _toConsumableArray2.default)(finalItemIdList).concat((0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
     if (item.children) {
       return getRecursiveFinalItemIdList(item.children, memo);
     }
 
-    return [].concat((0, _toConsumableArray2.default)(memo), [item.id]);
+    return (0, _toConsumableArray2.default)(memo).concat([item.id]);
   }, [])));
 }
 /**
@@ -124,7 +124,7 @@ function buildFilteredItemList(itemList) {
       }
 
       return {
-        l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _extends2.default)({}, item, disabledParent && {
+        l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({}, item, disabledParent && {
           disabled: true,
           hideCheckbox: true // don't display checkbox on disabled parent
 
@@ -143,7 +143,7 @@ function buildFilteredItemList(itemList) {
 
     var itemSelected = selectedItemIdList.includes(item.id);
     return {
-      l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _extends2.default)({
+      l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({
         displayed: itemVisible || visibleParent
       }, item)]),
       s: itemSelected && memoSelected,
@@ -223,9 +223,9 @@ function (_React$PureComponent) {
           }), item);
         } else {
           // select parent > add each selectable child without duplicates.
-          onChange(event, [].concat((0, _toConsumableArray2.default)(value.filter(function (vid) {
+          onChange(event, (0, _toConsumableArray2.default)(value.filter(function (vid) {
             return !parentSelectableItemIdList.includes(vid);
-          })), (0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
+          })).concat((0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
         }
       } else if (value.includes(item.id)) {
         // unselect item
@@ -233,7 +233,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
       }
     };
 
@@ -271,14 +271,14 @@ function (_React$PureComponent) {
         centered: true,
         hideCheckbox: true,
         label: translations.no_result_match
-      }]) : [].concat((0, _toConsumableArray2.default)(loading ? [{
+      }]) : (0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []), (0, _toConsumableArray2.default)(hasAll ? [{
+      }] : []).concat((0, _toConsumableArray2.default)(hasAll ? [{
         id: '_all',
         iconAll: iconAll,
         label: translations.all,

package/HiSelect/HiSelect.js

@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -149,22 +149,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
+      var itemList = (0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return _this.props.filterFunc(item, search);
-      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []), (0, _toConsumableArray2.default)(options))));
+      })] : []).concat((0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList,
         inputValue: _this.buildInputValue(options, value, loading)
@@ -272,9 +272,11 @@ function (_React$PureComponent) {
           // Sinon focus sur l'élément sélectionné
           _this.focusOnSelectedItem(_this.props.value);
         } else {
-          setTimeout(function () {
-            _this.searchField.focus();
-          }, 1);
+          if (_this.searchField) {
+            setTimeout(function () {
+              _this.searchField.focus();
+            }, 1);
+          }
         }
       }
     };
@@ -354,7 +356,7 @@ function (_React$PureComponent) {
             _this.handleClose();
           }
         }
-      } else if (key === 'space') {
+      } else if (key === 'space' && event.target !== _this.searchField) {
         event.preventDefault();
 
         if (_this.state.open) {
@@ -424,7 +426,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
       }
     };
 
@@ -450,13 +452,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []), (0, _toConsumableArray2.default)(suggestions))
+          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -488,16 +490,16 @@ function (_React$PureComponent) {
       suggestions: props.options,
       openDown: true
     };
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)(_this));
-    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -508,11 +510,28 @@ function (_React$PureComponent) {
         this.inputEl.focus();
       }
     }
+  }, {
+    key: "getLengthItemList",
+    value: function getLengthItemList(itemList) {
+      var _this2 = this;
+
+      var itemListLength = 0;
+      itemList.forEach(function (parent) {
+        if (parent.displayed && itemListLength < 10) {
+          itemListLength += 1;
+
+          if (parent.children && itemListLength < 10) {
+            itemListLength += _this2.getLengthItemList(parent.children);
+          }
+        }
+      });
+      return itemListLength;
+    }
   }, {
     key: "render",
     value: function render() {
       var _classNames,
-          _this2 = this;
+          _this3 = this;
 
       var _this$props4 = this.props,
           classes = _this$props4.classes,
@@ -579,10 +598,10 @@ function (_React$PureComponent) {
           return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
             value: searchValue,
             autoFocus: true,
-            inputRef: _this2.getInputElement,
-            onKeyDown: _this2.handleKeyDownSearch,
-            onChange: _this2.handleSearch,
-            onReset: _this2.handleSearchReset,
+            inputRef: _this3.getInputElement,
+            onKeyDown: _this3.handleKeyDownSearch,
+            onChange: _this3.handleSearch,
+            onReset: _this3.handleSearchReset,
             placeholder: translations.search,
             startAdornment: 'search',
             tabIndex: 0,
@@ -595,8 +614,10 @@ function (_React$PureComponent) {
 
 
       if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
-        // +1 for search input
-        var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+        // In case we have a nested list
+        var itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
+        var nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
         popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
       } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
         popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
@@ -605,12 +626,12 @@ function (_React$PureComponent) {
       var content = function content(_ref) {
         var placement = _ref.placement;
 
-        if (placement !== _this2.placement) {
-          _this2.placement = placement;
+        if (placement !== _this3.placement) {
+          _this3.placement = placement;
         }
 
         return _react.default.createElement(_ClickAwayListener.default, {
-          onClickAway: _this2.handleClickAway
+          onClickAway: _this3.handleClickAway
         }, _react.default.createElement(_Grow.default, {
           in: open,
           id: "menu-list",
@@ -619,29 +640,29 @@ function (_React$PureComponent) {
           }
         }, _react.default.createElement(_Paper.default, {
           className: classes.paper
-        }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+        }, (_this3.placement && _this3.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
           ref: function ref(contentEl) {
-            _this2.optionsContent = contentEl;
+            _this3.optionsContent = contentEl;
           },
           autoHeight: true,
           autoHeightMax: 430
         }, onScrollReachBottom && {
-          onScroll: _this2.handleScroll
+          onScroll: _this3.handleScroll
         }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
           type: type,
           itemList: itemList,
-          onSelect: _this2.handleSelect,
+          onSelect: _this3.handleSelect,
           selectedItemIdList: selectedItemIdList,
-          fallbackImage: _this2.props.fallbackImage,
-          overlay: _this2.overlay,
+          fallbackImage: _this3.props.fallbackImage,
+          overlay: _this3.overlay,
           value: value
-        }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+        }, hiSelectableListProps))), _this3.placement && _this3.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
       };
 
       return _react.default.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
-          _this2.overlay = el;
+          _this3.overlay = el;
         },
         onKeyDown: this.handleKeyDown,
         onKeyDownCapture: this.handleKeyDownCapture
@@ -664,7 +685,7 @@ function (_React$PureComponent) {
         placeholder: placeholder
       }, hiSelectInputProps, {
         refElement: function refElement(el) {
-          _this2.inputEl = el;
+          _this3.inputEl = el;
         }
       })), open && staticPosition ? _react.default.createElement("div", {
         style: popperStyle,

package/HiSelect/HiSelectContent.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -179,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
       }
     };
 
@@ -209,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []), (0, _toConsumableArray2.default)(suggestions))
+          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -251,22 +251,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
+      var itemList = (0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return item.label && _this.props.filterFunc(item, search);
-      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []), (0, _toConsumableArray2.default)(options))));
+      })] : []).concat((0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };
@@ -286,10 +286,10 @@ function (_React$PureComponent) {
       searchValue: props.searchValue ? undefined : '',
       suggestions: props.options
     };
-    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiSelect/HiSelectInput.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -228,11 +228,11 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiSelect/HiSuggestSelect.js

@@ -19,12 +19,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -168,10 +168,10 @@ function (_React$PureComponent) {
       focused: false,
       options: props.options
     };
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
-    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiSelectableList/HiSelectableList.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -35,6 +37,8 @@ var _helpers = require("../utils/helpers");
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
+var _reactLazyload = _interopRequireWildcard(require("react-lazyload"));
+
 var styles = function styles() {
   return {
     root: {
@@ -101,17 +105,35 @@ function (_React$PureComponent) {
           hideCheckbox = _this$props.hideCheckbox,
           hoverIcon = _this$props.hoverIcon,
           icon = _this$props.icon,
+          lazy = _this$props.lazy,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
           onKeyDown = _this$props.onKeyDown,
           onKeyUp = _this$props.onKeyUp,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
       }
 
-      return _react.default.createElement(_react.default.Fragment, {
+      var placeholderContent = _react.default.createElement("div", {
+        style: {
+          width: '90%',
+          padding: '8px 6px',
+          height: 40,
+          position: 'sticky',
+          left: 0
+        }
+      }, _react.default.createElement("div", {
+        style: {
+          backgroundColor: '#F5F5F5',
+          width: '100%',
+          height: '100%',
+          borderRadius: 4
+        }
+      }));
+
+      var itemComponent = _react.default.createElement(_react.default.Fragment, {
         key: item.id
       }, _react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
         checkedIcon: checkedIcon,
@@ -131,6 +153,19 @@ function (_React$PureComponent) {
       }).map(function (subItem) {
         return _this.buildRecursiveListItem(subItem, level + 1);
       }));
+
+      if (lazy) {
+        return _react.default.createElement(_reactLazyload.default, {
+          key: item.id,
+          height: 40,
+          offset: 400,
+          once: true,
+          overflow: true,
+          placeholder: placeholderContent
+        }, itemComponent);
+      }
+
+      return itemComponent;
     };
 
     _this.compareItem = function (a, b) {
@@ -190,6 +225,13 @@ function (_React$PureComponent) {
         }
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+        (0, _reactLazyload.forceCheck)();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -226,6 +268,7 @@ HiSelectableList.defaultProps = {
   disabled: false,
   disabledItemIdList: [],
   hideCheckbox: false,
+  lazy: true,
   selectedItemIdList: [],
   sort: false,
   sortAppendList: ['_all']
@@ -281,6 +324,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   itemList: _propTypes.default.array.isRequired,
 
+  /**
+   * Active lazyloading on list items
+   */
+  lazy: _propTypes.default.bool,
+
   /**
    * Fonction de callback à la sélection d'un item, renvoie l'item sélectionné
    *

package/HiSelectableList/HiSelectableListItem.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -242,8 +242,8 @@ function (_React$PureComponent) {
     _this.state = {
       hover: false
     };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
+    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiTable/HiTable.js

@@ -15,10 +15,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -57,7 +57,7 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiTable/HiTableRow.js

@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -53,7 +53,7 @@ var styles = function styles(theme) {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
     },
-    clicableRow: {
+    clickableRow: {
       cursor: 'pointer'
     }
   };
@@ -71,7 +71,7 @@ function (_React$PureComponent) {
 
     (0, _classCallCheck2.default)(this, HiTableRow);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTableRow).call(this, props));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -95,7 +95,7 @@ function (_React$PureComponent) {
           locale = _this$props.locale,
           rowdata = _this$props.rowdata;
       return _react.default.createElement(_TableRow.default, {
-        className: (0, _classnames.default)(classes.row, (0, _defineProperty2.default)({}, classes.clicableRow, this.props.onClick)),
+        className: (0, _classnames.default)(classes.row, (0, _defineProperty2.default)({}, classes.clickableRow, this.props.onClick)),
         hover: true,
         onClick: function onClick(event) {
           return _this2.handleClick(event, rowdata);

package/README.md

@@ -189,7 +189,7 @@ npm run test:unit
 
 ##### Jouer les tests sur un seul composant
 ```sh
-yarn run mocha src/AdvancedTable/BodyCells/CellAccount.spec.js
+yarn run mocha packages/hipay-material-ui/src/HiRadio/HiRadio.test.js
 ```
 
 #### Vérifier la couverture de code