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

package/es/HiForm/HiUploadInput.js

@@ -1,63 +1,63 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import HiIconButton from '../HiIconButton';
-import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
-import Delete from '@material-ui/icons/Delete';
-export const styles = theme => ({
-  root: _objectSpread({
-    position: 'relative'
-  }, theme.typography.body1, {
-    borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
-    paddingLeft: 8,
-    backgroundColor: theme.palette.local.background2,
-    height: 40,
-    display: 'inline-flex',
-    justifyContent: 'flex-start',
-    cursor: 'pointer',
-    '&$focused, &$dragOver': {
-      backgroundColor: theme.palette.global.background1
-    },
-    width: '100%',
-    // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-    '&:not($error)': {
-      marginTop: 1
-    }
-  }),
-  underline: {
-    '&:before': {
-      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";
 
-    },
-    '&: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.primary.main,
+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 _styles = require("@material-ui/core/styles");
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var _RemoveRedEye = _interopRequireDefault(require("@material-ui/icons/RemoveRedEye"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var styles = function styles(theme) {
+  return {
+    root: (0, _objectSpread2.default)({
+      position: 'relative'
+    }, theme.typography.body1, {
+      borderBottom: "1px solid ".concat(theme.palette.input.bottomLine),
+      paddingLeft: 8,
+      backgroundColor: theme.palette.background2,
+      height: 40,
+      display: 'inline-flex',
+      justifyContent: 'flex-start',
+      cursor: 'pointer',
+      '&$focused, &$dragOver': {
+        backgroundColor: theme.palette.background1
+      },
+      width: '100%',
+      // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
+      '&:not($error)': {
+        marginTop: 1
+      }
+    }),
+    underline: {
+      '&:before': {
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -65,271 +65,309 @@ 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)'
+      '&:hover:not($disabled):before': {
+        backgroundColor: theme.palette.input.bottomLine,
+        height: 2
       },
-      '&$dragOver:after': {
-        transform: 'scaleX(1)'
-      },
-      '&$focused:after': {
-        transform: 'scaleX(1)'
-      },
-      '&$error': {
-        borderBottom: `1px solid ${theme.palette.negative.main}`
+      '&$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'
       }
-    }
-  },
-  disabled: {
-    color: `${theme.palette.action.disabled}`,
-    '&:before': {
-      display: 'none'
     },
-    cursor: 'default'
-  },
-  focused: {
-    backgroundColor: theme.palette.background3
-  },
-  error: {},
-  label: _objectSpread({}, theme.typography.body1, {
-    fontWeight: theme.typography.fontWeightRegular,
-    caretColor: theme.palette.primary.main,
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    padding: `${theme.spacing(2) - 2}px 0 ${theme.spacing(2) - 1}px`,
-    height: 39,
-    display: 'inline-flex',
-    width: '100%',
-    cursor: 'pointer',
-    '&$empty': {
-      opacity: 0.42
-    }
-  }),
-  empty: {},
-  dragOver: {},
-  droppable: {},
-  endAdornment: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  icon: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    right: 0,
-    padding: '8px',
-    color: `${theme.palette.text.icon}`,
-    fontSize: 10,
-    transition: theme.transitions.create(['opacity', 'transform'], {
-      duration: theme.transitions.duration.shorter
+    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)'
+        },
+        '&$dragOver:after': {
+          transform: 'scaleX(1)'
+        },
+        '&$focused:after': {
+          transform: 'scaleX(1)'
+        },
+        '&$error': {
+          borderBottom: "1px solid ".concat(theme.palette.negative.main)
+        }
+      }
+    },
+    disabled: {
+      color: "".concat(theme.palette.action.disabled),
+      '&:before': {
+        display: 'none'
+      },
+      cursor: 'default'
+    },
+    focused: {
+      backgroundColor: theme.palette.background3
+    },
+    error: {},
+    label: (0, _objectSpread2.default)({}, theme.typography.body1, {
+      fontWeight: theme.typography.fontWeightRegular,
+      caretColor: theme.palette.primary.main,
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      padding: "".concat(theme.spacing(2) - 2, "px 0 ").concat(theme.spacing(2) - 1, "px"),
+      height: 39,
+      display: 'inline-flex',
+      width: '100%',
+      cursor: 'pointer',
+      '&$empty': {
+        opacity: 0.42
+      }
     }),
-    '&:hover': {
-      color: 'inherit',
-      background: 'none'
+    empty: {},
+    dragOver: {},
+    droppable: {},
+    endAdornment: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    icon: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      right: 0,
+      padding: '8px',
+      color: "".concat(theme.palette.text.icon),
+      fontSize: 10,
+      transition: theme.transitions.create(['opacity', 'transform'], {
+        duration: theme.transitions.duration.shorter
+      }),
+      '&:hover': {
+        color: 'inherit',
+        background: 'none'
+      }
     }
-  }
-});
+  };
+};
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_RemoveRedEye.default, null);
 
-var _ref = React.createElement(RemoveRedEye, null);
+var _ref2 = _react.default.createElement(_Delete.default, null);
 
-var _ref2 = React.createElement(Delete, null);
+var HiUploadInput =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiUploadInput, _React$Component);
 
-class HiUploadInput extends React.Component {
-  constructor(props) {
-    super(props);
+  function HiUploadInput(props) {
+    var _this;
 
-    this.handleDrop = event => {
-      if (event.target === this.uploadFieldRef) {
+    (0, _classCallCheck2.default)(this, HiUploadInput);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiUploadInput).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDrop", function (event) {
+      if (event.target === _this.uploadFieldRef) {
         event.preventDefault();
         event.stopPropagation();
 
-        if (this.state.droppable) {
-          const param = this.handleFile(event.dataTransfer.files);
-          this.setState({
+        if (_this.state.droppable) {
+          var param = _this.handleFile(event.dataTransfer.files);
+
+          _this.setState({
             dragOver: false
           });
-          this.props.onChange(param, this.props.index);
+
+          _this.props.onChange(param, _this.props.index);
         } else {
-          this.setState({
-            errorMessage: this.props.translations.errorDropMultiple,
+          _this.setState({
+            errorMessage: _this.props.translations.errorDropMultiple,
             dragOver: false
           });
         }
       }
-    };
-
-    this.handleDragEnter = event => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDragEnter", function (event) {
       event.preventDefault();
       event.stopPropagation();
 
-      if (event.target === this.uploadFieldRef) {
+      if (event.target === _this.uploadFieldRef) {
         if (event.dataTransfer.items.length !== 1) {
           event.dataTransfer.dropEffect = 'none';
-          this.props.onChange({
-            errorMessage: this.props.translations.errorDragEnter,
+
+          _this.props.onChange({
+            errorMessage: _this.props.translations.errorDragEnter,
             value: null
-          }, this.props.index);
-          this.setState({
+          }, _this.props.index);
+
+          _this.setState({
             dragOver: true
           });
         } else {
-          this.setState({
+          _this.setState({
             droppable: true,
             dragOver: true
           });
         }
       }
-    };
-
-    this.handleDragLeave = event => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDragLeave", function (event) {
       event.preventDefault();
       event.stopPropagation();
 
-      if (event.target === this.uploadFieldRef && event.relatedTarget.parentElement !== this.uploadFieldRef) {
-        this.props.onChange({
+      if (event.target === _this.uploadFieldRef && event.relatedTarget.parentElement !== _this.uploadFieldRef) {
+        _this.props.onChange({
           errorMessage: '',
           value: null
-        }, this.props.index);
-        this.setState({
+        }, _this.props.index);
+
+        _this.setState({
           droppable: false,
           dragOver: false
         });
       }
-    };
-
-    this.handleChange = event => {
-      const param = this.handleFile(event.target.files);
-      this.props.onChange(param, this.props.index);
-    };
-
-    this.handleDeleteFile = () => {
-      this.props.onDeleteFile(this.props.index);
-    };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+      var param = _this.handleFile(event.target.files);
 
-    this.handleEmptyField = event => {
+      _this.props.onChange(param, _this.props.index);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDeleteFile", function () {
+      _this.props.onDeleteFile(_this.props.index);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmptyField", function (event) {
       event.target.value = '';
-    };
-
-    this.handleSeeFile = () => {
-      this.props.onSeeFile(this.props.value);
-    };
-
-    this.handleFile = files => {
-      let error = false;
-      let errorMessage = '';
-      let file = null;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSeeFile", function () {
+      _this.props.onSeeFile(_this.props.value);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFile", function (files) {
+      var error = false;
+      var errorMessage = '';
+      var file = null;
 
       if (files.length === 1) {
         file = files[0];
         errorMessage = '';
 
-        if (file.size > this.props.maxSize) {
-          errorMessage += this.props.translations.errorSize.replace('maxSize', this.props.maxSize / 1000000);
+        if (file.size > _this.props.maxSize) {
+          errorMessage += _this.props.translations.errorSize.replace('maxSize', _this.props.maxSize / 1000000);
           error = true;
         }
 
-        if (this.props.acceptedTypes.length !== 0 && this.props.acceptedTypes.indexOf(file.type) === -1) {
-          errorMessage += this.props.translations.errorType;
+        if (_this.props.acceptedTypes.length !== 0 && _this.props.acceptedTypes.indexOf(file.type) === -1) {
+          errorMessage += _this.props.translations.errorType;
           error = true;
         }
       } else {
-        errorMessage = this.props.translations.errorDropMultiple;
+        errorMessage = _this.props.translations.errorDropMultiple;
       }
 
       return {
-        errorMessage,
-        error,
+        errorMessage: errorMessage,
+        error: error,
         value: file
       };
-    };
-
-    this.uploadFieldRef = void 0;
-    this.state = {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uploadFieldRef", void 0);
+    _this.state = {
       errorMessage: '',
       dragOver: false,
       droppable: false
     };
+    return _this;
   } // When component mounts, we add eventListeners to handle the file drag and drop
 
 
-  componentDidMount() {
-    this.uploadFieldRef.addEventListener('dragenter', this.handleDragEnter, false);
-    this.uploadFieldRef.addEventListener('dragleave', this.handleDragLeave, false);
-    this.uploadFieldRef.addEventListener('dragover', event => {
-      event.preventDefault();
-    }, false);
-    this.uploadFieldRef.addEventListener('drop', this.handleDrop, false);
-  }
-
-  componentWillUnmount() {
-    this.uploadFieldRef.removeEventListener('dragenter', this.handleDragEnter, false);
-    this.uploadFieldRef.removeEventListener('dragleave', this.handleDragLeave, false);
-    this.uploadFieldRef.removeEventListener('dragover', event => {
-      event.preventDefault();
-    }, false);
-    this.uploadFieldRef.removeEventListener('drop', this.handleDrop, false);
-  } // Action when files are dropped on the field
-
-
-  render() {
-    const {
-      placeholder,
-      classes,
-      disabled,
-      focused,
-      value,
-      error
-    } = this.props;
-    const {
-      dragOver,
-      errorMessage,
-      droppable
-    } = this.state; // On utilise classNames pour variabiliser les styles et merger les classes appliquées
-
-    const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
-      [classes.disabled]: disabled,
-      [classes.focused]: focused,
-      [classes.error]: error && !focused,
-      [classes.dragOver]: dragOver,
-      [classes.droppable]: droppable
-    });
-    const eyeButton = React.createElement(HiIconButton, {
-      className: classes.icon,
-      onClick: this.handleSeeFile
-    }, _ref);
-    return React.createElement("div", {
-      className: rootClass
-    }, React.createElement("label", {
-      className: classNames(classes.label, {
-        [classes.empty]: value === null
-      }),
-      ref: label => {
-        this.uploadFieldRef = label;
-      }
-    }, value ? value.name : error && errorMessage || placeholder, React.createElement("input", {
-      type: 'file',
-      onClick: this.handleEmptyField,
-      hidden: true,
-      onChange: this.handleChange
-    })), value === null || React.createElement("div", {
-      className: classes.endAdornment
-    }, this.props.seeFile && eyeButton, React.createElement(HiIconButton, {
-      className: classes.icon,
-      onClick: this.handleDeleteFile
-    }, _ref2)));
-  }
-
-}
+  (0, _createClass2.default)(HiUploadInput, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.uploadFieldRef.addEventListener('dragenter', this.handleDragEnter, false);
+      this.uploadFieldRef.addEventListener('dragleave', this.handleDragLeave, false);
+      this.uploadFieldRef.addEventListener('dragover', function (event) {
+        event.preventDefault();
+      }, false);
+      this.uploadFieldRef.addEventListener('drop', this.handleDrop, false);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.uploadFieldRef.removeEventListener('dragenter', this.handleDragEnter, false);
+      this.uploadFieldRef.removeEventListener('dragleave', this.handleDragLeave, false);
+      this.uploadFieldRef.removeEventListener('dragover', function (event) {
+        event.preventDefault();
+      }, false);
+      this.uploadFieldRef.removeEventListener('drop', this.handleDrop, false);
+    } // Action when files are dropped on the field
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this2 = this;
+
+      var _this$props = this.props,
+          placeholder = _this$props.placeholder,
+          classes = _this$props.classes,
+          disabled = _this$props.disabled,
+          focused = _this$props.focused,
+          value = _this$props.value,
+          error = _this$props.error;
+      var _this$state = this.state,
+          dragOver = _this$state.dragOver,
+          errorMessage = _this$state.errorMessage,
+          droppable = _this$state.droppable; // On utilise classNames pour variabiliser les styles et merger 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.dragOver, dragOver), (0, _defineProperty2.default)(_classNames, classes.droppable, droppable), _classNames));
+
+      var eyeButton = _react.default.createElement(_HiIconButton.default, {
+        className: classes.icon,
+        onClick: this.handleSeeFile
+      }, _ref);
+
+      return _react.default.createElement("div", {
+        className: rootClass
+      }, _react.default.createElement("label", {
+        className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.empty, value === null)),
+        ref: function ref(label) {
+          _this2.uploadFieldRef = label;
+        }
+      }, value ? value.name : error && errorMessage || placeholder, _react.default.createElement("input", {
+        type: 'file',
+        onClick: this.handleEmptyField,
+        hidden: true,
+        onChange: this.handleChange
+      })), value === null || _react.default.createElement("div", {
+        className: classes.endAdornment
+      }, this.props.seeFile && eyeButton, _react.default.createElement(_HiIconButton.default, {
+        className: classes.icon,
+        onClick: this.handleDeleteFile
+      }, _ref2)));
+    }
+  }]);
+  return HiUploadInput;
+}(_react.default.Component);
 
-HiUploadInput.defaultProps = {
+(0, _defineProperty2.default)(HiUploadInput, "defaultProps", {
   placeholder: 'Choose a file',
   disabled: false,
   focused: false,
@@ -342,79 +380,11 @@ HiUploadInput.defaultProps = {
     errorType: "Ce type de fichier n'est pas accepté",
     errorDragEnter: 'Contenu non correct'
   }
-};
-HiUploadInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Defines what kind of file types the input accepts. If empty, no restrictions about the file type.
-   */
-  acceptedTypes: PropTypes.array,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Is the field disabled.
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Is there an error with the file selected.
-   */
-  error: PropTypes.bool,
-
-  /**
-   * Is the field focused.
-   */
-  focused: PropTypes.bool,
-
-  /**
-   * The index of the input.
-   */
-  index: PropTypes.number,
-
-  /**
-   * Defines what size the file must not exceed (in bytes).
-   */
-  maxSize: PropTypes.number,
-
-  /**
-   * The change handler.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * The handler to clear the field.
-   */
-  onDeleteFile: PropTypes.func,
-
-  /**
-   * The handler to see the file.
-   */
-  onSeeFile: PropTypes.func,
-
-  /**
-   * The placeholder for the field.
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * set to false to hide the eye button
-   */
-  seeFile: PropTypes.bool,
-
-  /**
-   * The translations of the error messages.
-   */
-  translations: PropTypes.object,
-
-  /**
-   * The file value for the field.
-   */
-  value: PropTypes.object
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiUploadInput'
-})(HiUploadInput);
+})(HiUploadInput);
+
+exports.default = _default;