@hipay/hipay-material-ui 3.15.1 → 3.15.3-beta.0

package/HiForm/HiUpload.js

@@ -1,44 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.styles = exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _index = _interopRequireDefault(require("keycode/index"));
-
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
-
 var _HiUploadInput = _interopRequireDefault(require("./HiUploadInput"));
-
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var styles = function styles(theme) {
   return {
     flexContainer: {
@@ -52,8 +34,8 @@ var styles = function styles(theme) {
       padding: '24px',
       borderRadius: '2px',
       backgroundColor: theme.palette.background2,
-      border: "1px solid ".concat(theme.palette.middle.main),
-      color: "".concat(theme.palette.middle.main, " !important"),
+      border: "1px solid ".concat(theme.palette.warning.main),
+      color: "".concat(theme.palette.warning.main, " !important"),
       fontSize: '80px'
     },
     dragOver: {},
@@ -66,13 +48,13 @@ var styles = function styles(theme) {
       color: "".concat(theme.palette.neutral.main, " !important")
     },
     complete: {
-      border: "1px solid ".concat(theme.palette.positive.main),
-      color: "".concat(theme.palette.positive.main, " !important"),
+      border: "1px solid ".concat(theme.palette.success.main),
+      color: "".concat(theme.palette.success.main, " !important"),
       fontSize: '32px'
     },
     error: {
-      border: "1px solid ".concat(theme.palette.negative.main),
-      color: "".concat(theme.palette.negative.main, " !important")
+      border: "1px solid ".concat(theme.palette.error.main),
+      color: "".concat(theme.palette.error.main, " !important")
     },
     fileButton: {
       marginRight: 8,
@@ -87,34 +69,25 @@ var styles = function styles(theme) {
     focusable: {}
   };
 };
-
 exports.styles = styles;
-
 var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HiUpload, _React$PureComponent);
-
   var _super = _createSuper(HiUpload);
-
   function HiUpload() {
     var _this;
-
     (0, _classCallCheck2.default)(this, HiUpload);
     _this = _super.call(this);
-
+    // Action when files are dropped on the field
     _this.handleDrop = function (event) {
       if (event.path[0].id === _this.uploadIconRef.props.id) {
         event.preventDefault();
         event.stopPropagation();
-
         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);
         } else {
           _this.setState({
@@ -123,20 +96,17 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
     };
-
+    // Action when files are dragged over the field.
     _this.handleDragEnter = function (event) {
       event.preventDefault();
       event.stopPropagation();
-
       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,
             value: null
           }, 0);
-
           _this.setState({
             dragOver: true
           });
@@ -148,59 +118,47 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
     };
-
+    // Action when files are not dragged over the field anymore.
     _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({
           errorMessage: '',
           value: null
         }, 0);
-
         _this.setState({
           droppable: false,
           dragOver: false
         });
       }
     };
-
     _this.handleChange = function (event) {
       var index = _this.getNextInputIndex();
-
       var param = _this.handleFile(event.target.files, index);
-
       _this.props.onChange(param, index);
     };
-
     _this.handleEmptyField = function (event) {
       event.target.value = '';
     };
-
     _this.handleKeyPress = function (event) {
       var key = (0, _index.default)(event);
-
       if (key === 'enter' || key === 'space') {
         event.preventDefault();
-
         _this.uploadInput.click();
       }
     };
-
+    // Handles the file wether it is selected via the input or dropped on it.
     _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);
           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;
           error = true;
@@ -208,26 +166,23 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         errorMessage = _this.props.translations.errorDropMultiple;
       }
-
       return {
         errorMessage: errorMessage,
         error: error,
         value: file
       };
     };
-
     _this.createInputs = function (others) {
       var _this$props = _this.props,
-          inputs = _this$props.inputs,
-          values = _this$props.values;
-      var files = inputs; // unlimited number of files
+        inputs = _this$props.inputs,
+        values = _this$props.values;
+      var files = inputs;
 
+      // unlimited number of files
       if (inputs.length === 0) {
         files = values;
       }
-
       var inputComponents = [];
-
       for (var i = 0; i < files.length; i += 1) {
         if (files.length > 1 || values[i] && values[i].value) {
           inputComponents.push( /*#__PURE__*/_react.default.createElement(_HiUploadInput.default, (0, _extends2.default)({
@@ -245,19 +200,17 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
           }, others)));
         }
       }
-
       return inputComponents;
     };
-
     _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
-
+  }
 
+  // When component mounts, we add eventListeners to handle the file drag and drop
   (0, _createClass2.default)(HiUpload, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -281,8 +234,9 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "getNextInputIndex",
     value: function getNextInputIndex() {
-      var index = 0; // Add an input at the end
+      var index = 0;
 
+      // Add an input at the end
       if (!this.props.inputs.length) {
         index = this.props.values.length + 1;
       } else {
@@ -294,31 +248,29 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-
       return index;
-    } // Action when files are dropped on the field
-
+    }
   }, {
     key: "render",
     value: function render() {
       var _classNames,
-          _classNames2,
-          _this2 = this;
-
+        _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"]);
+        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;
+        dragOver = _this$state.dragOver,
+        droppable = _this$state.droppable;
       var complete = true;
       var empty = true;
-      var error = false; // For unlimited inputs: always grey
+      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) {
@@ -326,7 +278,6 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
       } 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;
@@ -336,10 +287,8 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-
       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;
-
       if (error) {
         icon = 'warning';
       } else if (complete) {
@@ -347,13 +296,10 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         icon = 'file_upload';
       }
-
       var focusable = true;
-
       if (complete && values.length > 1) {
         focusable = false;
       }
-
       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 /*#__PURE__*/_react.default.createElement("div", {
         className: classes.flexContainer
@@ -387,10 +333,8 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return HiUpload;
 }(_react.default.PureComponent);
-
 var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiUpload'
 })(HiUpload);
-
 exports.default = _default;

package/HiForm/HiUploadField.js

@@ -1,73 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
-
 var _HiUpload = _interopRequireDefault(require("./HiUpload"));
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var HiUploadField = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HiUploadField, _React$PureComponent);
-
   var _super = _createSuper(HiUploadField);
-
   function HiUploadField() {
     (0, _classCallCheck2.default)(this, HiUploadField);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(HiUploadField, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          className = _this$props.className,
-          label = _this$props.label,
-          helperIcon = _this$props.helperIcon,
-          helperText = _this$props.helperText,
-          values = _this$props.values,
-          fullWidth = _this$props.fullWidth,
-          required = _this$props.required,
-          HiInputLabelProps = _this$props.HiInputLabelProps,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth", "required", "HiInputLabelProps"]);
+        className = _this$props.className,
+        label = _this$props.label,
+        helperIcon = _this$props.helperIcon,
+        helperText = _this$props.helperText,
+        values = _this$props.values,
+        fullWidth = _this$props.fullWidth,
+        required = _this$props.required,
+        HiInputLabelProps = _this$props.HiInputLabelProps,
+        others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth", "required", "HiInputLabelProps"]);
       var empty = true;
       var error = false;
       var errorText = '';
-
       for (var i = 0, len = values.length; i < len; i += 1) {
         var value = values[i];
-
         if (value !== undefined) {
           empty = value.value !== null && !value.error ? false : empty;
           error = value.error || error;
           errorText += "".concat(value.errorMessage);
         }
       }
-
       return /*#__PURE__*/_react.default.createElement(_HiFormControl.default, {
         label: label,
         className: className,
@@ -85,7 +65,6 @@ var HiUploadField = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return HiUploadField;
 }(_react.default.PureComponent);
-
 HiUploadField.defaultProps = {
   helperText: '',
   helperIcon: false,