@hipay/hipay-material-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/HiSelect/HiSelect.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _keys = require('babel-runtime/core-js/object/keys');
 
 var _keys2 = _interopRequireDefault(_keys);
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -63,10 +63,6 @@ var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
 
 var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
 
-var _Collapse = require('material-ui/transitions/Collapse');
-
-var _Collapse2 = _interopRequireDefault(_Collapse);
-
 var _reactPopper = require('react-popper');
 
 var _mdiMaterialUi = require('mdi-material-ui');
@@ -75,10 +71,6 @@ var _HiSelectableList = require('../HiSelectableList');
 
 var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
 
-var _HiSelectableListItem = require('../HiSelectableList/HiSelectableListItem');
-
-var _HiSelectableListItem2 = _interopRequireDefault(_HiSelectableListItem);
-
 var _HiForm = require('../HiForm');
 
 var _SelectInput = require('./SelectInput');
@@ -157,249 +149,7 @@ var HiSelect = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelect.__proto__ || (0, _getPrototypeOf2.default)(HiSelect)).call(this, props));
 
-        _this.handleClick = function () {
-            document.body.style.overflow = 'hidden';
-            _this.setState({ open: true });
-            var options = _this.props.options.slice();
-            _this.handleSuggestions(options);
-
-            if (_this.props.onClick) {
-                _this.props.onClick();
-            }
-
-            // Gestion du focus
-            if (_this.searchField) {
-                // si searchable, focus sur le champs de recherche
-                var searchField = _this.searchField;
-                setTimeout(function () {
-                    searchField.focus();
-                }, 1);
-            } else if (_this.overlay) {
-                // sinon focus sur le dernier élément selectionné
-                _this.focusOnSelectedItem();
-            }
-        };
-
-        _this.focusOnSelectedItem = function () {
-            // On récupère la div parent "overlay"
-            var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-            var multiple = _this.props.multiple;
-            var value = _this.props.value;
-            var selectedIdList = Array.isArray(value) ? value : [value];
-            setTimeout(function () {
-                var focused = false;
-                // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
-                if (selectedIdList.length > 0) {
-                    var itemSelected = overlay.querySelector('[data-id="' + selectedIdList[selectedIdList.length - 1] + '"]');
-                    if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
-                        itemSelected.parentElement.focus();
-                        focused = true;
-                    }
-                }
-                // Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
-                if (selectedIdList.length === 0 || !focused) {
-                    // On recupère tous les items
-                    var items = overlay.getElementsByTagName('li');
-                    var itemToFocus = items[0];
-                    // Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
-                    if (multiple && selectedIdList.length > 0) {
-                        itemToFocus = items[1];
-                    }
-                    itemToFocus.focus();
-                }
-            }, 1);
-        };
-
-        _this.handleKeyDown = function (event) {
-            var nextItem = void 0;
-            if (event.key === 'ArrowDown') {
-                nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
-            } else if (event.key === 'ArrowUp') {
-                nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
-            } else if (event.key === 'Tab') {
-                document.body.style.overflow = 'auto';
-                _this.setState({ open: false });
-            }
-            if (nextItem) {
-                nextItem.focus();
-            }
-        };
-
-        _this.handleKeyDownSearch = function (event) {
-            if (_this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-                _this.focusOnSelectedItem();
-            }
-        };
-
-        _this.handleFocus = function () {
-            _this.setState({ focused: true });
-        };
-
-        _this.handleBlur = function () {
-            _this.setState({ focused: false });
-        };
-
-        _this.handleClose = function () {
-            document.body.style.overflow = 'auto';
-            _this.setState({
-                open: false
-            });
-
-            if (_this.props.onClose) {
-                _this.props.onClose();
-            }
-        };
-
-        _this.handleSelect = function (event, item) {
-            var _this$props = _this.props,
-                multiple = _this$props.multiple,
-                value = _this$props.value,
-                name = _this$props.name,
-                onChange = _this$props.onChange,
-                options = _this$props.options,
-                hierarchic = _this$props.hierarchic;
-            var _this$state = _this.state,
-                hierarchySelected = _this$state.hierarchySelected,
-                hierarchy = _this$state.hierarchy,
-                nbOptions = _this$state.nbOptions;
-
-            var hiSelected = (0, _extends3.default)({}, hierarchySelected);
-
-            if (multiple) {
-                var valueList = value;
-                if (item.id === '_all') {
-                    if (valueList.length === nbOptions) {
-                        valueList = [];
-                        if (hierarchic) {
-                            // if hierarchic select => empty associative array of selected children
-                            (0, _keys2.default)(hiSelected).forEach(function (key) {
-                                hiSelected[key] = [];
-                            });
-                        }
-                    } else {
-                        options.forEach(function (option) {
-                            if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
-                                valueList.push(option.id);
-                            } else if (option.hasChildren === true) {
-                                // if hierarchic select => fill associative array of selected children
-                                hiSelected[option.id] = hierarchy[option.id];
-                            }
-                        });
-                    }
-                } else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
-                    // item déjà sélectionné => on le déselectionne
-                    if (item.hasChildren !== true) {
-                        valueList = valueList.filter(function (val) {
-                            return val !== item.id;
-                        });
-                    }
-
-                    if (item.hasChildren === true) {
-                        // remove all children
-                        valueList = valueList.filter(function (val) {
-                            return !_this.state.hierarchy[item.id].includes(val);
-                        });
-                        hiSelected[item.id] = [];
-                    } else if (item.hasOwnProperty('parentId')) {
-                        // Si item est un enfant on l'enlève du tableau associatif des
-                        // elmts sélectionnés
-                        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 (item.hasChildren === true) {
-                        // 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 = [];
-                        _this.state.suggestions.forEach(function (suggestion) {
-                            if (_this.state.hierarchy[item.id].includes(suggestion.id)) {
-                                idsInSuggestions.push(suggestion.id);
-                            }
-                        });
-                        // if(hierarchySelected[item.id].length > 0) {}
-                        var allChildrenSuggestionsSelected = true;
-                        idsInSuggestions.forEach(function (id) {
-                            if (!hierarchySelected[item.id].includes(id)) {
-                                allChildrenSuggestionsSelected = false;
-                            }
-                        });
-
-                        if (allChildrenSuggestionsSelected === true) {
-                            // On supprime les enfants car déjà tous sélectionnés
-                            idsInSuggestions.forEach(function (id) {
-                                valueList.splice(valueList.indexOf(id), 1);
-                                hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
-                            });
-                        } else {
-                            // On ajoute tous les enfants filtrés au éléments sélectionnés
-                            valueList = (0, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
-                            hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
-                        }
-
-                        _this.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);
-                    }
-                }
-                _this.setState({ hierarchySelected: hiSelected });
-                onChange(event, valueList);
-            } else {
-                onChange(event, item.id);
-                _this.handleClose();
-            }
-        };
-
-        _this.handleSuggestions = function (suggestions) {
-            var _this$props2 = _this.props,
-                options = _this$props2.options,
-                hasAll = _this$props2.hasAll,
-                iconAll = _this$props2.iconAll,
-                translations = _this$props2.translations,
-                multiple = _this$props2.multiple;
-
-
-            if (suggestions.length === 0) {
-                // Handle No Result
-                // FIX to remove all item
-                suggestions = [];
-                suggestions.push({
-                    id: '_no_result',
-                    type: 'text',
-                    disabled: true,
-                    centered: true,
-                    checkbox: false,
-                    label: translations.no_result_match
-                });
-            } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
-                // Handle 'All'
-                if (suggestions.filter(function (suggestion) {
-                    return suggestion.id === '_all';
-                }).length === 0) {
-                    var allItem = {
-                        id: '_all',
-                        icon: iconAll,
-                        label: translations.all
-                    };
-                    if (iconAll !== false) {
-                        allItem.type = 'icon';
-                    }
-                    suggestions.unshift(allItem);
-                }
-            }
-
-            _this.setState({
-                suggestions: suggestions
-            });
-        };
-
-        _this.handleRequestDelete = function (evt) {
-            evt.stopPropagation();
-            _this.props.onChange(_this.props.name, []);
-        };
+        _initialiseProps.call(_this);
 
         _this.state = {
             open: false,
@@ -411,6 +161,26 @@ var HiSelect = function (_React$PureComponent) {
             dynamic: false
         };
 
+        // Check if value is in options
+        var valueInOptions = false;
+        var val = _this.props.value;
+        // No options provided.
+        if (!_this.props.options.length && !val.length) {
+            valueInOptions = true;
+        }
+        // Check if an option match value prop.
+        _this.props.options.forEach(function (item) {
+            if (!val.length) {
+                valueInOptions = true;
+            }
+            if (!valueInOptions && val.indexOf(item.id) !== -1) {
+                valueInOptions = true;
+            }
+        });
+        if (!valueInOptions) {
+            throw new Error('prop value provided does not match any option.');
+        }
+
         if (props.hierarchic === true && props.options.length > 1) {
             // Construct two associative arrays
             // hierarchy[parentId] => children
@@ -528,7 +298,7 @@ var HiSelect = function (_React$PureComponent) {
 
 
             var display = '';
-            var selectedIdList = Array.isArray(value) ? value : [value];
+            var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
             if (this.state.dynamic && selectedIdList.length === 1) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
@@ -600,7 +370,10 @@ var HiSelect = function (_React$PureComponent) {
                             onFocus: this.handleFocus,
                             onBlur: this.handleBlur,
                             onMouseEnter: this.props.onMouseEnter,
-                            onMouseLeave: this.props.onMouseLeave
+                            onMouseLeave: this.props.onMouseLeave,
+                            refElement: function refElement(el) {
+                                _this2.selectInputElement = el;
+                            }
                         })
                     ),
                     open && _react2.default.createElement(
@@ -688,6 +461,260 @@ HiSelect.defaultProps = {
         one_child: '%s item'
     }
 };
+
+var _initialiseProps = function _initialiseProps() {
+    var _this3 = this;
+
+    this.handleClick = function () {
+        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();
+        }
+
+        // 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) {
+            // sinon focus sur le dernier élément selectionné
+            _this3.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 selectedIdList = Array.isArray(value) ? value : [value];
+        setTimeout(function () {
+            var focused = false;
+            // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
+            if (selectedIdList.length > 0) {
+                var itemSelected = overlay.querySelector('[data-id="' + selectedIdList[selectedIdList.length - 1] + '"]');
+                if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
+                    itemSelected.parentElement.focus();
+                    focused = true;
+                }
+            }
+            // Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
+            if (selectedIdList.length === 0 || !focused) {
+                // On recupère tous les items
+                var items = overlay.getElementsByTagName('li');
+                var itemToFocus = items[0];
+                // Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
+                if (multiple && selectedIdList.length > 0) {
+                    itemToFocus = items[1];
+                }
+                if (itemToFocus) {
+                    itemToFocus.focus();
+                }
+            }
+        }, 1);
+    };
+
+    this.handleKeyDown = function (event) {
+        var nextItem = void 0;
+        if (event.key === 'ArrowDown') {
+            nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
+        } else if (event.key === 'ArrowUp') {
+            nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
+        } else if (event.key === 'Tab') {
+            document.body.style.overflow = 'auto';
+            _this3.setState({ open: false });
+        }
+        if (nextItem) {
+            nextItem.focus();
+        }
+    };
+
+    this.handleKeyDownSearch = function (event) {
+        if (_this3.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            _this3.focusOnSelectedItem();
+        }
+    };
+
+    this.handleFocus = function () {
+        _this3.setState({ focused: true });
+    };
+
+    this.handleBlur = function () {
+        _this3.setState({ focused: false });
+    };
+
+    this.handleClose = function () {
+        document.body.style.overflow = 'auto';
+        _this3.setState({
+            open: false
+        });
+
+        if (_this3.props.onClose) {
+            _this3.props.onClose();
+        }
+        if (_this3.selectInputElement) {
+            _this3.selectInputElement.focus();
+        }
+    };
+
+    this.handleSelect = function (event, item) {
+        var _props2 = _this3.props,
+            multiple = _props2.multiple,
+            value = _props2.value,
+            name = _props2.name,
+            onChange = _props2.onChange,
+            options = _props2.options,
+            hierarchic = _props2.hierarchic;
+        var _state2 = _this3.state,
+            hierarchySelected = _state2.hierarchySelected,
+            hierarchy = _state2.hierarchy,
+            nbOptions = _state2.nbOptions;
+
+        var hiSelected = (0, _extends3.default)({}, hierarchySelected);
+
+        if (multiple) {
+            var valueList = value;
+            if (item.id === '_all') {
+                if (valueList.length === nbOptions) {
+                    valueList = [];
+                    if (hierarchic) {
+                        // if hierarchic select => empty associative array of selected children
+                        (0, _keys2.default)(hiSelected).forEach(function (key) {
+                            hiSelected[key] = [];
+                        });
+                    }
+                } else {
+                    options.forEach(function (option) {
+                        if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
+                            valueList.push(option.id);
+                        } else if (option.hasChildren === true) {
+                            // if hierarchic select => fill associative array of selected children
+                            hiSelected[option.id] = hierarchy[option.id];
+                        }
+                    });
+                }
+            } else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
+                // item déjà sélectionné => on le déselectionne
+                if (item.hasChildren !== true) {
+                    valueList = valueList.filter(function (val) {
+                        return val !== item.id;
+                    });
+                }
+
+                if (item.hasChildren === true) {
+                    // remove all children
+                    valueList = valueList.filter(function (val) {
+                        return !_this3.state.hierarchy[item.id].includes(val);
+                    });
+                    hiSelected[item.id] = [];
+                } else if (item.hasOwnProperty('parentId')) {
+                    // Si item est un enfant on l'enlève du tableau associatif des
+                    // elmts sélectionnés
+                    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 (item.hasChildren === true) {
+                    // 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)) {
+                            idsInSuggestions.push(suggestion.id);
+                        }
+                    });
+                    // if(hierarchySelected[item.id].length > 0) {}
+                    var allChildrenSuggestionsSelected = true;
+                    idsInSuggestions.forEach(function (id) {
+                        if (!hierarchySelected[item.id].includes(id)) {
+                            allChildrenSuggestionsSelected = false;
+                        }
+                    });
+
+                    if (allChildrenSuggestionsSelected === true) {
+                        // On supprime les enfants car déjà tous sélectionnés
+                        idsInSuggestions.forEach(function (id) {
+                            valueList.splice(valueList.indexOf(id), 1);
+                            hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
+                        });
+                    } else {
+                        // On ajoute tous les enfants filtrés au éléments sélectionnés
+                        valueList = (0, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
+                        hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
+                    }
+
+                    _this3.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 });
+            onChange(event, valueList);
+        } else {
+            onChange(event, item.id);
+            _this3.handleClose();
+        }
+    };
+
+    this.handleSuggestions = function (suggestions) {
+        var _props3 = _this3.props,
+            options = _props3.options,
+            hasAll = _props3.hasAll,
+            iconAll = _props3.iconAll,
+            translations = _props3.translations,
+            multiple = _props3.multiple;
+
+
+        if (suggestions.length === 0) {
+            // Handle No Result
+            // FIX to remove all item
+            suggestions = [];
+            suggestions.push({
+                id: '_no_result',
+                type: 'text',
+                disabled: true,
+                centered: true,
+                checkbox: false,
+                label: translations.no_result_match
+            });
+        } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
+            // Handle 'All'
+            if (suggestions.filter(function (suggestion) {
+                return suggestion.id === '_all';
+            }).length === 0) {
+                var allItem = {
+                    id: '_all',
+                    icon: iconAll,
+                    label: translations.all
+                };
+                if (iconAll !== false) {
+                    allItem.type = 'icon';
+                }
+                suggestions.unshift(allItem);
+            }
+        }
+
+        _this3.setState({
+            suggestions: suggestions
+        });
+    };
+
+    this.handleRequestDelete = function (evt) {
+        evt.stopPropagation();
+        _this3.props.onChange(_this3.props.name, []);
+    };
+};
+
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Affiche une checkbox pour chaque éléments, par défaut si options est nested
@@ -768,6 +795,7 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
      * A utiliser pour les selects avec des données dynamiques
      *
+     * @param {object} event
      * @param {string} value
      */
     onSearch: _propTypes2.default.func,

package/HiSelect/HiSelectField.js

@@ -84,7 +84,8 @@ var HiSelectField = function (_React$PureComponent) {
           checkbox = _props.checkbox,
           searchable = _props.searchable,
           translations = _props.translations,
-          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations']);
+          className = _props.className,
+          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations', 'className']);
 
 
       return _react2.default.createElement(
@@ -97,7 +98,8 @@ var HiSelectField = function (_React$PureComponent) {
           error: error,
           errorText: errorText,
           helperText: helperText,
-          helperIcon: helperIcon
+          helperIcon: helperIcon,
+          className: className
         },
         _react2.default.createElement(_HiSelect2.default, (0, _extends3.default)({
           id: id,
@@ -110,10 +112,6 @@ var HiSelectField = function (_React$PureComponent) {
           checkbox: checkbox,
           searchable: searchable,
           translations: translations,
-          onClick: this.handleClick,
-          onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave,
-          onClose: this.handleClose,
           disabled: disabled,
           error: error
         }, others))
@@ -124,6 +122,10 @@ var HiSelectField = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des styles
+   */
+  className: _propTypes2.default.string,
   /**
    * Si `true`, l'input sera inactif.
    */