@hipay/hipay-material-ui 1.0.0-beta.26 → 1.0.0-beta.28

package/HiSelect/HiSelect.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.styles = undefined;
+exports.styles = exports.INFINITESCROLL_ERROR_MESSAGE = undefined;
 
 var _keys = require('babel-runtime/core-js/object/keys');
 
@@ -17,6 +17,10 @@ var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
 
 var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -71,6 +75,10 @@ var _reactPopper = require('react-popper');
 
 var _mdiMaterialUi = require('mdi-material-ui');
 
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+
+var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
+
 var _HiSelectableList = require('../HiSelectableList');
 
 var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
@@ -95,7 +103,7 @@ var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// @inheritedComponent Input
+var INFINITESCROLL_ERROR_MESSAGE = exports.INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true'; // @inheritedComponent Input
 
 var styles = exports.styles = function styles(theme) {
     return {
@@ -162,7 +170,8 @@ var HiSelect = function (_React$PureComponent) {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: props.dynamic || false
+            dynamic: props.dynamic || false,
+            resultsPageNumber: 1
         };
 
         // Check if value is in options
@@ -221,6 +230,24 @@ var HiSelect = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(HiSelect, [{
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState, prevContext) {
+            var _this2 = this;
+
+            if (this.props.infiniteScroll && !prevState.open && this.state.open && this.optionsContent) {
+                var optionList = this.optionsContent.querySelector('div').querySelector('div');
+                optionList.addEventListener('scroll', function (event) {
+                    if (optionList.scrollTop >= event.target.scrollHeight - optionList.offsetHeight && !_this2.props.loadingMoreResults && _this2.props.hasMore) {
+                        _this2.props.loadMoreResults(_this2.state.resultsPageNumber + 1);
+                        _this2.setState({ resultsPageNumber: _this2.state.resultsPageNumber + 1 });
+                    }
+                });
+            } else if (this.optionsContent && this.props.infiniteScroll && !this.state.open && prevState.open) {
+                var _optionList = this.optionsContent.querySelector('div').querySelector('div');
+                _optionList.removeEventListener('scroll');
+            }
+        }
+    }, {
         key: 'componentWillReceiveProps',
         value: function componentWillReceiveProps(nextProps) {
             if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
@@ -262,6 +289,14 @@ var HiSelect = function (_React$PureComponent) {
             });
             return { hierarchy: hierarchy, hierarchySelected: hierarchySelected };
         }
+    }, {
+        key: 'handleReset',
+        value: function handleReset(event) {
+            if (this.props.onReset) {
+                event.stopPropagation();
+                this.props.onReset(event);
+            }
+        }
 
         // Key down on list items
 
@@ -291,7 +326,7 @@ var HiSelect = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -315,7 +350,12 @@ var HiSelect = function (_React$PureComponent) {
                 placeholder = _props.placeholder,
                 staticPosition = _props.staticPosition,
                 pinnedItem = _props.pinnedItem,
-                hasAll = _props.hasAll;
+                hasAll = _props.hasAll,
+                infiniteScroll = _props.infiniteScroll,
+                loadingMoreResults = _props.loadingMoreResults,
+                showNoResults = _props.showNoResults,
+                showMinLength = _props.showMinLength,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabled', 'error', 'loading', 'options', 'checkbox', 'searchable', 'displayAsChip', 'type', 'value', 'translations', 'parentItemSelectable', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'hierarchic', 'id', 'placeholder', 'staticPosition', 'pinnedItem', 'hasAll', 'infiniteScroll', 'loadingMoreResults', 'showNoResults', 'showMinLength']);
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
@@ -333,7 +373,7 @@ var HiSelect = function (_React$PureComponent) {
             }
 
             // If loading
-            if (loading) {
+            if (loading && !loadingMoreResults) {
                 _suggestions.unshift({
                     id: '_loading',
                     type: 'loader',
@@ -390,6 +430,28 @@ var HiSelect = function (_React$PureComponent) {
                 popperStyle = { width: this.props.containerWidth };
             }
 
+            if (infiniteScroll && loadingMoreResults) {
+                _suggestions.push({
+                    id: '_loading',
+                    type: 'loader',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: 'loading'
+                });
+            }
+
+            if (!loading && !loadingMoreResults && _suggestions.length === 0 && (showNoResults || showMinLength)) {
+                suggestions.push({
+                    id: '_no_result',
+                    type: 'text',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: showNoResults ? translations.no_result_match : translations.min_length
+                });
+            }
+
             var content = _react2.default.createElement(
                 _ClickAwayListener2.default,
                 { onClickAway: this.handleClickAway },
@@ -407,29 +469,35 @@ var HiSelect = function (_React$PureComponent) {
                             autoFocus: true,
                             onSearch: this.props.onSearch,
                             inputRef: function inputRef(el) {
-                                _this2.searchField = el;
+                                _this3.searchField = el;
                             },
                             onKeyDown: this.handleKeyDownSearch
                         }),
-                        _react2.default.createElement(_HiSelectableList2.default, {
-                            type: type,
-                            parentItemSelectable: parentItemSelectable,
-                            itemList: _suggestions,
-                            onSelect: this.handleSelect,
-                            selectedIdList: selectedIdList,
-                            checkbox: checkbox,
-                            hierarchy: this.state.hierarchy,
-                            hierarchic: hierarchic,
-                            hierarchySelected: this.state.hierarchySelected,
-                            translations: translations,
-                            icon: icon,
-                            parentIcon: parentIcon,
-                            hoverIcon: hoverIcon,
-                            checkedIcon: checkedIcon,
-                            allSelected: allSelected,
-                            value: value,
-                            onKeyDown: this.handleKeyDown
-                        })
+                        _react2.default.createElement(
+                            'div',
+                            { ref: function ref(content) {
+                                    return _this3.optionsContent = content;
+                                } },
+                            _react2.default.createElement(_HiSelectableList2.default, (0, _extends3.default)({
+                                type: type,
+                                parentItemSelectable: parentItemSelectable,
+                                itemList: _suggestions,
+                                onSelect: this.handleSelect,
+                                selectedIdList: selectedIdList,
+                                checkbox: checkbox,
+                                hierarchy: this.state.hierarchy,
+                                hierarchic: hierarchic,
+                                hierarchySelected: this.state.hierarchySelected,
+                                translations: translations,
+                                icon: icon,
+                                parentIcon: parentIcon,
+                                hoverIcon: hoverIcon,
+                                checkedIcon: checkedIcon,
+                                allSelected: allSelected,
+                                value: value,
+                                onKeyDown: this.handleKeyDown
+                            }, other))
+                        )
                     )
                 )
             );
@@ -439,7 +507,7 @@ var HiSelect = function (_React$PureComponent) {
                 {
                     className: classes.root,
                     ref: function ref(el) {
-                        _this2.overlay = el;
+                        _this3.overlay = el;
                     }
                 },
                 _react2.default.createElement(
@@ -463,8 +531,10 @@ var HiSelect = function (_React$PureComponent) {
                             onMouseEnter: this.props.onMouseEnter,
                             onMouseLeave: this.props.onMouseLeave,
                             refElement: function refElement(el) {
-                                _this2.selectInputElement = el;
-                            }
+                                _this3.selectInputElement = el;
+                            },
+                            onSubmit: this.props.onSubmit,
+                            onReset: this.props.onReset
                         })
                     ),
                     open && (staticPosition ? _react2.default.createElement(
@@ -501,12 +571,14 @@ HiSelect.defaultProps = {
     parentItemSelectable: false,
     displayAsChip: false,
     dynamic: false,
+    infiniteScroll: false,
     icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     checkedIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxMarked, { style: { width: 20, height: 20 } }),
     translations: {
         all: 'All',
+        min_length: 'Veuillez saisir 3 caractères minimum',
         no_result_match: 'No result match',
         search: 'Search',
         n_items_selected: '%s items selected',
@@ -514,46 +586,42 @@ HiSelect.defaultProps = {
         n_children: '%s items',
         one_child: '%s item'
     },
-    staticPosition: false
+    staticPosition: false,
+    loadingMoreResults: false,
+    hasMore: false
 };
 
 var _initialiseProps = function _initialiseProps() {
-    var _this3 = this;
+    var _this4 = this;
 
     this.handleClick = function () {
-        if (_this3.state.open) {
-            _this3.handleClose();
+        if (_this4.state.open) {
+            _this4.handleClose();
         } else {
-            if (!_this3.props.staticPosition) {
-                //document.body.style.overflow = 'hidden';
-            }
-            _this3.setState({ open: true });
-            var options = _this3.props.options.slice();
-            _this3.handleSuggestions(options);
-
-            if (_this3.props.onClick) {
-                _this3.props.onClick();
+            /*if (!this.props.staticPosition) {
+                // document.body.style.overflow = 'hidden';
+            }*/
+            _this4.setState({ open: true });
+            var options = _this4.props.options.slice();
+            _this4.handleSuggestions(options);
+
+            if (_this4.props.onClick) {
+                _this4.props.onClick();
             }
 
             // Gestion du focus
-            if (_this3.searchField) {
-                // si searchable, focus sur le champs de recherche
-                var searchField = _this3.searchField;
-                setTimeout(function () {
-                    searchField.focus();
-                }, 1);
-            } else if (_this3.overlay) {
+            if (!_this4.props.searchable) {
                 // sinon focus sur le dernier élément selectionné
-                _this3.focusOnSelectedItem();
+                _this4.focusOnSelectedItem();
             }
         }
     };
 
     this.focusOnSelectedItem = function () {
         // On récupère la div parent "overlay"
-        var overlay = (0, _reactDom.findDOMNode)(_this3.overlay);
-        var multiple = _this3.props.multiple;
-        var value = _this3.props.value;
+        var overlay = (0, _reactDom.findDOMNode)(_this4.overlay);
+        var multiple = _this4.props.multiple;
+        var value = _this4.props.value;
         var selectedIdList = Array.isArray(value) ? value : [value];
         setTimeout(function () {
             var focused = false;
@@ -588,10 +656,12 @@ var _initialiseProps = function _initialiseProps() {
         } else if (event.key === 'ArrowUp') {
             nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
         } else if (event.key === 'Tab') {
-            if (!_this3.props.staticPosition) {
-                //document.body.style.overflow = 'auto';
-            }
-            _this3.setState({ open: false });
+            /* if (!this.props.staticPosition) {
+                document.body.style.overflow = 'auto';
+            } */
+            _this4.setState({ open: false });
+        } else if (event.key === 'Escape') {
+            _this4.setState({ open: false });
         }
         if (nextItem) {
             nextItem.focus();
@@ -599,51 +669,53 @@ var _initialiseProps = function _initialiseProps() {
     };
 
     this.handleKeyDownSearch = function (event) {
-        if (_this3.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            _this3.focusOnSelectedItem();
+        if (_this4.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            _this4.focusOnSelectedItem();
+        } else if (event.key === 'Enter' && _this4.props.onSubmit) {
+            _this4.props.onSubmit(event);
         }
     };
 
     this.handleFocus = function () {
-        _this3.setState({ focused: true });
+        _this4.setState({ focused: true });
     };
 
     this.handleBlur = function () {
-        _this3.setState({ focused: false });
+        _this4.setState({ focused: false });
     };
 
     this.handleClose = function () {
-        if (!_this3.props.staticPosition) {
+        if (!_this4.props.staticPosition) {
             //document.body.style.overflow = 'auto';
         }
-        _this3.setState({
+        _this4.setState({
             open: false
         });
 
-        if (_this3.props.onClose) {
-            _this3.props.onClose();
+        if (_this4.props.onClose) {
+            _this4.props.onClose();
         }
-        if (_this3.selectInputElement) {
-            _this3.selectInputElement.focus();
+        if (_this4.selectInputElement) {
+            _this4.selectInputElement.focus();
         }
     };
 
     this.handleClickAway = function (event) {
         // Au clic sur le bouton, on laisse le handleClick fermer le select
-        if (!_this3.selectInputElement.contains(event.target)) {
-            _this3.handleClose(event);
+        if (!_this4.selectInputElement.contains(event.target)) {
+            _this4.handleClose(event);
         }
     };
 
     this.handleSelect = function (event, item) {
-        var _props2 = _this3.props,
+        var _props2 = _this4.props,
             multiple = _props2.multiple,
             value = _props2.value,
             onChange = _props2.onChange,
             options = _props2.options,
             hierarchic = _props2.hierarchic,
             pinnedItem = _props2.pinnedItem;
-        var _state2 = _this3.state,
+        var _state2 = _this4.state,
             hierarchySelected = _state2.hierarchySelected,
             hierarchy = _state2.hierarchy,
             nbOptions = _state2.nbOptions;
@@ -682,7 +754,7 @@ var _initialiseProps = function _initialiseProps() {
                 if (item.hasChildren === true) {
                     // remove all children
                     valueList = valueList.filter(function (val) {
-                        return !_this3.state.hierarchy[item.id].includes(val);
+                        return !_this4.state.hierarchy[item.id].includes(val);
                     });
                     hiSelected[item.id] = [];
                 } else if (item.hasOwnProperty('parentId')) {
@@ -710,8 +782,8 @@ var _initialiseProps = function _initialiseProps() {
                     // Si item parent => on ajoute tous les enfants
                     // Ou on les supprime s'ils sont déjà tous sélectionnés (dans une liste filtrée)
                     var idsInSuggestions = [];
-                    _this3.state.suggestions.forEach(function (suggestion) {
-                        if (_this3.state.hierarchy[item.id].includes(suggestion.id)) {
+                    _this4.state.suggestions.forEach(function (suggestion) {
+                        if (_this4.state.hierarchy[item.id].includes(suggestion.id)) {
                             idsInSuggestions.push(suggestion.id);
                         }
                     });
@@ -735,31 +807,33 @@ var _initialiseProps = function _initialiseProps() {
                         hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
                     }
 
-                    _this3.setState({ hierarchySelected: hiSelected });
+                    _this4.setState({ hierarchySelected: hiSelected });
                 } else if (item.hasOwnProperty('parentId')) {
                     // Si item est un enfant on l'ajoute du tableau associatif des
                     // elmts sélectionnés
                     hiSelected[item.parentId].push(item.id);
                 }
             }
-            _this3.setState({ hierarchySelected: hiSelected });
+            _this4.setState({ hierarchySelected: hiSelected });
             onChange(event, valueList, item);
         } else {
             onChange(event, item.id, item);
-            _this3.handleClose();
+            _this4.handleClose();
         }
     };
 
     this.handleSuggestions = function (suggestions) {
-        var _props3 = _this3.props,
+        var _props3 = _this4.props,
             options = _props3.options,
             hasAll = _props3.hasAll,
             iconAll = _props3.iconAll,
             translations = _props3.translations,
-            multiple = _props3.multiple;
+            multiple = _props3.multiple,
+            showNoResults = _props3.showNoResults,
+            showMinLength = _props3.showMinLength;
 
 
-        if (suggestions.length === 0) {
+        if (suggestions.length === 0 && (showNoResults || showMinLength)) {
             // Handle No Result
             // FIX to remove all item
             suggestions = [];
@@ -769,7 +843,7 @@ var _initialiseProps = function _initialiseProps() {
                 disabled: true,
                 centered: true,
                 checkbox: false,
-                label: translations.no_result_match
+                label: showNoResults ? translations.no_result_match : translations.min_length
             });
         } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
             // Handle 'All'
@@ -788,14 +862,14 @@ var _initialiseProps = function _initialiseProps() {
             }
         }
 
-        _this3.setState({
+        _this4.setState({
             suggestions: suggestions
         });
     };
 
     this.handleRequestDelete = function (evt) {
         evt.stopPropagation();
-        _this3.props.onChange(_this3.props.name, []);
+        _this4.props.onChange(_this4.props.name, []);
     };
 };
 
@@ -838,6 +912,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items sont hiérarchisés
      */
     hierarchic: _propTypes2.default.bool,
+    /**
+     * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+     */
+    hasMore: _propTypes2.default.bool,
     /**
      * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
      */
@@ -854,10 +932,28 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id du select
      */
     id: _propTypes2.default.string,
+    /**
+     * Infinite scroll dans le select dans le cas où il y a beaucoup de résultats à afficher
+     * afin d'éviter un lag du navigateur
+     */
+    infiniteScroll: _propTypes2.default.bool.isRequired,
     /**
      * Ajoute un loader
      */
     loading: _propTypes2.default.bool,
+    /**
+     * Ajoute un loader en bas pour l'infiniteScroll
+     */
+    loadingMoreResults: _propTypes2.default.bool,
+    /**
+     * Fonction de callback appelée lorsque l'utilisateur arrive en bas de la liste des options
+     * afin de charger les nouvelles options
+     *
+     * @param {int} pageNumber
+     */
+    loadMoreResults: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.func, function (props) {
+        return props.hasOwnProperty('infiniteScroll') && props.infiniteScroll === true;
+    }, INFINITESCROLL_ERROR_MESSAGE),
     /**
      * Autorise la sélection de plusieurs valeurs
      */
@@ -885,6 +981,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback appelée lorsque le curseur quitte le champs
      */
     onMouseLeave: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on vide le champs
+     */
+    onReset: _propTypes2.default.func,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
      * A utiliser pour les selects avec des données dynamiques
@@ -893,6 +993,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * @param {string} value
      */
     onSearch: _propTypes2.default.func,
+    /**
+     * Fonction de callback à la pression de la touche "Entrée"
+     */
+    onSubmit: _propTypes2.default.func,
     /**
      * Listes des options du select
      */
@@ -922,6 +1026,14 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
      */
     staticPosition: _propTypes2.default.bool,
+    /**
+     * Permet d'afficher un message si pas assez de caractères
+     */
+    showMinLength: _propTypes2.default.bool,
+    /**
+     * Permet d'afficher un message si aucune options n'est présente
+     */
+    showNoResults: _propTypes2.default.bool,
     /**
      * Traductions (par défaut en anglais)
      */

package/HiSelect/HiSuggestSelect.js

@@ -187,11 +187,12 @@ var HiSuggestSelect = function (_React$PureComponent) {
             var _props = this.props,
                 classes = _props.classes,
                 id = _props.id,
+                loading = _props.loading,
                 showMinLength = _props.showMinLength,
                 showNoResults = _props.showNoResults,
                 onSearch = _props.onSearch,
                 translations = _props.translations,
-                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'id', 'loading', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
             var _state = this.state,
                 focused = _state.focused,
                 options = _state.options;
@@ -199,17 +200,28 @@ var HiSuggestSelect = function (_React$PureComponent) {
 
             var optionsShown = options;
 
-            // If no results match
-            if (options.length === 0 && (showNoResults || showMinLength)) {
+            // If loading
+            if (loading) {
                 optionsShown = [{
-                    id: '_no_result',
-                    type: 'text',
+                    id: '_loading',
+                    type: 'loader',
                     disabled: true,
                     centered: true,
                     checkbox: false,
-                    label: showNoResults ? translations.no_result_match : translations.min_length
+                    label: 'loading'
                 }];
             }
+            // If no results match
+            else if (options.length === 0 && (showNoResults || showMinLength)) {
+                    optionsShown = [{
+                        id: '_no_result',
+                        type: 'text',
+                        disabled: true,
+                        centered: true,
+                        checkbox: false,
+                        label: showNoResults ? translations.no_result_match : translations.min_length
+                    }];
+                }
 
             var open = !!optionsShown.length && focused;
 
@@ -289,6 +301,10 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id de l'élément input
      */
     id: _propTypes2.default.string,
+    /**
+     * Ajoute un loader
+     */
+    loading: _propTypes2.default.bool,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans le champ
      */