@hipay/hipay-material-ui 1.0.0-beta.20 → 1.0.0-beta.21

package/HiSelect/HiSelect.js

@@ -13,6 +13,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -303,7 +307,8 @@ var HiSelect = function (_React$PureComponent) {
                 hierarchic = _props.hierarchic,
                 id = _props.id,
                 placeholder = _props.placeholder,
-                staticPosition = _props.staticPosition;
+                staticPosition = _props.staticPosition,
+                pinnedItem = _props.pinnedItem;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
@@ -313,6 +318,11 @@ var HiSelect = function (_React$PureComponent) {
             var display = '';
             var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
+            var _suggestions = [].concat((0, _toConsumableArray3.default)(suggestions));
+            if (pinnedItem) {
+                _suggestions = [pinnedItem].concat((0, _toConsumableArray3.default)(suggestions));
+            }
+
             if (this.state.dynamic && selectedIdList.length === 1) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
             } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
@@ -321,9 +331,13 @@ var HiSelect = function (_React$PureComponent) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
                 if (type !== 'icon') {
-                    display = options.find(function (o) {
+                    var item = options.find(function (o) {
                         return o.id === selectedIdList[0];
-                    }).label;
+                    });
+                    if (!item && pinnedItem) {
+                        item = pinnedItem;
+                    }
+                    display = item.label;
                 } else {
                     var optionSelected = options.find(function (o) {
                         return o.id === selectedIdList[0];
@@ -380,7 +394,7 @@ var HiSelect = function (_React$PureComponent) {
                         _react2.default.createElement(_HiSelectableList2.default, {
                             type: type,
                             parentItemSelectable: parentItemSelectable,
-                            itemList: suggestions,
+                            itemList: _suggestions,
                             onSelect: this.handleSelect,
                             selectedIdList: selectedIdList,
                             checkbox: checkbox,
@@ -490,7 +504,7 @@ var _initialiseProps = function _initialiseProps() {
             _this3.handleClose();
         } else {
             if (!_this3.props.staticPosition) {
-                document.body.style.overflow = 'hidden';
+                //document.body.style.overflow = 'hidden';
             }
             _this3.setState({ open: true });
             var options = _this3.props.options.slice();
@@ -554,7 +568,7 @@ var _initialiseProps = function _initialiseProps() {
             nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
         } else if (event.key === 'Tab') {
             if (!_this3.props.staticPosition) {
-                document.body.style.overflow = 'auto';
+                //document.body.style.overflow = 'auto';
             }
             _this3.setState({ open: false });
         }
@@ -579,7 +593,7 @@ var _initialiseProps = function _initialiseProps() {
 
     this.handleClose = function () {
         if (!_this3.props.staticPosition) {
-            document.body.style.overflow = 'auto';
+            //document.body.style.overflow = 'auto';
         }
         _this3.setState({
             open: false
@@ -604,10 +618,10 @@ var _initialiseProps = function _initialiseProps() {
         var _props2 = _this3.props,
             multiple = _props2.multiple,
             value = _props2.value,
-            name = _props2.name,
             onChange = _props2.onChange,
             options = _props2.options,
-            hierarchic = _props2.hierarchic;
+            hierarchic = _props2.hierarchic,
+            pinnedItem = _props2.pinnedItem;
         var _state2 = _this3.state,
             hierarchySelected = _state2.hierarchySelected,
             hierarchy = _state2.hierarchy,
@@ -656,8 +670,20 @@ var _initialiseProps = function _initialiseProps() {
                     hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
                 }
             } else {
-                // item non sélectionné => on le sélectionne
-                if (item.hasChildren !== true) valueList.push(item.id);
+                if (pinnedItem && item.id === pinnedItem.id) {
+                    (0, _keys2.default)(hiSelected).map(function (parentItemId) {
+                        hiSelected[parentItemId] = [];
+                        return true;
+                    });
+                    valueList = [item.id];
+                } else {
+                    // item non sélectionné => on le sélectionne
+                    if (item.hasChildren !== true) valueList.push(item.id);
+
+                    if (pinnedItem && valueList.includes(pinnedItem.id)) {
+                        valueList.splice(valueList.indexOf(pinnedItem.id), 1);
+                    }
+                }
 
                 if (item.hasChildren === true) {
                     // Si item parent => on ajoute tous les enfants
@@ -848,6 +874,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
+    /**
+     * Item épinglé en début de liste
+     */
+    pinnedItem: _propTypes2.default.object,
     /**
      * Placeholder affiché lorsque le select est fermé
      * Surcharge le placeholder par défaut

package/HiSelect/HiSuggestSelect.js

@@ -186,15 +186,31 @@ var HiSuggestSelect = function (_React$PureComponent) {
 
             var _props = this.props,
                 classes = _props.classes,
-                translations = _props.translations,
                 id = _props.id,
+                showMinLength = _props.showMinLength,
+                showNoResults = _props.showNoResults,
                 onSearch = _props.onSearch,
-                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'translations', 'id', 'onSearch']);
+                translations = _props.translations,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
             var _state = this.state,
                 focused = _state.focused,
                 options = _state.options;
 
-            var open = !!options.length && focused;
+
+            var optionsShown = options;
+
+            // If no results match
+            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;
 
             return _react2.default.createElement(
                 'div',
@@ -211,6 +227,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         _reactPopper.Target,
                         null,
                         _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({}, otherProps, {
+
                             inputId: id,
                             focused: focused,
                             inputRef: function inputRef(input) {
@@ -236,7 +253,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                                 _Paper2.default,
                                 { className: classes.paper },
                                 _react2.default.createElement(_HiSelectableList2.default, {
-                                    itemList: options,
+                                    itemList: optionsShown,
                                     selectedIdList: [],
                                     checkbox: false,
                                     onSelect: this.handleSelect,
@@ -254,7 +271,12 @@ var HiSuggestSelect = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiSuggestSelect.defaultProps = {
-    translations: {},
+    showMinLength: false,
+    showNoResults: false,
+    translations: {
+        no_result_match: 'No result match',
+        min_length: 'Veuillez saisir 3 caractères minimum'
+    },
     options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -278,6 +300,14 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Liste de suggestions.
      */
     options: _propTypes2.default.array,
+    /**
+     * 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/HiSelectableList/HiSelectableListItem.js

@@ -377,51 +377,44 @@ var HiSelectableListItem = function (_React$Component) {
                 listItemProps.button = false;
             }
 
-            var iconAll = void 0;
-            if (item.id === '_all' && item.icon) {
-                iconAll = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
-            }
-
             // calcul du padding left
             var paddingLeft = 0;
 
             if (leftPadding) {
                 paddingLeft = leftPadding;
-            } else {
-                // Si pas de hiérarchie, padding de 8px
-                if (!hierarchic) {
-                    if (!effectiveCheckbox) {
-                        paddingLeft = 8;
+            } else if (!hierarchic) {
+                // Si pas de hiérarchie et sans checkbox, padding de 8px
+                if (!effectiveCheckbox) {
+                    paddingLeft = 8;
+                }
+            } else if (selectable) {
+                // Si item selectionnable
+                // Si parent selectionnable
+                if (parentItemSelectable) {
+                    // Si l'item contient une checkbox
+                    if (effectiveCheckbox) {
+                        paddingLeft = 16 * level;
+                    } else {
+                        paddingLeft = 16 * (level + 1);
                     }
-                } else if (selectable) {
-                    // Si item selectionnable
-                    // Si parent selectionnable
-                    if (parentItemSelectable) {
-                        // Si l'item contient une checkbox
-                        if (effectiveCheckbox) {
-                            paddingLeft = 16 * level;
-                        } else {
-                            paddingLeft = 16 * (level + 1);
-                        }
-                    } else if (level > 0) {
-                        if (effectiveCheckbox) {
-                            paddingLeft = 16 * (level - 1);
-                        } else {
-                            paddingLeft = 16 * level;
-                        }
-                    } else if (!effectiveCheckbox) {
-                        if (item.id === '_all') {
-                            paddingLeft = 16;
-                        } else {
-                            paddingLeft = 16 * level;
-                        }
+                } else if (level > 0) {
+                    if (effectiveCheckbox) {
+                        paddingLeft = 16 * (level - 1);
+                    } else {
+                        paddingLeft = 16 * level;
                     }
-                } else {
-                    paddingLeft = 16; // Padding de 16 par défaut
-                    if (level > 0) {
+                } else if (!effectiveCheckbox) {
+                    if (item.id === '_all') {
+                        paddingLeft = 16;
+                    } else {
                         paddingLeft = 16 * level;
                     }
                 }
+            } else {
+                paddingLeft = 16; // Padding de 16 par défaut
+                if (level > 0) {
+                    paddingLeft = 16 * level;
+                }
             }
 
             listItemProps.style = { paddingLeft: paddingLeft + 'px' };
@@ -431,8 +424,8 @@ var HiSelectableListItem = function (_React$Component) {
                 iconDisplay = hoverIcon;
             } else if (item.hasChildren) {
                 iconDisplay = parentIcon;
-            } else if (item.id === '_all') {
-                iconDisplay = iconAll;
+            } else if (item.type === 'icon' && item.icon) {
+                iconDisplay = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
             }
 
             return _react2.default.createElement(

package/HiTopBar/HiTopBar.js

@@ -187,7 +187,7 @@ var _ref = _react2.default.createElement(_HiIconBuilder2.default, { icon: 'fa-be
 
 var _ref2 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
-var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDoubleDown, null);
+var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDown, null);
 
 var _ref4 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
@@ -235,6 +235,9 @@ var HiTopBar = function (_React$Component) {
     }, {
         key: 'handleCollapse',
         value: function handleCollapse() {
+            if (this.props.onCollapse) {
+                this.props.onCollapse(!this.state.collapsed);
+            }
             this.setState({ collapsed: !this.state.collapsed });
         }
     }, {
@@ -362,7 +365,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.handleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronUp, { onClick: this.handleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -498,7 +501,7 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     hasSettings: _propTypes2.default.bool,
     /**
-     * La TopBar peut être cachée vie le bouton double chevron
+     * La TopBar peut être cachée vie le bouton chevron
      */
     hideable: _propTypes2.default.bool,
     /**
@@ -525,6 +528,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur le bouton "Settings" du menu
      */
     onClickSettings: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur le bouton chevron
+     */
+    onCollapse: _propTypes2.default.func,
     /**
      * Positionement de la topBar. The behavior of the different options is described
      * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).

package/es/HiSelect/HiSelect.js

@@ -216,7 +216,8 @@ class HiSelect extends React.PureComponent {
             hierarchic,
             id,
             placeholder,
-            staticPosition
+            staticPosition,
+            pinnedItem
         } = this.props;
 
         const { open, suggestions, focused } = this.state;
@@ -224,6 +225,11 @@ class HiSelect extends React.PureComponent {
         let display = '';
         const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
+        let _suggestions = [...suggestions];
+        if (pinnedItem) {
+            _suggestions = [pinnedItem, ...suggestions];
+        }
+
         if (this.state.dynamic && selectedIdList.length === 1) {
             display = translations.one_item_selected.replace('%s', selectedIdList.length);
         } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
@@ -232,7 +238,11 @@ class HiSelect extends React.PureComponent {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
             if (type !== 'icon') {
-                display = options.find(o => o.id === selectedIdList[0]).label;
+                let item = options.find(o => o.id === selectedIdList[0]);
+                if (!item && pinnedItem) {
+                    item = pinnedItem;
+                }
+                display = item.label;
             } else {
                 const optionSelected = options.find(o => o.id === selectedIdList[0]);
                 display = React.createElement(
@@ -289,7 +299,7 @@ class HiSelect extends React.PureComponent {
                     React.createElement(HiSelectableList, {
                         type: type,
                         parentItemSelectable: parentItemSelectable,
-                        itemList: suggestions,
+                        itemList: _suggestions,
                         onSelect: this.handleSelect,
                         selectedIdList: selectedIdList,
                         checkbox: checkbox,
@@ -395,7 +405,7 @@ var _initialiseProps = function () {
             this.handleClose();
         } else {
             if (!this.props.staticPosition) {
-                document.body.style.overflow = 'hidden';
+                //document.body.style.overflow = 'hidden';
             }
             this.setState({ open: true });
             const options = this.props.options.slice();
@@ -459,7 +469,7 @@ var _initialiseProps = function () {
             nextItem = getNextItemSelectable(document.activeElement, 'up');
         } else if (event.key === 'Tab') {
             if (!this.props.staticPosition) {
-                document.body.style.overflow = 'auto';
+                //document.body.style.overflow = 'auto';
             }
             this.setState({ open: false });
         }
@@ -484,7 +494,7 @@ var _initialiseProps = function () {
 
     this.handleClose = () => {
         if (!this.props.staticPosition) {
-            document.body.style.overflow = 'auto';
+            //document.body.style.overflow = 'auto';
         }
         this.setState({
             open: false
@@ -506,7 +516,7 @@ var _initialiseProps = function () {
     };
 
     this.handleSelect = (event, item) => {
-        const { multiple, value, name, onChange, options, hierarchic } = this.props;
+        const { multiple, value, onChange, options, hierarchic, pinnedItem } = this.props;
         const { hierarchySelected, hierarchy, nbOptions } = this.state;
         const hiSelected = _extends({}, hierarchySelected);
 
@@ -551,8 +561,20 @@ var _initialiseProps = function () {
                     hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
                 }
             } else {
-                // item non sélectionné => on le sélectionne
-                if (item.hasChildren !== true) valueList.push(item.id);
+                if (pinnedItem && item.id === pinnedItem.id) {
+                    _Object$keys(hiSelected).map(parentItemId => {
+                        hiSelected[parentItemId] = [];
+                        return true;
+                    });
+                    valueList = [item.id];
+                } else {
+                    // item non sélectionné => on le sélectionne
+                    if (item.hasChildren !== true) valueList.push(item.id);
+
+                    if (pinnedItem && valueList.includes(pinnedItem.id)) {
+                        valueList.splice(valueList.indexOf(pinnedItem.id), 1);
+                    }
+                }
 
                 if (item.hasChildren === true) {
                     // Si item parent => on ajoute tous les enfants
@@ -735,6 +757,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: PropTypes.bool,
+    /**
+     * Item épinglé en début de liste
+     */
+    pinnedItem: PropTypes.object,
     /**
      * Placeholder affiché lorsque le select est fermé
      * Surcharge le placeholder par défaut

package/es/HiSelect/HiSuggestSelect.js

@@ -116,11 +116,25 @@ class HiSuggestSelect extends React.PureComponent {
 
     render() {
         const _props = this.props,
-              { classes, translations, id, onSearch } = _props,
-              otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
+              { classes, id, showMinLength, showNoResults, onSearch, translations } = _props,
+              otherProps = _objectWithoutProperties(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
 
         const { focused, options } = this.state;
-        const open = !!options.length && focused;
+
+        let optionsShown = options;
+
+        // If no results match
+        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
+            }];
+        }
+        const open = !!optionsShown.length && focused;
 
         return React.createElement(
             'div',
@@ -137,6 +151,7 @@ class HiSuggestSelect extends React.PureComponent {
                     Target,
                     null,
                     React.createElement(HiInput, _extends({}, otherProps, {
+
                         inputId: id,
                         focused: focused,
                         inputRef: input => {
@@ -162,7 +177,7 @@ class HiSuggestSelect extends React.PureComponent {
                             Paper,
                             { className: classes.paper },
                             React.createElement(HiSelectableList, {
-                                itemList: options,
+                                itemList: optionsShown,
                                 selectedIdList: [],
                                 checkbox: false,
                                 onSelect: this.handleSelect,
@@ -178,7 +193,12 @@ class HiSuggestSelect extends React.PureComponent {
 }
 
 HiSuggestSelect.defaultProps = {
-    translations: {},
+    showMinLength: false,
+    showNoResults: false,
+    translations: {
+        no_result_match: 'No result match',
+        min_length: 'Veuillez saisir 3 caractères minimum'
+    },
     options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -202,6 +222,14 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Liste de suggestions.
      */
     options: PropTypes.array,
+    /**
+     * Permet d'afficher un message si pas assez de caractères
+     */
+    showMinLength: PropTypes.bool,
+    /**
+     * Permet d'afficher un message si aucune options n'est présente
+     */
+    showNoResults: PropTypes.bool,
     /**
      * Traductions (par défaut en anglais)
      */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -295,51 +295,44 @@ class HiSelectableListItem extends React.Component {
             listItemProps.button = false;
         }
 
-        let iconAll;
-        if (item.id === '_all' && item.icon) {
-            iconAll = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
-        }
-
         // calcul du padding left
         let paddingLeft = 0;
 
         if (leftPadding) {
             paddingLeft = leftPadding;
-        } else {
-            // Si pas de hiérarchie, padding de 8px
-            if (!hierarchic) {
-                if (!effectiveCheckbox) {
-                    paddingLeft = 8;
+        } else if (!hierarchic) {
+            // Si pas de hiérarchie et sans checkbox, padding de 8px
+            if (!effectiveCheckbox) {
+                paddingLeft = 8;
+            }
+        } else if (selectable) {
+            // Si item selectionnable
+            // Si parent selectionnable
+            if (parentItemSelectable) {
+                // Si l'item contient une checkbox
+                if (effectiveCheckbox) {
+                    paddingLeft = 16 * level;
+                } else {
+                    paddingLeft = 16 * (level + 1);
                 }
-            } else if (selectable) {
-                // Si item selectionnable
-                // Si parent selectionnable
-                if (parentItemSelectable) {
-                    // Si l'item contient une checkbox
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * level;
-                    } else {
-                        paddingLeft = 16 * (level + 1);
-                    }
-                } else if (level > 0) {
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * (level - 1);
-                    } else {
-                        paddingLeft = 16 * level;
-                    }
-                } else if (!effectiveCheckbox) {
-                    if (item.id === '_all') {
-                        paddingLeft = 16;
-                    } else {
-                        paddingLeft = 16 * level;
-                    }
+            } else if (level > 0) {
+                if (effectiveCheckbox) {
+                    paddingLeft = 16 * (level - 1);
+                } else {
+                    paddingLeft = 16 * level;
                 }
-            } else {
-                paddingLeft = 16; // Padding de 16 par défaut
-                if (level > 0) {
+            } else if (!effectiveCheckbox) {
+                if (item.id === '_all') {
+                    paddingLeft = 16;
+                } else {
                     paddingLeft = 16 * level;
                 }
             }
+        } else {
+            paddingLeft = 16; // Padding de 16 par défaut
+            if (level > 0) {
+                paddingLeft = 16 * level;
+            }
         }
 
         listItemProps.style = { paddingLeft: `${paddingLeft}px` };
@@ -349,8 +342,8 @@ class HiSelectableListItem extends React.Component {
             iconDisplay = hoverIcon;
         } else if (item.hasChildren) {
             iconDisplay = parentIcon;
-        } else if (item.id === '_all') {
-            iconDisplay = iconAll;
+        } else if (item.type === 'icon' && item.icon) {
+            iconDisplay = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
         }
 
         return React.createElement(