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

package/HiSelect/HiSuggestSelect.js

@@ -106,7 +106,6 @@ var HiSuggestSelect = function (_React$PureComponent) {
             if (textInput) {
                 setTimeout(function () {
                     textInput.focus();
-                    textInput.scrollLeft = textInput.scrollWidth;
                 }, 1);
             }
         };
@@ -139,8 +138,6 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         items[0].focus();
                     }
                 }, 1);
-            } else if (event.key === 'Escape') {
-                _this.setState({ options: [] });
             }
         };
 
@@ -152,7 +149,6 @@ var HiSuggestSelect = function (_React$PureComponent) {
         _this.handleSelect = _this.handleSelect.bind(_this);
         _this.handleBlur = _this.handleBlur.bind(_this);
         _this.handleFocus = _this.handleFocus.bind(_this);
-        _this.getInputElement = _this.getInputElement.bind(_this);
         return _this;
     }
 
@@ -161,14 +157,6 @@ var HiSuggestSelect = function (_React$PureComponent) {
         value: function componentWillReceiveProps(nextProps) {
             this.setState({ options: nextProps.options });
         }
-    }, {
-        key: 'getInputElement',
-        value: function getInputElement(el) {
-            this.textInput = el;
-            if (this.props.inputRef) {
-                this.props.inputRef(this.textInput);
-            }
-        }
 
         // Key down on list items
 
@@ -196,44 +184,15 @@ var HiSuggestSelect = function (_React$PureComponent) {
 
             var _props = this.props,
                 classes = _props.classes,
+                translations = _props.translations,
                 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', 'loading', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'translations', 'id', 'onSearch']);
             var _state = this.state,
                 focused = _state.focused,
                 options = _state.options;
 
-
-            var optionsShown = options;
-
-            // If loading
-            if (loading) {
-                optionsShown = [{
-                    id: '_loading',
-                    type: 'loader',
-                    disabled: true,
-                    centered: true,
-                    checkbox: false,
-                    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;
+            var open = !!options.length && focused;
 
             return _react2.default.createElement(
                 'div',
@@ -250,10 +209,11 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         _reactPopper.Target,
                         null,
                         _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({}, otherProps, {
-
                             inputId: id,
                             focused: focused,
-                            inputRef: this.getInputElement,
+                            inputRef: function inputRef(input) {
+                                _this2.textInput = input;
+                            },
                             onChange: onSearch,
                             onKeyDown: this.handleKeyDownSearch,
                             onBlur: this.handleBlur,
@@ -274,7 +234,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                                 _Paper2.default,
                                 { className: classes.paper },
                                 _react2.default.createElement(_HiSelectableList2.default, {
-                                    itemList: optionsShown,
+                                    itemList: options,
                                     selectedIdList: [],
                                     checkbox: false,
                                     onSelect: this.handleSelect,
@@ -292,12 +252,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiSuggestSelect.defaultProps = {
-    showMinLength: false,
-    showNoResults: false,
-    translations: {
-        no_result_match: 'Aucun résultat correspondant',
-        min_length: 'Veuillez saisir 3 caractères minimum'
-    },
+    translations: {},
     options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -309,14 +264,6 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id de l'élément input
      */
     id: _propTypes2.default.string,
-    /**
-     * Passe une ref callback au composant input
-     */
-    inputRef: _propTypes2.default.func,
-    /**
-     * Ajoute un loader
-     */
-    loading: _propTypes2.default.bool,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans le champ
      */
@@ -329,14 +276,6 @@ 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/HiSelect/SelectInput.js

@@ -45,32 +45,20 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _keycode = require('keycode');
+var _ArrowDropDown = require('../svg-icons/ArrowDropDown');
 
-var _keycode2 = _interopRequireDefault(_keycode);
+var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
 
 var _Icon = require('material-ui/Icon');
 
 var _Icon2 = _interopRequireDefault(_Icon);
 
-var _IconButton = require('material-ui/IconButton');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
+var _styles = require('../styles');
 
 var _ButtonBase = require('material-ui/ButtonBase');
 
 var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
 
-var _ArrowDropDown = require('../svg-icons/ArrowDropDown');
-
-var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
-
-var _styles = require('../styles');
-
-var _HiIconBuilder = require('../utils/HiIconBuilder');
-
-var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -79,10 +67,8 @@ var styles = exports.styles = function styles(theme) {
             width: '100%',
             height: 40,
             maxWidth: 500,
-            display: 'flex',
-            justifyContent: 'center',
-            padding: 8,
-            cursor: 'pointer'
+            justifyContent: 'flex-start',
+            padding: 8
         },
         underline: {
             '&:before': {
@@ -152,20 +138,21 @@ var styles = exports.styles = function styles(theme) {
             backgroundColor: theme.palette.background3
         },
         error: {},
-        eraseButton: {
-            height: 24,
-            width: 24,
-            display: 'inline-block'
-        },
         label: (0, _extends3.default)({
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
+            paddingRight: 16
         }, theme.typography.body1, {
             display: 'inline-flex',
             width: '100%'
         }),
         icon: {
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            right: 0,
+            height: 40,
             transition: theme.transitions.create(['opacity', 'transform'], {
                 duration: theme.transitions.duration.shorter
             })
@@ -194,33 +181,21 @@ var SelectInput = function (_React$PureComponent) {
         var _this = (0, _possibleConstructorReturn3.default)(this, (SelectInput.__proto__ || (0, _getPrototypeOf2.default)(SelectInput)).call(this, props));
 
         _this.handleKeyDown = function (event) {
-            var key = (0, _keycode2.default)(event);
-            if (['up', 'down', 'space'].includes(key)) {
-                event.preventDefault();
+            if (event.key === 'ArrowDown') {
+                _this.props.onClick();
+            } else if (event.key === 'ArrowUp') {
                 _this.props.onClick();
-            } else if (key === 'enter' && _this.props.onSubmit) {
-                event.preventDefault();
-                _this.props.onSubmit(event);
-            }
-        };
-
-        _this.handleClick = function (event) {
-            if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
-                _this.props.onClick(event);
             }
         };
 
         _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-        _this.handleClick = _this.handleClick.bind(_this);
         return _this;
     }
 
     (0, _createClass3.default)(SelectInput, [{
         key: 'render',
         value: function render() {
-            var _classNames,
-                _classNames2,
-                _this2 = this;
+            var _classNames, _classNames2;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -232,9 +207,7 @@ var SelectInput = function (_React$PureComponent) {
                 focused = _props.focused,
                 error = _props.error,
                 id = _props.id,
-                refElement = _props.refElement,
-                onReset = _props.onReset,
-                theme = _props.theme;
+                refElement = _props.refElement;
 
             // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
@@ -271,7 +244,7 @@ var SelectInput = function (_React$PureComponent) {
                 {
                     id: id,
                     className: rootClass,
-                    onClick: this.handleClick,
+                    onClick: onClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
@@ -287,20 +260,6 @@ var SelectInput = function (_React$PureComponent) {
                     { className: classes.label },
                     value
                 ),
-                onReset && _react2.default.createElement(
-                    'div',
-                    {
-                        ref: function ref(el) {
-                            _this2.resetIcon = el;
-                        }
-                    },
-                    _react2.default.createElement(_HiIconBuilder2.default, {
-                        icon: 'close',
-                        size: 24,
-                        color: theme.palette.neutral.normal,
-                        onClick: onReset
-                    })
-                ),
                 _react2.default.createElement(
                     _Icon2.default,
                     { classes: { root: iconClass } },
@@ -364,14 +323,6 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée lorsqu'on vide le champs
-     */
-    onReset: _propTypes2.default.func,
-    /**
-     * Fonction de callback à la pression de la touche "Entrée"
-     */
-    onSubmit: _propTypes2.default.func,
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
@@ -385,4 +336,4 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node])
 } : {};
-exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiSelectInput', withTheme: true })(SelectInput);
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/HiSelectableList/HiSelectableList.js

@@ -99,8 +99,7 @@ var HiSelectableList = function (_React$PureComponent) {
                 allSelected = _props.allSelected,
                 checkbox = _props.checkbox,
                 hierarchic = _props.hierarchic,
-                disabledIds = _props.disabledIds,
-                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
+                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
 
 
             var parents = [];
@@ -112,61 +111,58 @@ var HiSelectableList = function (_React$PureComponent) {
                     _List2.default,
                     { className: classes.root, onKeyDown: this.props.onKeyDown },
                     itemList.map(function (item) {
-                        if (item.displayed !== false) {
-                            /**
-                             * Calcul du level de l'item
-                             */
-                            if (hierarchic) {
-                                // On stocke l'id des parents dans un tableau
-                                if (item.parentId && !parents.includes(item.parentId)) {
-                                    parents.push(item.parentId);
-                                } else if (item.parentId && parents.includes(item.parentId)) {
-                                    // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
-                                    // Et si le parentId n'est pas le dernier inseré
-                                    if (item.parentId !== parents[parents.length - 1]) {
-                                        // On est donc redescendu d'un niveau
-                                        // donc on supprime le dernier parent
-                                        parents.pop();
-                                    }
-                                } else if (!item.parentId && parents.length > 0) {
-                                    // Si l'item n'a pas de parent et que le tableau des parent
-                                    // n'est pas vide => on le réinitialise
-                                    parents = [];
+                        /**
+                         * Calcul du level de l'item
+                         */
+                        if (hierarchic) {
+                            // On stocke l'id des parents dans un tableau
+                            if (item.parentId && !parents.includes(item.parentId)) {
+                                parents.push(item.parentId);
+                            } else if (item.parentId && parents.includes(item.parentId)) {
+                                // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
+                                // Et si le parentId n'est pas le dernier inseré
+                                if (item.parentId !== parents[parents.length - 1]) {
+                                    // On est donc redescendu d'un niveau
+                                    // donc on supprime le dernier parent
+                                    parents.pop();
                                 }
+                            } else if (!item.parentId && parents.length > 0) {
+                                // Si l'item n'a pas de parent et que le tableau des parent
+                                // n'est pas vide => on le réinitialise
+                                parents = [];
                             }
+                        }
 
-                            /**
-                             * L'élément est-il selectionné ?
-                             */
-                            var selected = false;
-                            if (item.id === '_all') {
-                                selected = allSelected;
-                            } else if (!item.hasChildren) {
-                                selected = selectedIdList.includes(item.id);
-                            } else if (hierarchic && parentItemSelectable) {
-                                selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
-                            }
-
-                            return _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
-                                key: item.id,
-                                item: item,
-                                selected: selected,
-                                indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
-                                onSelect: onSelect,
-                                hierarchySelected: hierarchySelected,
-                                parentItemSelectable: parentItemSelectable,
-                                nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
-                                hierarchic: hierarchic,
-                                translations: translations,
-                                icon: icon,
-                                parentIcon: parentIcon,
-                                hoverIcon: hoverIcon,
-                                checkedIcon: checkedIcon,
-                                checkbox: checkbox,
-                                level: item.level ? item.level : parents.length,
-                                disabled: disabledIds ? disabledIds.includes(item.id) : false
-                            }, others));
+                        /**
+                         * L'élément est-il selectionné ?
+                         */
+                        var selected = false;
+                        if (item.id === '_all') {
+                            selected = allSelected;
+                        } else if (!item.hasChildren) {
+                            selected = selectedIdList.includes(item.id);
+                        } else if (hierarchic && parentItemSelectable) {
+                            selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
                         }
+
+                        return _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
+                            key: item.id,
+                            item: item,
+                            selected: selected,
+                            indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
+                            onSelect: onSelect,
+                            hierarchySelected: hierarchySelected,
+                            parentItemSelectable: parentItemSelectable,
+                            nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
+                            hierarchic: hierarchic,
+                            translations: translations,
+                            icon: icon,
+                            parentIcon: parentIcon,
+                            hoverIcon: hoverIcon,
+                            checkedIcon: checkedIcon,
+                            checkbox: checkbox,
+                            level: parents.length
+                        }, others));
                     })
                 )
             );
@@ -207,10 +203,6 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
-    /**
-     * Liste des ids des items disabled
-     */
-    disabledIds: _propTypes2.default.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */