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

package/es/HiSelect/HiSuggestSelect.js

@@ -45,7 +45,6 @@ class HiSuggestSelect extends React.PureComponent {
             if (textInput) {
                 setTimeout(() => {
                     textInput.focus();
-                    textInput.scrollLeft = textInput.scrollWidth;
                 }, 1);
             }
         };
@@ -78,8 +77,6 @@ class HiSuggestSelect extends React.PureComponent {
                         items[0].focus();
                     }
                 }, 1);
-            } else if (event.key === 'Escape') {
-                this.setState({ options: [] });
             }
         };
 
@@ -91,20 +88,12 @@ class HiSuggestSelect extends 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);
     }
 
     componentWillReceiveProps(nextProps) {
         this.setState({ options: nextProps.options });
     }
 
-    getInputElement(el) {
-        this.textInput = el;
-        if (this.props.inputRef) {
-            this.props.inputRef(this.textInput);
-        }
-    }
-
     // Key down on list items
 
 
@@ -125,37 +114,11 @@ class HiSuggestSelect extends React.PureComponent {
 
     render() {
         const _props = this.props,
-              { classes, id, loading, showMinLength, showNoResults, onSearch, translations } = _props,
-              otherProps = _objectWithoutProperties(_props, ['classes', 'id', 'loading', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
+              { classes, translations, id, onSearch } = _props,
+              otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
 
         const { focused, options } = this.state;
-
-        let 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
-                }];
-            }
-
-        const open = !!optionsShown.length && focused;
+        const open = !!options.length && focused;
 
         return React.createElement(
             'div',
@@ -172,10 +135,11 @@ class HiSuggestSelect extends React.PureComponent {
                     Target,
                     null,
                     React.createElement(HiInput, _extends({}, otherProps, {
-
                         inputId: id,
                         focused: focused,
-                        inputRef: this.getInputElement,
+                        inputRef: input => {
+                            this.textInput = input;
+                        },
                         onChange: onSearch,
                         onKeyDown: this.handleKeyDownSearch,
                         onBlur: this.handleBlur,
@@ -196,7 +160,7 @@ class HiSuggestSelect extends React.PureComponent {
                             Paper,
                             { className: classes.paper },
                             React.createElement(HiSelectableList, {
-                                itemList: optionsShown,
+                                itemList: options,
                                 selectedIdList: [],
                                 checkbox: false,
                                 onSelect: this.handleSelect,
@@ -212,12 +176,7 @@ class HiSuggestSelect extends React.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" ? {
@@ -229,14 +188,6 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id de l'élément input
      */
     id: PropTypes.string,
-    /**
-     * Passe une ref callback au composant input
-     */
-    inputRef: PropTypes.func,
-    /**
-     * Ajoute un loader
-     */
-    loading: PropTypes.bool,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans le champ
      */
@@ -249,14 +200,6 @@ 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/HiSelect/SelectInput.js

@@ -2,23 +2,20 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import keycode from 'keycode';
-import Icon from 'material-ui/Icon';
-import IconButton from 'material-ui/IconButton';
-import ButtonBase from 'material-ui/ButtonBase';
+
 import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
+import Icon from 'material-ui/Icon';
 import { withStyles } from '../styles';
-import HiIconBuilder from '../utils/HiIconBuilder';
+
+import ButtonBase from 'material-ui/ButtonBase';
 
 export const styles = theme => ({
     root: {
         width: '100%',
         height: 40,
         maxWidth: 500,
-        display: 'flex',
-        justifyContent: 'center',
-        padding: 8,
-        cursor: 'pointer'
+        justifyContent: 'flex-start',
+        padding: 8
     },
     underline: {
         '&:before': {
@@ -88,20 +85,21 @@ export const styles = theme => ({
         backgroundColor: theme.palette.background3
     },
     error: {},
-    eraseButton: {
-        height: 24,
-        width: 24,
-        display: 'inline-block'
-    },
     label: _extends({
         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
         })
@@ -126,24 +124,14 @@ class SelectInput extends React.PureComponent {
         super(props);
 
         this.handleKeyDown = event => {
-            const key = keycode(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 = 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);
     }
 
     render() {
@@ -157,9 +145,7 @@ class SelectInput extends React.PureComponent {
             focused,
             error,
             id,
-            refElement,
-            onReset,
-            theme
+            refElement
         } = this.props;
 
         // On utilise classNames pour variabiliser les styles et merge les classes appliquées
@@ -203,7 +189,7 @@ class SelectInput extends React.PureComponent {
             {
                 id: id,
                 className: rootClass,
-                onClick: this.handleClick,
+                onClick: onClick,
                 disabled: disabled,
                 onMouseEnter: this.props.onMouseEnter,
                 onMouseLeave: this.props.onMouseLeave,
@@ -219,20 +205,6 @@ class SelectInput extends React.PureComponent {
                 { className: classes.label },
                 value
             ),
-            onReset && React.createElement(
-                'div',
-                {
-                    ref: el => {
-                        this.resetIcon = el;
-                    }
-                },
-                React.createElement(HiIconBuilder, {
-                    icon: 'close',
-                    size: 24,
-                    color: theme.palette.neutral.normal,
-                    onClick: onReset
-                })
-            ),
             React.createElement(
                 Icon,
                 { classes: { root: iconClass } },
@@ -294,14 +266,6 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on vide le champs
-     */
-    onReset: PropTypes.func,
-    /**
-     * Fonction de callback à la pression de la touche "Entrée"
-     */
-    onSubmit: PropTypes.func,
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
@@ -315,4 +279,4 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
 } : {};
-export default withStyles(styles, { name: 'HmuiSelectInput', withTheme: true })(SelectInput);
+export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/es/HiSelectableList/HiSelectableList.js

@@ -37,10 +37,9 @@ class HiSelectableList extends React.PureComponent {
             checkedIcon,
             allSelected,
             checkbox,
-            hierarchic,
-            disabledIds
+            hierarchic
         } = _props,
-              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
+              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
 
         let parents = [];
 
@@ -51,61 +50,58 @@ class HiSelectableList extends React.PureComponent {
                 List,
                 { className: classes.root, onKeyDown: this.props.onKeyDown },
                 itemList.map(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é ?
-                         */
-                        let 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 React.createElement(HiSelectableListItem, _extends({
-                            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é ?
+                     */
+                    let 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 React.createElement(HiSelectableListItem, _extends({
+                        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));
                 })
             )
         );
@@ -144,10 +140,6 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
-    /**
-     * Liste des ids des items disabled
-     */
-    disabledIds: PropTypes.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */