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

package/es/HiForm/HiFormControl.js

@@ -1,245 +1,291 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
+"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 _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+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 _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiFormLabel = _interopRequireDefault(require("./HiFormLabel"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var _helpers = require("../utils/helpers");
+
+var _index = _interopRequireDefault(require("keycode/index"));
+
 // @inheritedComponent FormControl
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Warning from '@material-ui/icons/Warning';
-import Info from '@material-ui/icons/Info';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import { withStyles } from '@material-ui/core/styles';
-import HiFormLabel from './HiFormLabel';
-import HiIconButton from '../HiIconButton';
-import { escapeHTML } from '../utils/helpers';
-import keycode from 'keycode/index';
-export const styles = theme => ({
-  helperTextClassName: {
-    color: theme.palette.neutral.main,
-    fontSize: 11,
-    textAlign: 'right',
-    marginTop: 2
-  },
-  iconButton: {
-    cursor: 'pointer',
-    zIndex: 1,
-    height: 20,
-    width: 20,
-    marginLeft: 3,
-    '&$iconButtonError': {
-      color: theme.palette.negative.main
+var styles = function styles(theme) {
+  return {
+    helperTextClassName: {
+      color: theme.palette.neutral.main,
+      fontSize: 11,
+      textAlign: 'right',
+      marginTop: 2
     },
-    '&$iconButtonInfo': {
-      color: theme.palette.neutral.main
-    },
-    '&$iconButtonInfoActive': {
-      color: theme.palette.primary.main
+    iconButton: {
+      cursor: 'pointer',
+      zIndex: 1,
+      height: 20,
+      width: 20,
+      marginLeft: 3,
+      '&$iconButtonError': {
+        color: theme.palette.negative.main
+      },
+      '&$iconButtonInfo': {
+        color: theme.palette.neutral.main
+      },
+      '&$iconButtonInfoActive': {
+        color: theme.palette.primary.main
+      },
+      '&$iconFullWidth': {
+        position: 'absolute',
+        right: 5,
+        marginLeft: 0,
+        bottom: 0
+      }
     },
-    '&$iconFullWidth': {
+    iconButtonError: {},
+    iconButtonInfo: {},
+    iconButtonInfoActive: {},
+    iconFullWidth: {},
+    errorDiv: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      backgroundColor: theme.palette.negative.main,
+      color: '#FFFFFF',
+      padding: '16px 8px',
+      verticalAlign: 'middle',
+      borderRadius: 2,
+      position: 'relative',
+      marginBottom: 22,
+      fontWeight: theme.typography.fontWeightRegular
+    }),
+    arrowDown: {
+      width: 0,
+      height: 0,
+      borderLeft: '4px solid transparent',
+      borderRight: '4px solid transparent',
+      borderTop: '4px solid #000',
       position: 'absolute',
-      right: 5,
-      marginLeft: 0,
-      bottom: 0
-    }
-  },
-  iconButtonError: {},
-  iconButtonInfo: {},
-  iconButtonInfoActive: {},
-  iconFullWidth: {},
-  errorDiv: _objectSpread({}, theme.typography.b3, {
-    backgroundColor: theme.palette.negative.main,
-    color: '#FFFFFF',
-    padding: '16px 8px',
-    verticalAlign: 'middle',
-    borderRadius: 2,
-    position: 'relative',
-    marginBottom: 22,
-    fontWeight: theme.typography.fontWeightRegular
-  }),
-  arrowDown: {
-    width: 0,
-    height: 0,
-    borderLeft: '4px solid transparent',
-    borderRight: '4px solid transparent',
-    borderTop: '4px solid #000',
-    position: 'absolute',
-    bottom: -4,
-    '&$arrowNotFullWidth': {
-      left: 8
+      bottom: -4,
+      '&$arrowNotFullWidth': {
+        left: 8
+      },
+      '&$arrowFullWidth': {
+        right: 12
+      }
+    },
+    arrowNotFullWidth: {},
+    arrowFullWidth: {},
+    errorDivArrowDown: {
+      borderTopColor: theme.palette.negative.main
     },
-    '&$arrowFullWidth': {
-      right: 12
+    helperDiv: (0, _objectSpread2.default)({}, theme.typography.b2, {
+      width: '100%',
+      backgroundColor: '#ffffff',
+      color: theme.palette.neutral.normal,
+      padding: '16px 8px',
+      borderRadius: 2,
+      position: 'relative',
+      marginBottom: 8,
+      fontWeight: theme.typography.fontWeightRegular,
+      boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
+      lineHeight: 1.5
+    }),
+    helperDivArrowDown: {
+      borderTopColor: '#ffffff'
+    },
+    icon: {
+      position: 'absolute',
+      fontSize: 19
     }
-  },
-  arrowNotFullWidth: {},
-  arrowFullWidth: {},
-  errorDivArrowDown: {
-    borderTopColor: theme.palette.negative.main
-  },
-  helperDiv: _objectSpread({}, theme.typography.b2, {
-    width: '100%',
-    backgroundColor: '#ffffff',
-    color: theme.palette.neutral.normal,
-    padding: '16px 8px',
-    borderRadius: 2,
-    position: 'relative',
-    marginBottom: 8,
-    fontWeight: theme.typography.fontWeightRegular,
-    boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
-    lineHeight: 1.5
-  }),
-  helperDivArrowDown: {
-    borderTopColor: '#ffffff'
-  },
-  icon: {
-    position: 'absolute',
-    fontSize: 19
-  }
-});
+  };
+};
 /**
  * Champs input pour formulaire
  */
 
-class HiFormControl extends React.PureComponent {
-  constructor(props) {
-    super(props);
 
-    this.handleHelperClick = event => {
-      this.setState(prevState => ({
-        helperOpen: !prevState.helperOpen
-      }));
+exports.styles = styles;
+
+var HiFormControl =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiFormControl, _React$PureComponent);
+
+  function HiFormControl(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiFormControl);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiFormControl).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleHelperClick", function (event) {
+      _this.setState(function (prevState) {
+        return {
+          helperOpen: !prevState.helperOpen
+        };
+      });
 
       if (event) {
         event.preventDefault();
       }
-    };
-
-    this.handleKeyDown = event => {
-      const key = keycode(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      var key = (0, _index.default)(event);
 
       if (['space', 'enter'].includes(key)) {
-        this.handleHelperClick(event);
+        _this.handleHelperClick(event);
       }
-    };
-
-    this.handleHover = value => () => {
-      this.setState({
-        hovered: value
-      });
-    };
-
-    this.handleFocus = value => () => {
-      this.setState({
-        focused: value
-      });
-
-      if (value === false && this.state.hovered) {
-        this.setState({
-          hovered: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleHover", function (value) {
+      return function () {
+        _this.setState({
+          hovered: value
+        });
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function (value) {
+      return function () {
+        _this.setState({
+          focused: value
         });
-      }
-    };
 
-    this.state = {
+        if (value === false && _this.state.hovered) {
+          _this.setState({
+            hovered: false
+          });
+        }
+      };
+    });
+    _this.state = {
       helperOpen: false,
       focused: false,
       hovered: false
     };
-    this.handleHelperClick = this.handleHelperClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleHover = this.handleHover.bind(this);
+    _this.handleHelperClick = _this.handleHelperClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleHover = _this.handleHover.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
   }
 
-  render() {
-    const _this$props = this.props,
-          {
-      children,
-      classes,
-      className,
-      disabled,
-      error,
-      errorText,
-      id,
-      label,
-      InputLabelProps,
-      helperText,
-      helperIcon,
-      FormHelperTextProps,
-      fullWidth,
-      required,
-      multiline,
-      rootRef,
-      maxLength,
-      nbChars
-    } = _this$props,
-          others = _objectWithoutProperties(_this$props, ["children", "classes", "className", "disabled", "error", "errorText", "id", "label", "InputLabelProps", "helperText", "helperIcon", "FormHelperTextProps", "fullWidth", "required", "multiline", "rootRef", "maxLength", "nbChars"]);
-
-    const {
-      helperOpen,
-      focused,
-      hovered
-    } = this.state;
-    return React.createElement(FormControl, _extends({
-      fullWidth: fullWidth,
-      className: className,
-      error: error,
-      ref: rootRef
-    }, others), error && errorText && helperOpen && React.createElement("div", {
-      className: classes.errorDiv
-    }, React.createElement("div", {
-      className: classNames(classes.arrowDown, classes.errorDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
-    }), React.createElement("span", {
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: {
-        __html: escapeHTML(errorText)
-      }
-    })), helperIcon && helperText && !error && helperOpen && React.createElement("div", {
-      className: classes.helperDiv
-    }, React.createElement("div", {
-      className: classNames(classes.arrowDown, classes.helperDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
-    }), React.createElement("span", {
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: {
-        __html: escapeHTML(helperText)
-      }
-    })), label && React.createElement(HiFormLabel, _extends({
-      htmlFor: id,
-      label: label,
-      required: required,
-      disabled: disabled,
-      focused: !disabled && (focused || hovered)
-    }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
-      className: classNames(classes.iconButton, classes.iconButtonError, {
-        [classes.iconFullWidth]: fullWidth
-      }),
-      onClick: this.handleHelperClick
-    }, React.createElement(Warning, {
-      className: classNames(classes.icon)
-    })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
-      className: classNames(classes.iconButton, classes.iconButtonInfo, {
-        [classes.iconButtonInfoActive]: helperOpen,
-        [classes.iconFullWidth]: fullWidth
-      }),
-      onClick: this.handleHelperClick
-    }, React.createElement(Info, {
-      className: classNames(classes.icon)
-    }))), React.createElement("div", {
-      onMouseEnter: this.handleHover(true),
-      onMouseLeave: this.handleHover(false),
-      onFocus: this.handleFocus(true),
-      onBlur: this.handleFocus(false)
-    }, children), !multiline && helperText && !helperIcon && React.createElement(FormHelperText, _extends({
-      className: classes.helperTextClassName
-    }, FormHelperTextProps), helperText), multiline && React.createElement(FormHelperText, _extends({
-      className: classes.helperTextClassName
-    }, FormHelperTextProps), nbChars, "/", maxLength));
-  }
+  (0, _createClass2.default)(HiFormControl, [{
+    key: "render",
+    value: function render() {
+      var _classNames2;
 
-}
+      var _this$props = this.props,
+          children = _this$props.children,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          disabled = _this$props.disabled,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          id = _this$props.id,
+          label = _this$props.label,
+          InputLabelProps = _this$props.InputLabelProps,
+          helperText = _this$props.helperText,
+          helperIcon = _this$props.helperIcon,
+          FormHelperTextProps = _this$props.FormHelperTextProps,
+          fullWidth = _this$props.fullWidth,
+          required = _this$props.required,
+          multiline = _this$props.multiline,
+          rootRef = _this$props.rootRef,
+          maxLength = _this$props.maxLength,
+          nbChars = _this$props.nbChars,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["children", "classes", "className", "disabled", "error", "errorText", "id", "label", "InputLabelProps", "helperText", "helperIcon", "FormHelperTextProps", "fullWidth", "required", "multiline", "rootRef", "maxLength", "nbChars"]);
+      var _this$state = this.state,
+          helperOpen = _this$state.helperOpen,
+          focused = _this$state.focused,
+          hovered = _this$state.hovered;
+      return _react.default.createElement(_FormControl.default, (0, _extends2.default)({
+        fullWidth: fullWidth,
+        className: className,
+        error: error,
+        ref: rootRef
+      }, others), error && errorText && helperOpen && _react.default.createElement("div", {
+        className: classes.errorDiv
+      }, _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
+      }), _react.default.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: (0, _helpers.escapeHTML)(errorText)
+        }
+      })), helperIcon && helperText && !error && helperOpen && _react.default.createElement("div", {
+        className: classes.helperDiv
+      }, _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
+      }), _react.default.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: (0, _helpers.escapeHTML)(helperText)
+        }
+      })), label && _react.default.createElement(_HiFormLabel.default, (0, _extends2.default)({
+        htmlFor: id,
+        label: label,
+        required: required,
+        disabled: disabled,
+        focused: !disabled && (focused || hovered)
+      }, InputLabelProps), error && errorText && _react.default.createElement(_HiIconButton.default, {
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError, (0, _defineProperty2.default)({}, classes.iconFullWidth, fullWidth)),
+        onClick: this.handleHelperClick
+      }, _react.default.createElement(_Warning.default, {
+        className: (0, _classnames.default)(classes.icon)
+      })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconButtonInfoActive, helperOpen), (0, _defineProperty2.default)(_classNames2, classes.iconFullWidth, fullWidth), _classNames2)),
+        onClick: this.handleHelperClick
+      }, _react.default.createElement(_Info.default, {
+        className: (0, _classnames.default)(classes.icon)
+      }))), _react.default.createElement("div", {
+        onMouseEnter: this.handleHover(true),
+        onMouseLeave: this.handleHover(false),
+        onFocus: this.handleFocus(true),
+        onBlur: this.handleFocus(false)
+      }, children), !multiline && helperText && !helperIcon && _react.default.createElement(_FormHelperText.default, (0, _extends2.default)({
+        className: classes.helperTextClassName
+      }, FormHelperTextProps), helperText), multiline && _react.default.createElement(_FormHelperText.default, (0, _extends2.default)({
+        className: classes.helperTextClassName
+      }, FormHelperTextProps), nbChars, "/", maxLength));
+    }
+  }]);
+  return HiFormControl;
+}(_react.default.PureComponent);
 
-HiFormControl.defaultProps = {
+(0, _defineProperty2.default)(HiFormControl, "defaultProps", {
   fullWidth: true,
   required: true,
   disabled: false,
@@ -250,100 +296,11 @@ HiFormControl.defaultProps = {
   multiline: false,
   nbChars: 0,
   maxLength: 280
-};
-HiFormControl.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Contenu du form control
-   */
-  children: PropTypes.node,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Classes CSS appliquées
-   */
-  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.oneOfType([PropTypes.string, PropTypes.bool]),
-
-  /**
-   * Propriétés appliquées au composant FormHelperText
-   */
-  FormHelperTextProps: PropTypes.object,
-
-  /**
-   * Si `true`, le chamsp prendra toute la largeur.
-   */
-  fullWidth: PropTypes.bool,
-
-  /**
-   * 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,
-
-  /**
-   * Propriétés appliquées au composant InputLabel
-   */
-  InputLabelProps: PropTypes.object,
-
-  /**
-   * Label du champs
-   */
-  label: PropTypes.string,
-
-  /**
-   * Nombre de caractères max pour un text area
-   * Valable uniquement si l'option multiline est à true
-   */
-  maxLength: PropTypes.number,
-
-  /**
-   * Si `true`, le champs input sera un textarea
-   */
-  multiline: PropTypes.bool,
-
-  /**
-   * Nombre de caractères autorisés pour les textArea
-   */
-  nbChars: PropTypes.number,
-
-  /**
-   * true si champs obligatoire
-   */
-  required: PropTypes.bool,
-
-  /**
-   * Passé à la prop ref du composant FormControl
-   */
-  rootRef: PropTypes.string
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiFormControl'
-})(HiFormControl);
+})(HiFormControl);
+
+exports.default = _default;