@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530

package/es/HiSelect/HiSelectInput.js

@@ -1,60 +1,63 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import Icon from '@material-ui/core/Icon';
-import HiIcon from '../HiIcon';
-import { withStyles } from '@material-ui/core/styles';
-import keycode from 'keycode';
-import { isMobile } from 'react-device-detect';
-export const styles = theme => ({
-  root: {
-    width: '100%',
-    height: 40,
-    maxWidth: 500,
-    display: 'flex',
-    justifyContent: 'center',
-    padding: 8,
-    cursor: 'pointer'
-  },
-  rootMobile: {
-    backgroundColor: theme.palette.background2
-  },
-  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.
+"use strict";
 
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _reactDeviceDetect = require("react-device-detect");
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      width: '100%',
+      height: 40,
+      maxWidth: 500,
+      display: 'flex',
+      justifyContent: 'center',
+      padding: 8,
+      cursor: 'pointer'
     },
-    '&:hover:not($disabled):before': {
-      backgroundColor: theme.palette.input.bottomLine,
-      height: 2
+    rootMobile: {
+      backgroundColor: theme.palette.background2
     },
-    '&$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,
+    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
@@ -62,317 +65,259 @@ export const styles = theme => ({
         height: 1,
         position: 'absolute',
         right: 0,
-        transform: 'scaleX(0)',
-        transition: theme.transitions.create('transform', {
+        transition: theme.transitions.create('background-color', {
           duration: theme.transitions.duration.shorter,
-          easing: theme.transitions.easing.easeOut
+          easing: theme.transitions.easing.ease
         }),
         pointerEvents: 'none' // Transparent to the hover style.
 
       },
-      '&:hover:after': {
-        transform: 'scaleX(1)'
-      },
-      '&$focused:after': {
-        transform: 'scaleX(1)'
+      '&:hover:not($disabled):before': {
+        backgroundColor: theme.palette.input.bottomLine,
+        height: 2
       },
-      '&$error': {
-        border: `1px solid ${theme.palette.negative.main}`,
-        borderRadius: 2
+      '&$disabled:before': {
+        background: 'transparent',
+        backgroundImage: "linear-gradient(to right, ".concat(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',
+          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 ".concat(theme.palette.negative.main),
+          borderRadius: 2
+        }
+      }
+    },
+    disabled: {
+      color: theme.palette.text.disabled,
+      '&:before': {
+        display: 'none'
+      }
+    },
+    focused: {
+      backgroundColor: theme.palette.background3
+    },
+    error: {},
+    label: (0, _objectSpread2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }, theme.typography.b1, {
+      display: 'inline-block',
+      width: '100%',
+      maxWidth: 500
+    }),
+    placeholder: {
+      color: theme.palette.grey[400]
+    },
+    icon: {
+      transition: theme.transitions.create(['opacity', 'transform'], {
+        duration: theme.transitions.duration.shorter
+      })
+    },
+    iconOpen: {
+      transform: 'rotate(90deg)',
+      color: theme.palette.primary.main
+    },
+    iconClose: {
+      transform: 'rotate(0deg)'
     }
-  },
-  disabled: {
-    color: theme.palette.text.disabled,
-    '&:before': {
-      display: 'none'
-    }
-  },
-  focused: {
-    backgroundColor: theme.palette.background3
-  },
-  error: {},
-  label: _objectSpread({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }, theme.typography.b1, {
-    display: 'inline-block',
-    width: '100%',
-    maxWidth: 500
-  }),
-  placeholder: {
-    color: theme.palette.grey[400]
-  },
-  icon: {
-    transition: theme.transitions.create(['opacity', 'transform'], {
-      duration: theme.transitions.duration.shorter
-    })
-  },
-  iconOpen: {
-    transform: 'rotate(90deg)',
-    color: theme.palette.primary.main
-  },
-  iconClose: {
-    transform: 'rotate(0deg)'
-  }
-});
+  };
+};
 /**
  * @ignore - internal component.
  */
 
-var _ref = React.createElement(ArrowDropDownIcon, null);
 
-class HiSelectInput extends React.PureComponent {
-  constructor(props) {
-    super(props);
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_ArrowDropDown.default, null);
+
+var HiSelectInput =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectInput, _React$PureComponent);
 
-    this.handleKeyDown = event => {
-      const key = keycode(event);
+  function HiSelectInput(props) {
+    var _this;
 
-      if (this.props.onKeyDown) {
-        this.props.onKeyDown(event);
+    (0, _classCallCheck2.default)(this, HiSelectInput);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectInput).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
       } else if (key === 'down' || key === 'up') {
-        this.props.onClick();
-      } else if (key === 'enter' && this.props.onSubmit) {
+        _this.props.onClick();
+      } else if (key === 'enter' && _this.props.onSubmit) {
         event.preventDefault();
-        this.props.onSubmit(event);
-      }
-    };
 
-    this.handleKeyDownReset = event => {
-      const key = keycode(event);
+        _this.props.onSubmit(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownReset", function (event) {
+      var key = (0, _keycode.default)(event);
 
       if (key === 'enter' || key === 'space') {
-        this.handleReset(event);
+        _this.handleReset(event);
+
         event.stopPropagation();
         event.preventDefault();
       }
-    };
-
-    this.handleClick = event => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
       // Do not open select if press on resetIcon
-      if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
+      if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
         // Do not open select if press enter on button => submit form
-        if (event.type !== 'keydown' || keycode(event) !== 'enter') {
-          this.props.onClick(event);
+        if (event.type !== 'keydown' || (0, _keycode.default)(event) !== 'enter') {
+          _this.props.onClick(event);
         }
       }
-    };
-
-    this.handleReset = event => {
-      this.props.onReset(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReset", function (event) {
+      _this.props.onReset(event);
 
-      if (this.input) {
-        this.input.focus();
+      if (_this.input) {
+        _this.input.focus();
       }
-    };
-
-    this.handleBlur = event => {
-      if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
-        this.props.onBlur(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (event) {
+      if ((!_this.input || !_this.input.contains(event.relatedTarget)) && _this.props.onBlur) {
+        _this.props.onBlur(event);
       }
       /* else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
          this.input.focus();
       }*/
 
-    };
-
-    this.ref = el => {
-      this.input = el;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ref", function (el) {
+      _this.input = el;
 
-      if (this.props.refElement) {
-        this.props.refElement(el);
+      if (_this.props.refElement) {
+        _this.props.refElement(el);
       }
-    };
-
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.ref = this.ref.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-  }
-
-  render() {
-    const {
-      classes,
-      noButton,
-      disabled,
-      onClick,
-      onReset,
-      value,
-      open,
-      focused,
-      error,
-      id,
-      placeholder
-    } = this.props; // 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,
-      [classes.rootMobile]: isMobile
     });
-    const iconClass = classNames(classes.icon, {
-      [classes.iconOpen]: open,
-      [classes.iconClose]: !open
-    });
-    return noButton ? React.createElement("div", {
-      id: id,
-      className: rootClass,
-      onClick: onClick,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave,
-      onKeyDown: this.handleKeyDown,
-      onFocus: this.props.onFocus,
-      onBlur: this.props.onBlur,
-      role: "button",
-      tabIndex: "0",
-      ref: this.ref
-    }, React.createElement("span", {
-      className: classNames(classes.label, {
-        [classes.placeholder]: value === undefined
-      })
-    }, value || placeholder), React.createElement(ArrowDropDownIcon, {
-      className: iconClass
-    })) : React.createElement(ButtonBase, {
-      component: "div",
-      id: id,
-      className: rootClass,
-      onClick: this.handleClick,
-      disabled: disabled,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave,
-      onKeyDown: this.handleKeyDown,
-      onFocus: this.props.onFocus,
-      onBlur: this.handleBlur // buttref={this.ref}
-      ,
-      buttonRef: this.ref
-    }, React.createElement("span", {
-      className: classNames(classes.label, {
-        [classes.placeholder]: value === undefined
-      })
-    }, value || placeholder), onReset && focused && React.createElement("div", {
-      ref: el => {
-        this.resetIcon = el;
-      }
-    }, React.createElement(HiIcon, {
-      icon: "close",
-      size: 20,
-      color: "neutral",
-      onClick: this.handleReset,
-      onKeyDown: this.handleKeyDownReset,
-      tabIndex: 0
-    })), React.createElement(Icon, {
-      classes: {
-        root: iconClass
-      }
-    }, _ref));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
+    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
   }
 
-}
+  (0, _createClass2.default)(HiSelectInput, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _classNames2,
+          _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          noButton = _this$props.noButton,
+          disabled = _this$props.disabled,
+          onClick = _this$props.onClick,
+          onReset = _this$props.onReset,
+          value = _this$props.value,
+          open = _this$props.open,
+          focused = _this$props.focused,
+          error = _this$props.error,
+          id = _this$props.id,
+          placeholder = _this$props.placeholder; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+
+      var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), (0, _defineProperty2.default)(_classNames, classes.rootMobile, _reactDeviceDetect.isMobile), _classNames));
+      var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
+      return noButton ? _react.default.createElement("div", {
+        id: id,
+        className: rootClass,
+        onClick: onClick,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave,
+        onKeyDown: this.handleKeyDown,
+        onFocus: this.props.onFocus,
+        onBlur: this.props.onBlur,
+        role: "button",
+        tabIndex: "0",
+        ref: this.ref
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
+      }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
+        className: iconClass
+      })) : _react.default.createElement(_ButtonBase.default, {
+        component: "div",
+        id: id,
+        className: rootClass,
+        onClick: this.handleClick,
+        disabled: disabled,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave,
+        onKeyDown: this.handleKeyDown,
+        onFocus: this.props.onFocus,
+        onBlur: this.handleBlur // buttref={this.ref}
+        ,
+        buttonRef: this.ref
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
+      }, value || placeholder), onReset && focused && _react.default.createElement("div", {
+        ref: function ref(el) {
+          _this2.resetIcon = el;
+        }
+      }, _react.default.createElement(_HiIcon.default, {
+        icon: "close",
+        size: 20,
+        color: "neutral",
+        onClick: this.handleReset,
+        onKeyDown: this.handleKeyDownReset,
+        tabIndex: 0
+      })), _react.default.createElement(_Icon.default, {
+        classes: {
+          root: iconClass
+        }
+      }, _ref));
+    }
+  }]);
+  return HiSelectInput;
+}(_react.default.PureComponent);
 
-HiSelectInput.defaultProps = {
+(0, _defineProperty2.default)(HiSelectInput, "defaultProps", {
   disabled: false,
   open: false,
   focused: false,
   noButton: false,
   error: false
-};
-HiSelectInput.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,
-
-  /**
-   * Fonction de callback au survol de l'input
-   */
-  onMouseEnter: PropTypes.func,
-
-  /**
-   * Fonction de callback à la sortie du survol de l'input
-   */
-  onMouseLeave: 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
-   */
-  open: PropTypes.bool,
-
-  /**
-   * Placeholder
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * 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, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectInput'
-})(HiSelectInput);
+})(HiSelectInput);
+
+exports.default = _default;