@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/es/HiSelect/HiSuggestSelectField.js

@@ -1,19 +1,17 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent HiSuggestSelect
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiFormControl from '../HiForm/HiFormControl';
 import HiSuggestSelect from './HiSuggestSelect';
-
 /**
  * Champs input autosuggest pour formulaire avec label
  */
-class HiSuggestSelectField extends React.PureComponent {
 
+class HiSuggestSelectField extends React.PureComponent {
   render() {
-    const _props = this.props,
+    const _this$props = this.props,
           {
       label,
       required,
@@ -24,36 +22,33 @@ class HiSuggestSelectField extends React.PureComponent {
       helperIcon,
       id,
       className
-    } = _props,
-          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'className']);
+    } = _this$props,
+          others = _objectWithoutProperties(_this$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,
-        className: className
+    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é'
       },
-      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))
-    );
+      disabled: disabled,
+      error: error
+    }, others)));
   }
+
 }
 
 HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -61,34 +56,42 @@ 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
    */

package/es/HiSelect/SelectInput.js

@@ -1,282 +1,288 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
-import Icon from 'material-ui/Icon';
+import keycode from 'keycode';
+import HiIcon from '../HiIcon';
 import { withStyles } from '../styles';
-
-import ButtonBase from 'material-ui/ButtonBase';
-
+import ButtonBase from '@material-ui/core/ButtonBase';
 export const styles = theme => ({
-    root: {
-        width: '100%',
-        height: 40,
-        maxWidth: 500,
-        justifyContent: 'flex-start',
-        padding: 8
-    },
-    underline: {
-        '&:before': {
-            backgroundColor: theme.palette.input.bottomLine,
-            left: 0,
-            bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-            content: '""',
-            height: 1,
-            position: 'absolute',
-            right: 0,
-            transition: theme.transitions.create('background-color', {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.ease
-            }),
-            pointerEvents: 'none' // Transparent to the hover style.
-        },
-        '&:hover:not($disabled):before': {
-            backgroundColor: theme.palette.input.bottomLine,
-            height: 2
-        },
-        '&$disabled:before': {
-            background: 'transparent',
-            backgroundImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)`,
-            backgroundPosition: 'left top',
-            backgroundRepeat: 'repeat-x',
-            backgroundSize: '5px 1px'
-        }
-    },
-    inkbar: {
-        '&:not($disabled)': {
-            '&:not($error):after': {
-                backgroundColor: theme.palette.business.primary.normal,
-                left: 0,
-                bottom: 0,
-                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-                content: '""',
-                height: 1,
-                position: 'absolute',
-                right: 0,
-                transform: 'scaleX(0)',
-                transition: theme.transitions.create('transform', {
-                    duration: theme.transitions.duration.shorter,
-                    easing: theme.transitions.easing.easeOut
-                }),
-                pointerEvents: 'none' // Transparent to the hover style.
-            },
-            '&:hover:after': {
-                transform: 'scaleX(1)'
-            },
-            '&$focused:after': {
-                transform: 'scaleX(1)'
-            },
-            '&$error': {
-                border: `1px solid ${theme.palette.negative.normal}`,
-                borderRadius: 2
-            }
-        }
-    },
-    disabled: {
-        color: `${theme.palette.action.disabled}`,
-        '&:before': {
-            display: 'none'
-        }
+  root: {
+    width: '100%',
+    height: 40,
+    maxWidth: 500,
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 8,
+    cursor: 'pointer'
+  },
+  underline: {
+    '&:before': {
+      backgroundColor: theme.palette.input.bottomLine,
+      left: 0,
+      bottom: 0,
+      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+      content: '""',
+      height: 1,
+      position: 'absolute',
+      right: 0,
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.ease
+      }),
+      pointerEvents: 'none' // Transparent to the hover style.
+
     },
-    focused: {
-        backgroundColor: theme.palette.background3
+    '&:hover:not($disabled):before': {
+      backgroundColor: theme.palette.input.bottomLine,
+      height: 2
     },
-    error: {},
-    label: _extends({
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        paddingRight: 16
-    }, theme.typography.body1, {
-        display: 'inline-flex',
-        width: '100%'
-    }),
-    icon: {
+    '&$disabled:before': {
+      background: 'transparent',
+      backgroundImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)`,
+      backgroundPosition: 'left top',
+      backgroundRepeat: 'repeat-x',
+      backgroundSize: '5px 1px'
+    }
+  },
+  inkbar: {
+    '&:not($disabled)': {
+      '&:not($error):after': {
+        backgroundColor: theme.palette.primary.main,
+        left: 0,
+        bottom: 0,
+        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '""',
+        height: 1,
         position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
         right: 0,
-        height: 40,
-        transition: theme.transitions.create(['opacity', 'transform'], {
-            duration: theme.transitions.duration.shorter
-        })
-    },
-    iconOpen: {
-        transform: 'rotate(90deg)'
-    },
-    iconClose: {
-        transform: 'rotate(0deg)'
+        transform: 'scaleX(0)',
+        transition: theme.transitions.create('transform', {
+          duration: theme.transitions.duration.shorter,
+          easing: theme.transitions.easing.easeOut
+        }),
+        pointerEvents: 'none' // Transparent to the hover style.
+
+      },
+      '&:hover:after': {
+        transform: 'scaleX(1)'
+      },
+      '&$focused:after': {
+        transform: 'scaleX(1)'
+      },
+      '&$error': {
+        border: `1px solid ${theme.palette.negative.normal}`,
+        borderRadius: 2
+      }
+    }
+  },
+  disabled: {
+    color: `${theme.palette.action.disabled}`,
+    '&:before': {
+      display: 'none'
     }
+  },
+  focused: {
+    backgroundColor: theme.palette.background3
+  },
+  error: {},
+  label: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }, theme.typography.b1, {
+    display: 'inline-flex',
+    width: '100%'
+  }),
+  icon: {
+    transition: theme.transitions.create(['opacity', 'transform'], {
+      duration: theme.transitions.duration.shorter
+    })
+  },
+  iconOpen: {
+    transform: 'rotate(90deg)'
+  },
+  iconClose: {
+    transform: 'rotate(0deg)'
+  }
 });
-
 /**
  * @ignore - internal component.
  */
 
-var _ref = React.createElement(ArrowDropDownIcon, null);
-
 class SelectInput extends React.PureComponent {
+  constructor(props) {
+    super(props);
 
-    constructor(props) {
-        super(props);
-
-        this.handleKeyDown = event => {
-            if (event.key === 'ArrowDown') {
-                this.props.onClick();
-            } else if (event.key === 'ArrowUp') {
-                this.props.onClick();
-            }
-        };
-
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-    }
+    this.handleKeyDown = event => {
+      const key = keycode(event);
 
-    render() {
-        const {
-            classes,
-            noButton,
-            disabled,
-            onClick,
-            value,
-            open,
-            focused,
-            error,
-            id,
-            refElement
-        } = this.props;
+      if (['up', 'down', 'space'].includes(key)) {
+        event.preventDefault();
+        this.props.onClick();
+      } else if (key === 'enter' && this.props.onSubmit) {
+        event.preventDefault();
+        this.props.onSubmit(event);
+      }
+    };
 
-        // On utilise classNames pour variabiliser les styles et merge les classes appliquées
-        const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
-            [classes.disabled]: disabled,
-            [classes.focused]: focused,
-            [classes.error]: error && !focused
-        });
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
 
-        const iconClass = classNames(classes.icon, {
-            [classes.iconOpen]: open,
-            [classes.iconClose]: !open
-        });
+  render() {
+    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 render = noButton ? React.createElement(
-            'div',
-            {
-                id: id,
-                className: rootClass,
-                onClick: onClick,
-                disabled: disabled,
-                onMouseEnter: this.props.onMouseEnter,
-                onMouseLeave: this.props.onMouseLeave,
-                onKeyDown: this.handleKeyDown,
-                onFocus: this.props.onFocus,
-                onBlur: this.props.onBlur,
-                role: 'button',
-                tabIndex: '0',
-                ref: el => {
-                    refElement && refElement(el);
-                }
-            },
-            React.createElement(
-                'span',
-                { className: classes.label },
-                value
-            ),
-            React.createElement(ArrowDropDownIcon, { className: iconClass })
-        ) : React.createElement(
-            ButtonBase,
-            {
-                id: id,
-                className: rootClass,
-                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);
-                }
-            },
-            React.createElement(
-                'span',
-                { className: classes.label },
-                value
-            ),
-            React.createElement(
-                Icon,
-                { classes: { root: iconClass } },
-                _ref
-            )
-        );
+    const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
+      [classes.disabled]: disabled,
+      [classes.focused]: focused,
+      [classes.error]: error && !focused
+    });
+    const iconClass = classNames(classes.icon, {
+      [classes.iconOpen]: open,
+      [classes.iconClose]: !open
+    });
+    const render = noButton ? React.createElement("div", {
+      id: id,
+      className: rootClass,
+      onClick: onClick,
+      disabled: disabled,
+      onMouseEnter: this.props.onMouseEnter,
+      onMouseLeave: this.props.onMouseLeave,
+      onKeyDown: this.handleKeyDown,
+      onFocus: this.props.onFocus,
+      onBlur: this.props.onBlur,
+      role: "button",
+      tabIndex: "0",
+      ref: el => {
+        if (refElement) refElement(el);
+      }
+    }, React.createElement("span", {
+      className: classes.label
+    }, value), React.createElement(HiIcon, {
+      className: iconClass,
+      icon: "arrow_drop_down"
+    })) : React.createElement(ButtonBase, {
+      id: id,
+      classes: {
+        root: rootClass
+      },
+      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 => {
+        if (refElement) refElement(el);
+      }
+    }, React.createElement("span", {
+      className: classes.label
+    }, value), React.createElement(HiIcon, {
+      className: iconClass,
+      icon: "arrow_drop_down"
+    }));
+    return render;
+  }
 
-        return render;
-    }
 }
 
 SelectInput.defaultProps = {
-    autoWidth: true,
-    disabled: false,
-    open: false,
-    focused: false,
-    noButton: false,
-    error: false
+  disabled: false,
+  open: false,
+  focused: false,
+  noButton: false,
+  error: false
 };
 SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * 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
-     */
-    onBlur: PropTypes.func,
-    /**
-     * Fonction de callback au click sur l'input/bouton
-     */
-    onClick: PropTypes.func,
-    /**
-     * Fonction de callback au focus l'input/bouton
-     */
-    onFocus: PropTypes.func,
-    /**
-     * Fonction de callback à la pression de touche
-     */
-    onKeyDown: PropTypes.func,
-    /**
-     * 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.
-     */
-    refElement: PropTypes.func,
-    /**
-     * Valeur à afficher (déjà formattée)
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * 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
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Fonction de callback au click sur l'input/bouton
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Fonction de callback au focus l'input/bouton
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on survole le champs
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsque le curseur quitte le champs
+   */
+  onMouseLeave: 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
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Use that property to pass a ref callback to the native component.
+   */
+  refElement: PropTypes.func,
+
+  /**
+   * Valeur à afficher (déjà formattée)
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
 } : {};
-export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiSelectInput'
+})(SelectInput);