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

package/es/HiSelect/HiSelectField.js

@@ -31,9 +31,10 @@ class HiSelectField extends React.PureComponent {
       iconAll,
       checkbox,
       searchable,
-      translations
+      translations,
+      className
     } = _props,
-          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations']);
+          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations', 'className']);
 
     return React.createElement(
       HiFormControl,
@@ -45,7 +46,8 @@ class HiSelectField extends React.PureComponent {
         error: error,
         errorText: errorText,
         helperText: helperText,
-        helperIcon: helperIcon
+        helperIcon: helperIcon,
+        className: className
       },
       React.createElement(HiSelect, _extends({
         id: id,
@@ -58,10 +60,6 @@ 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))
@@ -70,6 +68,10 @@ 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,17 +4,12 @@ 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';
 
@@ -22,7 +17,7 @@ export const styles = theme => ({
     root: {
         backgroundColor: theme.palette.background2,
         maxWidth: 500,
-        minWidth: 250,
+        minWidth: 200,
         width: '100%'
     },
     popper: {
@@ -31,9 +26,6 @@ export const styles = theme => ({
         zIndex: 9,
         top: '100%'
     },
-    popperClose: {
-        pointerEvents: 'none'
-    },
     paper: {
         borderRadius: '0px 2px',
         maxHeight: 440,
@@ -85,6 +77,8 @@ class HiSuggestSelect extends React.PureComponent {
                         items[0].focus();
                     }
                 }, 1);
+            } else if (event.key === 'Escape') {
+                this.setState({ options: [] });
             }
         };
 
@@ -94,34 +88,29 @@ 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: [] });
+            this.setState({ options: [], focused: false });
         }
     }
 
@@ -131,7 +120,8 @@ class HiSuggestSelect extends React.PureComponent {
               otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
 
         const { focused, options } = this.state;
-        const open = !!options.length;
+        const open = !!options.length && focused;
+
         return React.createElement(
             'div',
             {
@@ -154,7 +144,8 @@ class HiSuggestSelect extends React.PureComponent {
                         },
                         onChange: onSearch,
                         onKeyDown: this.handleKeyDownSearch,
-                        onBlur: this.handleBlur
+                        onBlur: this.handleBlur,
+                        onFocus: this.handleFocus
                     }))
                 ),
                 open && React.createElement(
@@ -162,26 +153,22 @@ class HiSuggestSelect extends React.PureComponent {
                     {
                         placement: 'bottom-start',
                         eventsEnabled: open,
-                        className: classNames(classes.popper, { [classes.popperClose]: !open })
+                        className: classes.popper
                     },
                     React.createElement(
-                        ClickAwayListener,
-                        { onClickAway: this.handleClose },
+                        Grow,
+                        { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
                         React.createElement(
-                            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
-                                })
-                            )
+                            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,78 +12,86 @@ import HiSuggestSelect from './HiSuggestSelect';
  */
 class HiSuggestSelectField extends React.PureComponent {
 
-    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']);
+  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']);
 
-        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))
-        );
-    }
+    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))
+    );
+  }
 }
 
 HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * 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
+  /**
+   * 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
 } : {};
 export default HiSuggestSelectField;

package/es/HiSelect/SelectInput.js

@@ -15,7 +15,8 @@ export const styles = theme => ({
         height: 40,
         maxWidth: 500,
         justifyContent: 'flex-start',
-        padding: 8
+        padding: 8,
+        cursor: 'pointer'
     },
     underline: {
         '&:before': {
@@ -47,7 +48,7 @@ export const styles = theme => ({
     },
     inkbar: {
         '&:not($disabled)': {
-            '&:after': {
+            '&:not($error):after': {
                 backgroundColor: theme.palette.business.primary.normal,
                 left: 0,
                 bottom: 0,
@@ -77,7 +78,6 @@ export const styles = theme => ({
     },
     disabled: {
         color: `${theme.palette.action.disabled}`,
-        backgroundColor: `${theme.palette.input.disabled}`,
         '&:before': {
             display: 'none'
         }
@@ -136,7 +136,18 @@ class SelectInput extends React.PureComponent {
     }
 
     render() {
-        const { classes, noButton, disabled, onClick, value, open, focused, error, id } = this.props;
+        const {
+            classes,
+            noButton,
+            disabled,
+            onClick,
+            value,
+            open,
+            focused,
+            error,
+            id,
+            refElement
+        } = this.props;
 
         // On utilise classNames pour variabiliser les styles et merge les classes appliquées
         const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -163,7 +174,10 @@ class SelectInput extends React.PureComponent {
                 onFocus: this.props.onFocus,
                 onBlur: this.props.onBlur,
                 role: 'button',
-                tabIndex: '0'
+                tabIndex: '0',
+                ref: el => {
+                    refElement && refElement(el);
+                }
             },
             React.createElement(
                 'span',
@@ -182,7 +196,10 @@ class SelectInput extends React.PureComponent {
                 onMouseLeave: this.props.onMouseLeave,
                 onKeyDown: this.handleKeyDown,
                 onFocus: this.props.onFocus,
-                onBlur: this.props.onBlur
+                onBlur: this.props.onBlur,
+                buttonRef: el => {
+                    refElement && refElement(el);
+                }
             },
             React.createElement(
                 'span',
@@ -217,6 +234,23 @@ 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
      */
@@ -233,30 +267,17 @@ 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,
     /**
-     * Affiche sous forme de div à la place d'un bouton.
-     * Si des éléments cliquables sont à l'intérieur.
-     */
-    noButton: PropTypes.bool,
-    /**
-     * Applique le style focused
-     */
-    focused: PropTypes.bool,
-    /**
-     * Applique le style error
+     * Use that property to pass a ref callback to the native component.
      */
-    error: PropTypes.bool,
+    refElement: PropTypes.func,
     /**
-     * id du select
+     * Valeur à afficher (déjà formattée)
      */
-    id: PropTypes.string
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
 } : {};
 export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/es/HiSelectableList/HiSelectableList.js

@@ -37,9 +37,10 @@ class HiSelectableList extends React.PureComponent {
             checkedIcon,
             allSelected,
             checkbox,
-            hierarchic
+            hierarchic,
+            disabledIds
         } = _props,
-              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
 
         let parents = [];
 
@@ -100,7 +101,8 @@ class HiSelectableList extends React.PureComponent {
                         hoverIcon: hoverIcon,
                         checkedIcon: checkedIcon,
                         checkbox: checkbox,
-                        level: parents.length
+                        level: parents.length,
+                        disabled: disabledIds ? disabledIds.includes(item.id) : false
                     }, others));
                 })
             )
@@ -111,7 +113,7 @@ class HiSelectableList extends React.PureComponent {
 HiSelectableList.defaultProps = {
     checkbox: true,
     allSelected: false,
-    maxHeight: 360,
+    maxHeight: 400,
     hierarchySelected: {},
     parentItemSelectable: false,
     icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
@@ -140,6 +142,10 @@ 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]
      */