@hipay/hipay-material-ui 4.0.1-beta3 → 4.0.1-beta5

package/es/HiForm/HiSlider.js

@@ -1,25 +1,41 @@
 "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 _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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
 var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
+
 var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var styles = exports.styles = function styles(theme) {
+
+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 {
     barContainer: {
       width: '100%',
@@ -95,20 +111,30 @@ var styles = exports.styles = function styles(theme) {
     }
   };
 };
-
 /**
  * HiSlider component
  */
+
+
+exports.styles = styles;
+
 var HiSlider = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HiSlider, _React$Component);
+
+  var _super = _createSuper(HiSlider);
+
   function HiSlider(props) {
     var _this;
+
     (0, _classCallCheck2.default)(this, HiSlider);
-    _this = _callSuper(this, HiSlider, [props]);
+    _this = _super.call(this, props);
+
     _this.handleChange = function (event) {
       _this.props.onChange(parseFloat(event.target.value));
+
       _this.textValueWidth = _this.textValue.offsetWidth;
     };
+
     _this.handleFocus = function (isFocused) {
       return function () {
         _this.setState({
@@ -116,17 +142,19 @@ var HiSlider = /*#__PURE__*/function (_React$Component) {
         });
       };
     };
+
     _this.state = {
       focused: false
     };
     return _this;
   }
-
   /**
    * Measures several components once they are mounted.
    * If the value and a label (left or right) are hovered,
    * we hide this label.
    */
+
+
   (0, _createClass2.default)(HiSlider, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -134,17 +162,19 @@ var HiSlider = /*#__PURE__*/function (_React$Component) {
       this.rightLabelWidth = this.rightLabel.offsetWidth;
       this.textValueWidth = this.textValue.offsetWidth;
       this.barContainerWidth = this.barContainer.offsetWidth;
+
       var _this$getHovering = this.getHovering(),
-        hoveringLeft = _this$getHovering.hoveringLeft,
-        hoveringRight = _this$getHovering.hoveringRight;
+          hoveringLeft = _this$getHovering.hoveringLeft,
+          hoveringRight = _this$getHovering.hoveringRight;
+
       if (hoveringLeft || hoveringRight) {
         this.forceUpdate();
       }
     }
-
     /**
      * Calculates if the labels are hovered.
      */
+
   }, {
     key: "getHovering",
     value: function getHovering() {
@@ -160,25 +190,28 @@ var HiSlider = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
+
       var _this$props = this.props,
-        classes = _this$props.classes,
-        className = _this$props.className,
-        min = _this$props.min,
-        max = _this$props.max,
-        leftLabel = _this$props.leftLabel,
-        rightLabel = _this$props.rightLabel,
-        step = _this$props.step,
-        suffix = _this$props.suffix,
-        id = _this$props.id,
-        label = _this$props.label,
-        value = _this$props.value,
-        theme = _this$props.theme;
+          classes = _this$props.classes,
+          className = _this$props.className,
+          min = _this$props.min,
+          max = _this$props.max,
+          leftLabel = _this$props.leftLabel,
+          rightLabel = _this$props.rightLabel,
+          step = _this$props.step,
+          suffix = _this$props.suffix,
+          id = _this$props.id,
+          label = _this$props.label,
+          value = _this$props.value,
+          theme = _this$props.theme;
       var focused = this.state.focused;
       var ratio = (value - min) / (max - min);
       var percentage = ratio * 100;
+
       var _this$getHovering2 = this.getHovering(),
-        hoveringLeft = _this$getHovering2.hoveringLeft,
-        hoveringRight = _this$getHovering2.hoveringRight;
+          hoveringLeft = _this$getHovering2.hoveringLeft,
+          hoveringRight = _this$getHovering2.hoveringRight;
+
       var barColor = focused ? theme.palette.primary.dark : theme.palette.primary.main;
       return (
         /*#__PURE__*/
@@ -245,8 +278,11 @@ var HiSlider = /*#__PURE__*/function (_React$Component) {
   }]);
   return HiSlider;
 }(_react.default.Component);
-var _default = exports.default = (0, _withStyles.default)(styles, {
+
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiSlider',
   withTheme: true
-})(HiSlider);
+})(HiSlider);
+
+exports.default = _default;

package/es/HiForm/HiTextField.js

@@ -1,34 +1,54 @@
 "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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+
 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 _HiInput = _interopRequireDefault(require("./HiInput"));
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // @inheritedComponent TextField
+
+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; } }
+
 /**
  * Champs input pour formulaire
  */
 var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HiTextField, _React$PureComponent);
+
+  var _super = _createSuper(HiTextField);
+
   function HiTextField(props) {
     var _this;
+
     (0, _classCallCheck2.default)(this, HiTextField);
-    _this = _callSuper(this, HiTextField, [props]);
+    _this = _super.call(this, props);
+
     _this.focus = function () {
       _this.input.focus();
     };
+
     _this.state = {
       nbChars: props.value ? props.value.length : 0
     };
@@ -37,6 +57,7 @@ var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
     _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
+
   (0, _createClass2.default)(HiTextField, [{
     key: "handleBlur",
     value: function handleBlur(event) {
@@ -48,10 +69,12 @@ var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
     key: "handleChange",
     value: function handleChange(event) {
       var value = event.target.value;
+
       if (value.length <= this.props.maxLength) {
         if (this.props.onChange) {
           this.props.onChange(event);
         }
+
         if (this.props.multiline === true) {
           this.setState({
             nbChars: value.length
@@ -70,27 +93,28 @@ var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this2 = this;
+
       var _this$props = this.props,
-        className = _this$props.className,
-        disabled = _this$props.disabled,
-        error = _this$props.error,
-        errorText = _this$props.errorText,
-        id = _this$props.id,
-        label = _this$props.label,
-        helperText = _this$props.helperText,
-        helperIcon = _this$props.helperIcon,
-        fullWidth = _this$props.fullWidth,
-        required = _this$props.required,
-        type = _this$props.type,
-        multiline = _this$props.multiline,
-        placeholder = _this$props.placeholder,
-        value = _this$props.value,
-        HiInputProps = _this$props.HiInputProps,
-        HiInputLabelProps = _this$props.HiInputLabelProps,
-        name = _this$props.name,
-        rows = _this$props.rows,
-        maxLength = _this$props.maxLength,
-        customRef = _this$props.customRef;
+          className = _this$props.className,
+          disabled = _this$props.disabled,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          id = _this$props.id,
+          label = _this$props.label,
+          helperText = _this$props.helperText,
+          helperIcon = _this$props.helperIcon,
+          fullWidth = _this$props.fullWidth,
+          required = _this$props.required,
+          type = _this$props.type,
+          multiline = _this$props.multiline,
+          placeholder = _this$props.placeholder,
+          value = _this$props.value,
+          HiInputProps = _this$props.HiInputProps,
+          HiInputLabelProps = _this$props.HiInputLabelProps,
+          name = _this$props.name,
+          rows = _this$props.rows,
+          maxLength = _this$props.maxLength,
+          customRef = _this$props.customRef;
       var nbChars = this.state.nbChars;
       return /*#__PURE__*/_react.default.createElement(_HiFormControl.default, {
         label: label,
@@ -132,6 +156,7 @@ var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return HiTextField;
 }(_react.default.PureComponent);
+
 HiTextField.defaultProps = {
   name: '',
   type: 'text',
@@ -145,4 +170,5 @@ HiTextField.defaultProps = {
   multiline: false,
   maxLength: 280
 };
-var _default = exports.default = HiTextField;
+var _default = HiTextField;
+exports.default = _default;

package/es/HiForm/HiUpload.js

@@ -1,27 +1,45 @@
 "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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
 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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var styles = exports.styles = function styles(theme) {
+
+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: {
       display: 'flex',
@@ -69,23 +87,34 @@ var styles = exports.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 = _callSuper(this, HiUpload);
-    // Action when files are dropped on the field
+    _this = _super.call(this);
+
     _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({
@@ -94,17 +123,20 @@ 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
           });
@@ -116,47 +148,59 @@ 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;
@@ -164,23 +208,26 @@ 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;
+          inputs = _this$props.inputs,
+          values = _this$props.values;
+      var files = inputs; // unlimited number of files
 
-      // 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)({
@@ -198,17 +245,19 @@ 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() {
@@ -232,9 +281,8 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "getNextInputIndex",
     value: function getNextInputIndex() {
-      var index = 0;
+      var index = 0; // Add an input at the end
 
-      // Add an input at the end
       if (!this.props.inputs.length) {
         index = this.props.values.length + 1;
       } else {
@@ -246,27 +294,31 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
+
       return index;
-    }
+    } // Action when files are dropped on the field
+
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      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"]);
+          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;
+      var error = false; // For unlimited inputs: always grey
 
-      // For unlimited inputs: always grey
       if (!inputs.length) {
         complete = false;
       } else if (values.length === 0 || inputs.length > 0 && inputs.length !== values.length) {
@@ -274,6 +326,7 @@ 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;
@@ -283,8 +336,10 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-      var statusClass = (0, _classnames.default)(classes.statusIcon, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, classes.empty, empty), classes.complete, complete));
+
+      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) {
@@ -292,11 +347,14 @@ 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, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, classes.dragOver, dragOver), classes.droppable, droppable), classes.focused, focused), classes.error, error && !focused), classes.focusable, focusable));
+
+      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
       }, /*#__PURE__*/_react.default.createElement("label", {
@@ -329,7 +387,10 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return HiUpload;
 }(_react.default.PureComponent);
-var _default = exports.default = (0, _withStyles.default)(styles, {
+
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiUpload'
-})(HiUpload);
+})(HiUpload);
+
+exports.default = _default;