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

package/es/HiForm/HiUpload.js

@@ -1,397 +1,385 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import keycode from 'keycode/index';
-import { withStyles } from '@material-ui/core/styles';
-import HiUploadInput from './HiUploadInput';
-import HiIcon from '../HiIcon';
-export const styles = theme => ({
-  flexContainer: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  statusIcon: {
-    height: '80px',
-    width: '80px',
-    marginRight: '8px',
-    padding: '24px',
-    borderRadius: '2px',
-    backgroundColor: theme.palette.local.background2,
-    border: `1px solid ${theme.palette.middle.main}`,
-    color: `${theme.palette.middle.main} !important`,
-    fontSize: '80px'
-  },
-  dragOver: {},
-  inputContainer: {
-    flex: '1',
-    width: 'calc(100% - 88px)'
-  },
-  empty: {
-    border: `1px solid ${theme.palette.input.bottomLine}`,
-    color: `${theme.palette.neutral.main} !important`
-  },
-  complete: {
-    border: `1px solid ${theme.palette.positive.main}`,
-    color: `${theme.palette.positive.main} !important`,
-    fontSize: '32px'
-  },
-  error: {
-    border: `1px solid ${theme.palette.negative.main}`,
-    color: `${theme.palette.negative.main} !important`
-  },
-  fileButton: {
-    marginRight: 8,
-    '&$focusable': {
-      cursor: 'pointer',
-      '&:hover, &:focus, &$dragOver': {
-        border: `1px solid ${theme.palette.primary.main}`,
-        color: `${theme.palette.primary.main} !important`
-      }
-    }
-  },
-  focusable: {}
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+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 _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 _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _index = _interopRequireDefault(require("keycode/index"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiUploadInput = _interopRequireDefault(require("./HiUploadInput"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var styles = function styles(theme) {
+  return {
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    statusIcon: {
+      height: '80px',
+      width: '80px',
+      marginRight: '8px',
+      padding: '24px',
+      borderRadius: '2px',
+      backgroundColor: theme.palette.background2,
+      border: "1px solid ".concat(theme.palette.middle.main),
+      color: "".concat(theme.palette.middle.main, " !important"),
+      fontSize: '80px'
+    },
+    dragOver: {},
+    inputContainer: {
+      flex: '1',
+      width: 'calc(100% - 88px)'
+    },
+    empty: {
+      border: "1px solid ".concat(theme.palette.input.bottomLine),
+      color: "".concat(theme.palette.neutral.main, " !important")
+    },
+    complete: {
+      border: "1px solid ".concat(theme.palette.positive.main),
+      color: "".concat(theme.palette.positive.main, " !important"),
+      fontSize: '32px'
+    },
+    error: {
+      border: "1px solid ".concat(theme.palette.negative.main),
+      color: "".concat(theme.palette.negative.main, " !important")
+    },
+    fileButton: {
+      marginRight: 8,
+      '&$focusable': {
+        cursor: 'pointer',
+        '&:hover, &:focus, &$dragOver': {
+          border: "1px solid ".concat(theme.palette.primary.main),
+          color: "".concat(theme.palette.primary.main, " !important")
+        }
+      }
+    },
+    focusable: {}
+  };
+};
+
+exports.styles = styles;
+
+var HiUpload =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiUpload, _React$PureComponent);
 
-class HiUpload extends React.PureComponent {
-  constructor() {
-    super();
+  function HiUpload() {
+    var _this;
 
-    this.handleDrop = event => {
-      if (event.path[0].id === this.uploadIconRef.props.id) {
+    (0, _classCallCheck2.default)(this, HiUpload);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiUpload).call(this));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDrop", function (event) {
+      if (event.path[0].id === _this.uploadIconRef.props.id) {
         event.preventDefault();
         event.stopPropagation();
 
-        if (this.state.droppable) {
-          const index = this.getNextInputIndex();
-          const param = this.handleFile(event.dataTransfer.files, index);
-          this.setState({
+        if (_this.state.droppable) {
+          var index = _this.getNextInputIndex();
+
+          var param = _this.handleFile(event.dataTransfer.files, index);
+
+          _this.setState({
             dragOver: false
           });
-          this.props.onChange(param, 0);
+
+          _this.props.onChange(param, 0);
         } else {
-          this.setState({
+          _this.setState({
             dragOver: false
           });
         }
       }
-    };
-
-    this.handleDragEnter = event => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDragEnter", function (event) {
       event.preventDefault();
       event.stopPropagation();
 
-      if (event.path[0].id === this.uploadIconRef.props.id) {
+      if (event.path[0].id === _this.uploadIconRef.props.id) {
         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
           }, 0);
-          this.setState({
+
+          _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.path[0].id === this.uploadIconRef.props.id && event.relatedTarget.parentElement !== this.uploadFieldRef) {
-        this.props.onChange({
+      if (event.path[0].id === _this.uploadIconRef.props.id && event.relatedTarget.parentElement !== _this.uploadFieldRef) {
+        _this.props.onChange({
           errorMessage: '',
           value: null
         }, 0);
-        this.setState({
+
+        _this.setState({
           droppable: false,
           dragOver: false
         });
       }
-    };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+      var index = _this.getNextInputIndex();
 
-    this.handleChange = event => {
-      const index = this.getNextInputIndex();
-      const param = this.handleFile(event.target.files, index);
-      this.props.onChange(param, index);
-    };
+      var param = _this.handleFile(event.target.files, index);
 
-    this.handleEmptyField = event => {
+      _this.props.onChange(param, index);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmptyField", function (event) {
       event.target.value = '';
-    };
-
-    this.handleKeyPress = event => {
-      const key = keycode(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (event) {
+      var key = (0, _index.default)(event);
 
       if (key === 'enter' || key === 'space') {
         event.preventDefault();
-        this.uploadInput.click();
-      }
-    };
 
-    this.handleFile = (files, index) => {
-      let error = false;
-      let errorMessage = '';
-      let file = null;
+        _this.uploadInput.click();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFile", function (files, index) {
+      var error = false;
+      var errorMessage = '';
+      var file = null;
 
       if (files.length === 1) {
         file = files[0];
 
-        if (this.props.inputs[index] && file.size > this.props.inputs[index].maxSize) {
-          errorMessage += this.props.translations.errorSize.replace('maxSize', this.props.inputs[index].maxSize / 1000000);
+        if (_this.props.inputs[index] && file.size > _this.props.inputs[index].maxSize) {
+          errorMessage += _this.props.translations.errorSize.replace('maxSize', _this.props.inputs[index].maxSize / 1000000);
           error = true;
         }
 
-        if (this.props.inputs[index] && this.props.inputs[index].acceptedTypes && this.props.inputs[index].acceptedTypes.length !== 0 && this.props.inputs[index].acceptedTypes.indexOf(file.type) === -1) {
-          errorMessage += this.props.translations.errorType;
+        if (_this.props.inputs[index] && _this.props.inputs[index].acceptedTypes && _this.props.inputs[index].acceptedTypes.length !== 0 && _this.props.inputs[index].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.createInputs = others => {
-      const {
-        inputs,
-        values
-      } = this.props;
-      let files = inputs; // unlimited number of files
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createInputs", function (others) {
+      var _this$props = _this.props,
+          inputs = _this$props.inputs,
+          values = _this$props.values;
+      var files = inputs; // unlimited number of files
 
       if (inputs.length === 0) {
         files = values;
       }
 
-      const inputComponents = [];
+      var inputComponents = [];
 
-      for (let i = 0; i < files.length; i += 1) {
+      for (var i = 0; i < files.length; i += 1) {
         if (files.length > 1 || values[i] && values[i].value) {
-          inputComponents.push(React.createElement(HiUploadInput, _extends({
+          inputComponents.push(_react.default.createElement(_HiUploadInput.default, (0, _extends2.default)({
             maxSize: inputs[i] ? inputs[i].maxSize : undefined,
             acceptedTypes: inputs[i] ? inputs[i].acceptedTypes : undefined,
             placeholder: inputs[i] ? inputs[i].placeholder : undefined,
             value: values[i] ? values[i].value : null,
             error: values[i] ? values[i].error : null,
             errorMessage: values[i] ? values[i].errorMessage : null,
-            onSeeFile: this.handleSeeFile,
-            onDeleteFile: this.props.onDeleteFile,
-            onChange: this.props.onChange,
+            onSeeFile: _this.handleSeeFile,
+            onDeleteFile: _this.props.onDeleteFile,
+            onChange: _this.props.onChange,
             index: i,
-            key: inputs[i] ? inputs[i].id : `doc-${i}`
+            key: inputs[i] ? inputs[i].id : "doc-".concat(i)
           }, others)));
         }
       }
 
       return inputComponents;
-    };
-
-    this.uploadFieldRef = void 0;
-    this.state = {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uploadFieldRef", void 0);
+    _this.state = {
       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);
-  }
-
-  getNextInputIndex() {
-    let index = 0; // Add an input at the end
-
-    if (!this.props.inputs.length) {
-      index = this.props.values.length + 1;
-    } else {
-      // First empty input
-      for (let i = 0; i < this.props.values.length; i += 1) {
-        if (!this.props.values[i] || this.props.values[i].error || !this.props.values[i].value) {
-          index = i;
-          break;
+  (0, _createClass2.default)(HiUpload, [{
+    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);
+    }
+  }, {
+    key: "getNextInputIndex",
+    value: function getNextInputIndex() {
+      var index = 0; // Add an input at the end
+
+      if (!this.props.inputs.length) {
+        index = this.props.values.length + 1;
+      } else {
+        // First empty input
+        for (var i = 0; i < this.props.values.length; i += 1) {
+          if (!this.props.values[i] || this.props.values[i].error || !this.props.values[i].value) {
+            index = i;
+            break;
+          }
         }
       }
-    }
 
-    return index;
-  } // Action when files are dropped on the field
-
-
-  render() {
-    const _this$props = this.props,
-          {
-      id,
-      inputs,
-      classes,
-      values,
-      focused
-    } = _this$props,
-          others = _objectWithoutProperties(_this$props, ["id", "inputs", "classes", "values", "focused"]);
-
-    const {
-      dragOver,
-      droppable
-    } = this.state;
-    let complete = true;
-    let empty = true;
-    let error = false; // For unlimited inputs: always grey
-
-    if (!inputs.length) {
-      complete = false;
-    } else if (values.length === 0 || inputs.length > 0 && inputs.length !== values.length) {
-      complete = false;
-    } else {
-      for (let i = 0, len = values.length; i < len; i += 1) {
-        const value = values[i];
-
-        if (value !== undefined) {
-          complete = value.value === null || value.error ? false : complete;
-          empty = value.value !== null && !value.error ? false : empty;
-          error = value.error || error;
-        } else {
-          complete = false;
+      return index;
+    } // Action when files are dropped on the field
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _classNames2,
+          _this2 = this;
+
+      var _this$props2 = this.props,
+          id = _this$props2.id,
+          inputs = _this$props2.inputs,
+          classes = _this$props2.classes,
+          values = _this$props2.values,
+          focused = _this$props2.focused,
+          others = (0, _objectWithoutProperties2.default)(_this$props2, ["id", "inputs", "classes", "values", "focused"]);
+      var _this$state = this.state,
+          dragOver = _this$state.dragOver,
+          droppable = _this$state.droppable;
+      var complete = true;
+      var empty = true;
+      var error = false; // For unlimited inputs: always grey
+
+      if (!inputs.length) {
+        complete = false;
+      } else if (values.length === 0 || inputs.length > 0 && inputs.length !== values.length) {
+        complete = false;
+      } else {
+        for (var i = 0, len = values.length; i < len; i += 1) {
+          var value = values[i];
+
+          if (value !== undefined) {
+            complete = value.value === null || value.error ? false : complete;
+            empty = value.value !== null && !value.error ? false : empty;
+            error = value.error || error;
+          } else {
+            complete = false;
+          }
         }
       }
-    }
 
-    const statusClass = classNames(classes.statusIcon, {
-      [classes.empty]: empty,
-      [classes.complete]: complete
-    });
-    let icon;
-
-    if (error) {
-      icon = 'warning';
-    } else if (complete) {
-      icon = 'check_circle';
-    } else {
-      icon = 'file_upload';
-    }
+      var statusClass = (0, _classnames.default)(classes.statusIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.empty, empty), (0, _defineProperty2.default)(_classNames, classes.complete, complete), _classNames));
+      var icon;
 
-    let focusable = true;
+      if (error) {
+        icon = 'warning';
+      } else if (complete) {
+        icon = 'check_circle';
+      } else {
+        icon = 'file_upload';
+      }
 
-    if (complete && values.length > 1) {
-      focusable = false;
-    }
+      var focusable = true;
 
-    const iconClass = classNames(statusClass, classes.fileButton, {
-      [classes.dragOver]: dragOver,
-      [classes.droppable]: droppable,
-      [classes.focused]: focused,
-      [classes.error]: error && !focused,
-      [classes.focusable]: focusable
-    });
-    return React.createElement("div", {
-      className: classes.flexContainer
-    }, React.createElement("label", {
-      ref: label => {
-        this.uploadFieldRef = label;
-      },
-      tabIndex: "-1"
-    }, React.createElement("input", {
-      hidden: true,
-      type: !complete || values.length === 1 ? 'file' : 'hidden',
-      onChange: this.handleChange,
-      onClick: focusable ? this.handleEmptyField : undefined,
-      ref: el => {
-        this.uploadInput = el;
+      if (complete && values.length > 1) {
+        focusable = false;
       }
-    }), React.createElement(HiIcon, {
-      ref: uploadIcon => {
-        this.uploadIconRef = uploadIcon;
-      },
-      id: `iconUpload-${id}`,
-      className: iconClass,
-      icon: icon,
-      size: 32,
-      tabIndex: focusable ? '0' : '-1',
-      onKeyPress: this.handleKeyPress
-    })), React.createElement("div", {
-      className: classes.inputContainer
-    }, this.createInputs(others)));
-  }
-
-}
-
-HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Classes CSS appliquées.
-   */
-  className: 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,
-
-  /**
-   * Identifiant unique
-   */
-  id: PropTypes.string,
-
-  /**
-   * Array containing each of the inputs the component has to show (represented by an object).
-   * If empty => unlimited number of files accepted
-   */
-  inputs: PropTypes.array.isRequired,
-
-  /**
-   * The method given to change the file.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * The method to delete a file.
-   */
-  onDeleteFile: PropTypes.func,
-
-  /**
-   * The method given to see the file.
-   */
-  onSeeFile: PropTypes.func,
-
-  /**
-   * True if can upload an unlimited number of files
-   */
-  values: PropTypes.array
-} : {};
-export default withStyles(styles, {
+
+      var iconClass = (0, _classnames.default)(statusClass, classes.fileButton, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.dragOver, dragOver), (0, _defineProperty2.default)(_classNames2, classes.droppable, droppable), (0, _defineProperty2.default)(_classNames2, classes.focused, focused), (0, _defineProperty2.default)(_classNames2, classes.error, error && !focused), (0, _defineProperty2.default)(_classNames2, classes.focusable, focusable), _classNames2));
+      return _react.default.createElement("div", {
+        className: classes.flexContainer
+      }, _react.default.createElement("label", {
+        ref: function ref(label) {
+          _this2.uploadFieldRef = label;
+        },
+        tabIndex: "-1"
+      }, _react.default.createElement("input", {
+        hidden: true,
+        type: !complete || values.length === 1 ? 'file' : 'hidden',
+        onChange: this.handleChange,
+        onClick: focusable ? this.handleEmptyField : undefined,
+        ref: function ref(el) {
+          _this2.uploadInput = el;
+        }
+      }), _react.default.createElement(_HiIcon.default, {
+        ref: function ref(uploadIcon) {
+          _this2.uploadIconRef = uploadIcon;
+        },
+        id: "iconUpload-".concat(id),
+        className: iconClass,
+        icon: icon,
+        size: 32,
+        tabIndex: focusable ? '0' : '-1',
+        onKeyPress: this.handleKeyPress
+      })), _react.default.createElement("div", {
+        className: classes.inputContainer
+      }, this.createInputs(others)));
+    }
+  }]);
+  return HiUpload;
+}(_react.default.PureComponent);
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiUpload'
-})(HiUpload);
+})(HiUpload);
+
+exports.default = _default;