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

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': {
@@ -114,7 +100,7 @@ var styles = exports.styles = function styles(theme) {
         },
         inkbar: {
             '&:not($disabled)': {
-                '&:not($error):after': {
+                '&:after': {
                     backgroundColor: theme.palette.business.primary.normal,
                     left: 0,
                     bottom: 0,
@@ -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,
@@ -231,10 +206,7 @@ var SelectInput = function (_React$PureComponent) {
                 open = _props.open,
                 focused = _props.focused,
                 error = _props.error,
-                id = _props.id,
-                refElement = _props.refElement,
-                onReset = _props.onReset,
-                theme = _props.theme;
+                id = _props.id;
 
             // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
@@ -255,10 +227,7 @@ var SelectInput = function (_React$PureComponent) {
                     onFocus: this.props.onFocus,
                     onBlur: this.props.onBlur,
                     role: 'button',
-                    tabIndex: '0',
-                    ref: function ref(el) {
-                        refElement && refElement(el);
-                    }
+                    tabIndex: '0'
                 },
                 _react2.default.createElement(
                     'span',
@@ -271,36 +240,19 @@ var SelectInput = function (_React$PureComponent) {
                 {
                     id: id,
                     className: rootClass,
-                    onClick: this.handleClick,
+                    onClick: onClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
                     onKeyDown: this.handleKeyDown,
                     onFocus: this.props.onFocus,
-                    onBlur: this.props.onBlur,
-                    buttonRef: function buttonRef(el) {
-                        refElement && refElement(el);
-                    }
+                    onBlur: this.props.onBlur
                 },
                 _react2.default.createElement(
                     'span',
                     { 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 } },
@@ -331,23 +283,6 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * If `true`, the select will be disabled.
      */
     disabled: _propTypes2.default.bool,
-    /**
-     * Applique le style error
-     */
-    error: _propTypes2.default.bool,
-    /**
-     * Applique le style focused
-     */
-    focused: _propTypes2.default.bool,
-    /**
-     * id du select
-     */
-    id: _propTypes2.default.string,
-    /**
-     * Affiche sous forme de div à la place d'un bouton.
-     * Si des éléments cliquables sont à l'intérieur.
-     */
-    noButton: _propTypes2.default.bool,
     /**
      * Fonction de callback au blur du bouton
      */
@@ -365,24 +300,29 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     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"
+     * Valeur à afficher (déjà formattée)
      */
-    onSubmit: _propTypes2.default.func,
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]),
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
     open: _propTypes2.default.bool,
     /**
-     * Use that property to pass a ref callback to the native component.
+     * Affiche sous forme de div à la place d'un bouton.
+     * Si des éléments cliquables sont à l'intérieur.
      */
-    refElement: _propTypes2.default.func,
+    noButton: _propTypes2.default.bool,
     /**
-     * Valeur à afficher (déjà formattée)
+     * Applique le style focused
+     */
+    focused: _propTypes2.default.bool,
+    /**
+     * Applique le style error
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * id du select
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node])
+    id: _propTypes2.default.string
 } : {};
-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]
      */