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

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,66 +94,44 @@ 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: [] });
         }
     }
 
     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;
         return React.createElement(
             'div',
             {
@@ -163,7 +147,6 @@ class HiSuggestSelect extends React.PureComponent {
                     Target,
                     null,
                     React.createElement(HiInput, _extends({}, otherProps, {
-
                         inputId: id,
                         focused: focused,
                         inputRef: input => {
@@ -171,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(
@@ -180,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: optionsShown,
-                                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
+                                })
+                            )
                         )
                     )
                 )
@@ -205,12 +191,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" ? {
@@ -222,10 +203,6 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id de l'élément input
      */
     id: PropTypes.string,
-    /**
-     * Ajoute un loader
-     */
-    loading: PropTypes.bool,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans le champ
      */
@@ -238,14 +215,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/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

@@ -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': {
@@ -50,7 +47,7 @@ export const styles = theme => ({
     },
     inkbar: {
         '&:not($disabled)': {
-            '&:not($error):after': {
+            '&:after': {
                 backgroundColor: theme.palette.business.primary.normal,
                 left: 0,
                 bottom: 0,
@@ -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,41 +124,18 @@ 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() {
-        const {
-            classes,
-            noButton,
-            disabled,
-            onClick,
-            value,
-            open,
-            focused,
-            error,
-            id,
-            refElement,
-            onReset,
-            theme
-        } = 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, {
@@ -187,10 +162,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',
@@ -203,36 +175,19 @@ class SelectInput extends 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: el => {
-                    refElement && refElement(el);
-                }
+                onBlur: this.props.onBlur
             },
             React.createElement(
                 'span',
                 { 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 } },
@@ -261,23 +216,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
      */
@@ -295,24 +233,29 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     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"
+     * Valeur à afficher (déjà formattée)
      */
-    onSubmit: PropTypes.func,
+    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.
+     */
+    noButton: PropTypes.bool,
+    /**
+     * Applique le style focused
+     */
+    focused: PropTypes.bool,
+    /**
+     * Applique le style error
      */
-    refElement: PropTypes.func,
+    error: PropTypes.bool,
     /**
-     * Valeur à afficher (déjà formattée)
+     * id du select
      */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
+    id: PropTypes.string
 } : {};
-export default withStyles(styles, { name: 'HmuiSelectInput', withTheme: true })(SelectInput);
+export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);