@hipay/hipay-material-ui 1.0.0-beta.18 → 1.0.0-beta.2

package/es/HiSelect/HiSelectField.js

@@ -31,10 +31,9 @@ class HiSelectField extends React.PureComponent {
       iconAll,
       checkbox,
       searchable,
-      translations,
-      className
+      translations
     } = _props,
-          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations', 'className']);
+          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations']);
 
     return React.createElement(
       HiFormControl,
@@ -46,8 +45,7 @@ class HiSelectField extends React.PureComponent {
         error: error,
         errorText: errorText,
         helperText: helperText,
-        helperIcon: helperIcon,
-        className: className
+        helperIcon: helperIcon
       },
       React.createElement(HiSelect, _extends({
         id: id,
@@ -60,6 +58,10 @@ class HiSelectField extends 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))
@@ -68,10 +70,6 @@ class HiSelectField extends React.PureComponent {
 }
 
 HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Surcharge des styles
-   */
-  className: PropTypes.string,
   /**
    * Si `true`, l'input sera inactif.
    */

package/es/HiSelect/HiSuggestSelect.js

@@ -4,12 +4,17 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutPropert
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Grow from 'material-ui/transitions/Grow';
 import Paper from 'material-ui/Paper';
+import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
 import { Manager, Target, Popper } from 'react-popper';
+
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
+
 import { withStyles } from '../styles';
 import { getNextItemSelectable } from '../utils/hiHelpers';
 
@@ -17,7 +22,7 @@ export const styles = theme => ({
     root: {
         backgroundColor: theme.palette.background2,
         maxWidth: 500,
-        minWidth: 200,
+        minWidth: 250,
         width: '100%'
     },
     popper: {
@@ -26,6 +31,9 @@ export const styles = theme => ({
         zIndex: 9,
         top: '100%'
     },
+    popperClose: {
+        pointerEvents: 'none'
+    },
     paper: {
         borderRadius: '0px 2px',
         maxHeight: 440,
@@ -77,8 +85,6 @@ class HiSuggestSelect extends React.PureComponent {
                         items[0].focus();
                     }
                 }, 1);
-            } else if (event.key === 'Escape') {
-                this.setState({ options: [] });
             }
         };
 
@@ -88,29 +94,34 @@ class HiSuggestSelect extends React.PureComponent {
         };
 
         this.handleSelect = this.handleSelect.bind(this);
+        this.handleClose = this.handleClose.bind(this);
         this.handleBlur = this.handleBlur.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
         this.setState({ options: nextProps.options });
     }
 
+    handleClose() {
+        document.body.style.overflow = 'auto';
+        this.setState({
+            focused: false, // TODO - Make difference between open and focus
+            options: []
+        });
+    }
+
     // Key down on list items
 
 
     // Key down on search input
 
 
-    handleFocus() {
-        this.setState({ focused: true });
-    }
-
     handleBlur(event) {
         // Si on click sur un élément de HiInput, on garde le focus
         // Par exemple sur l'icone reset
+        const overlay = this.overlay;
         if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
-            this.setState({ options: [], focused: false });
+            this.setState({ options: [] });
         }
     }
 
@@ -120,8 +131,7 @@ class HiSuggestSelect extends React.PureComponent {
               otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
 
         const { focused, options } = this.state;
-        const open = !!options.length && focused;
-
+        const open = !!options.length;
         return React.createElement(
             'div',
             {
@@ -144,8 +154,7 @@ class HiSuggestSelect extends React.PureComponent {
                         },
                         onChange: onSearch,
                         onKeyDown: this.handleKeyDownSearch,
-                        onBlur: this.handleBlur,
-                        onFocus: this.handleFocus
+                        onBlur: this.handleBlur
                     }))
                 ),
                 open && React.createElement(
@@ -153,22 +162,26 @@ class HiSuggestSelect extends React.PureComponent {
                     {
                         placement: 'bottom-start',
                         eventsEnabled: open,
-                        className: classes.popper
+                        className: classNames(classes.popper, { [classes.popperClose]: !open })
                     },
                     React.createElement(
-                        Grow,
-                        { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                        ClickAwayListener,
+                        { onClickAway: this.handleClose },
                         React.createElement(
-                            Paper,
-                            { className: classes.paper },
-                            React.createElement(HiSelectableList, {
-                                itemList: options,
-                                selectedIdList: [],
-                                checkbox: false,
-                                onSelect: this.handleSelect,
-                                translations: translations,
-                                onKeyDown: this.handleKeyDown
-                            })
+                            Grow,
+                            { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                            React.createElement(
+                                Paper,
+                                { className: classes.paper },
+                                React.createElement(HiSelectableList, {
+                                    itemList: options,
+                                    selectedIdList: [],
+                                    checkbox: false,
+                                    onSelect: this.handleSelect,
+                                    translations: translations,
+                                    onKeyDown: this.handleKeyDown
+                                })
+                            )
                         )
                     )
                 )

package/es/HiSelect/HiSuggestSelectField.js

@@ -12,86 +12,78 @@ import HiSuggestSelect from './HiSuggestSelect';
  */
 class HiSuggestSelectField extends React.PureComponent {
 
-  render() {
-    const _props = this.props,
-          {
-      label,
-      required,
-      disabled,
-      error,
-      errorText,
-      helperText,
-      helperIcon,
-      id,
-      className
-    } = _props,
-          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'className']);
+    render() {
+        const _props = this.props,
+              {
+            label,
+            required,
+            disabled,
+            error,
+            errorText,
+            helperText,
+            helperIcon,
+            id
+        } = _props,
+              others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id']);
 
-    return React.createElement(
-      HiFormControl,
-      {
-        id: id,
-        label: label,
-        required: required,
-        disabled: disabled,
-        error: error,
-        errorText: errorText,
-        helperText: helperText,
-        helperIcon: helperIcon,
-        className: className
-      },
-      React.createElement(HiSuggestSelect, _extends({
-        id: id,
-        translations: {
-          all: 'Tous les pays',
-          no_result_match: 'Aucun résultat correspondant',
-          search: 'Recherche',
-          n_items_selected: '%s pays sélectionnés',
-          one_item_selected: '%s pays sélectionné'
-        },
-        disabled: disabled,
-        error: error
-      }, others))
-    );
-  }
+        return React.createElement(
+            HiFormControl,
+            {
+                id: id,
+                label: label,
+                required: required,
+                disabled: disabled,
+                error: error,
+                errorText: errorText,
+                helperText: helperText,
+                helperIcon: helperIcon
+            },
+            React.createElement(HiSuggestSelect, _extends({
+                id: id,
+                translations: {
+                    all: 'Tous les pays',
+                    no_result_match: 'Aucun résultat correspondant',
+                    search: 'Recherche',
+                    n_items_selected: '%s pays sélectionnés',
+                    one_item_selected: '%s pays sélectionné'
+                }
+            }, others))
+        );
+    }
 }
 
 HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Surcharge des styles
-   */
-  className: PropTypes.string,
-  /**
-   * Si `true`, l'input sera inactif.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Si `true`, le champs sera en erreur.
-   */
-  error: PropTypes.bool,
-  /**
-   * Texte de l'erreur
-   */
-  errorText: PropTypes.string,
-  /**
-   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
-   */
-  helperIcon: PropTypes.bool,
-  /**
-   * Texte de l'aide
-   */
-  helperText: PropTypes.string,
-  /**
-   * id de l'élément input
-   */
-  id: PropTypes.string,
-  /**
-   * Label du champs
-   */
-  label: PropTypes.string,
-  /**
-   * true si champs obligatoire
-   */
-  required: PropTypes.bool
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: PropTypes.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: PropTypes.string,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: PropTypes.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: PropTypes.string,
+    /**
+     * id de l'élément input
+     */
+    id: PropTypes.string,
+    /**
+     * Label du champs
+     */
+    label: PropTypes.string,
+    /**
+     * true si champs obligatoire
+     */
+    required: PropTypes.bool
 } : {};
 export default HiSuggestSelectField;

package/es/HiSelect/SelectInput.js

@@ -15,8 +15,7 @@ export const styles = theme => ({
         height: 40,
         maxWidth: 500,
         justifyContent: 'flex-start',
-        padding: 8,
-        cursor: 'pointer'
+        padding: 8
     },
     underline: {
         '&:before': {
@@ -48,7 +47,7 @@ export const styles = theme => ({
     },
     inkbar: {
         '&:not($disabled)': {
-            '&:not($error):after': {
+            '&:after': {
                 backgroundColor: theme.palette.business.primary.normal,
                 left: 0,
                 bottom: 0,
@@ -78,6 +77,7 @@ export const styles = theme => ({
     },
     disabled: {
         color: `${theme.palette.action.disabled}`,
+        backgroundColor: `${theme.palette.input.disabled}`,
         '&:before': {
             display: 'none'
         }
@@ -136,18 +136,7 @@ class SelectInput extends React.PureComponent {
     }
 
     render() {
-        const {
-            classes,
-            noButton,
-            disabled,
-            onClick,
-            value,
-            open,
-            focused,
-            error,
-            id,
-            refElement
-        } = this.props;
+        const { classes, noButton, disabled, onClick, value, open, focused, error, id } = this.props;
 
         // On utilise classNames pour variabiliser les styles et merge les classes appliquées
         const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -174,10 +163,7 @@ class SelectInput extends React.PureComponent {
                 onFocus: this.props.onFocus,
                 onBlur: this.props.onBlur,
                 role: 'button',
-                tabIndex: '0',
-                ref: el => {
-                    refElement && refElement(el);
-                }
+                tabIndex: '0'
             },
             React.createElement(
                 'span',
@@ -196,10 +182,7 @@ class SelectInput extends React.PureComponent {
                 onMouseLeave: this.props.onMouseLeave,
                 onKeyDown: this.handleKeyDown,
                 onFocus: this.props.onFocus,
-                onBlur: this.props.onBlur,
-                buttonRef: el => {
-                    refElement && refElement(el);
-                }
+                onBlur: this.props.onBlur
             },
             React.createElement(
                 'span',
@@ -234,23 +217,6 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * If `true`, the select will be disabled.
      */
     disabled: PropTypes.bool,
-    /**
-     * Applique le style error
-     */
-    error: PropTypes.bool,
-    /**
-     * Applique le style focused
-     */
-    focused: PropTypes.bool,
-    /**
-     * id du select
-     */
-    id: PropTypes.string,
-    /**
-     * Affiche sous forme de div à la place d'un bouton.
-     * Si des éléments cliquables sont à l'intérieur.
-     */
-    noButton: PropTypes.bool,
     /**
      * Fonction de callback au blur du bouton
      */
@@ -267,17 +233,30 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: PropTypes.func,
+    /**
+     * Valeur à afficher (déjà formattée)
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
     open: PropTypes.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: PropTypes.func,
+    noButton: PropTypes.bool,
     /**
-     * Valeur à afficher (déjà formattée)
+     * Applique le style focused
+     */
+    focused: PropTypes.bool,
+    /**
+     * Applique le style error
+     */
+    error: PropTypes.bool,
+    /**
+     * id du select
      */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
+    id: PropTypes.string
 } : {};
 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 = [];
 
@@ -101,8 +100,7 @@ class HiSelectableList extends React.PureComponent {
                         hoverIcon: hoverIcon,
                         checkedIcon: checkedIcon,
                         checkbox: checkbox,
-                        level: parents.length,
-                        disabled: disabledIds ? disabledIds.includes(item.id) : false
+                        level: parents.length
                     }, others));
                 })
             )
@@ -113,7 +111,7 @@ class HiSelectableList extends React.PureComponent {
 HiSelectableList.defaultProps = {
     checkbox: true,
     allSelected: false,
-    maxHeight: 400,
+    maxHeight: 360,
     hierarchySelected: {},
     parentItemSelectable: false,
     icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
@@ -142,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]
      */