@hipay/hipay-material-ui 2.0.0-beta.58 → 2.0.0-beta.60

package/HiForm/HiFormControl.js

@@ -59,13 +59,11 @@ var styles = function styles(theme) {
       marginTop: 2
     },
     iconButton: {
-      position: 'absolute',
-      right: 5,
       cursor: 'pointer',
       zIndex: 1,
-      top: '-5px',
-      height: 24,
-      width: 24,
+      height: 20,
+      width: 20,
+      marginLeft: 3,
       '&$iconButtonError': {
         color: theme.palette.negative.main
       },
@@ -74,11 +72,18 @@ var styles = function styles(theme) {
       },
       '&$iconButtonInfoActive': {
         color: theme.palette.primary.main
+      },
+      '&$iconFullWidth': {
+        position: 'absolute',
+        right: 5,
+        marginLeft: 0,
+        bottom: 0
       }
     },
     iconButtonError: {},
     iconButtonInfo: {},
     iconButtonInfoActive: {},
+    iconFullWidth: {},
     errorDiv: (0, _extends2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
@@ -97,8 +102,15 @@ var styles = function styles(theme) {
       borderTop: '4px solid #000',
       position: 'absolute',
       bottom: -4,
-      right: 13
+      '&$arrowNotFullWidth': {
+        left: 8
+      },
+      '&$arrowFullWidth': {
+        right: 13
+      }
     },
+    arrowNotFullWidth: {},
+    arrowFullWidth: {},
     errorDivArrowDown: {
       borderTopColor: theme.palette.negative.main
     },
@@ -118,7 +130,8 @@ var styles = function styles(theme) {
       borderTopColor: '#ffffff'
     },
     icon: {
-      position: 'absolute'
+      position: 'absolute',
+      fontSize: 19
     }
   };
 };
@@ -197,6 +210,8 @@ function (_React$PureComponent) {
   (0, _createClass2.default)(HiFormControl, [{
     key: "render",
     value: function render() {
+      var _classNames2;
+
       var _this$props = this.props,
           children = _this$props.children,
           classes = _this$props.classes,
@@ -229,7 +244,7 @@ function (_React$PureComponent) {
       }, others), error && errorText && helperOpen && _react.default.createElement("div", {
         className: classes.errorDiv
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown)
+        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
       }), _react.default.createElement("span", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -238,7 +253,7 @@ function (_React$PureComponent) {
       })), helperIcon && helperText && !error && helperOpen && _react.default.createElement("div", {
         className: classes.helperDiv
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown)
+        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
       }), _react.default.createElement("span", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -251,12 +266,12 @@ function (_React$PureComponent) {
         disabled: disabled,
         focused: !disabled && (focused || hovered)
       }, InputLabelProps), error && errorText && _react.default.createElement(_HiIconButton.default, {
-        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError, (0, _defineProperty2.default)({}, classes.iconFullWidth, fullWidth)),
         onClick: this.handleHelperClick
       }, _react.default.createElement(_Warning.default, {
         className: (0, _classnames.default)(classes.icon)
       })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
-        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconButtonInfoActive, helperOpen), (0, _defineProperty2.default)(_classNames2, classes.iconFullWidth, fullWidth), _classNames2)),
         onClick: this.handleHelperClick
       }, _react.default.createElement(_Info.default, {
         className: (0, _classnames.default)(classes.icon)

package/HiForm/HiFormLabel.js

@@ -45,7 +45,9 @@ var styles = function styles(theme) {
       },
       '&$error': {
         color: theme.palette.negative.main
-      }
+      },
+      display: 'flex',
+      alignItems: 'center'
     }),
     optional: {
       fontSize: 11,

package/HiForm/HiInput.js

@@ -29,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _index = _interopRequireDefault(require("keycode/index"));
+
 var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
@@ -169,6 +171,25 @@ function (_React$PureComponent) {
 
     (0, _classCallCheck2.default)(this, HiInput);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiInput).call(this));
+
+    _this.handleKeyDown = function (event) {
+      var key = (0, _index.default)(event);
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+
+      if (key === 'enter' && _this.props.onSubmit) {
+        _this.props.onSubmit(event);
+      }
+    };
+
+    _this.handleClick = function () {
+      if (_this.props.onClick) {
+        _this.props.onClick();
+      }
+    };
+
     _this.state = {
       focused: false
     };
@@ -380,7 +401,8 @@ function (_React$PureComponent) {
         value: value,
         placeholder: placeholder,
         onFocus: this.handleFocus,
-        onKeyDown: this.props.onKeyDown,
+        onKeyDown: this.handleKeyDown,
+        onClick: this.handleClick,
         onBlur: this.handleBlur,
         inputRef: this.getInputElement,
         disabled: disabled,
@@ -509,6 +531,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée au click dans l'input
+   */
+  onClick: _propTypes.default.func,
+
   /**
    * Fonction de callback appelée au focus du champs
    */
@@ -549,6 +576,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onRightIconClick: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * Passe une ref callback au composant div parent
    */

package/HiForm/HiUpload.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -29,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _index = _interopRequireDefault(require("keycode/index"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _HiUploadInput = _interopRequireDefault(require("./HiUploadInput"));
@@ -38,7 +40,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 var styles = function styles(theme) {
   return {
     flexContainer: {
-      display: '  flex',
+      display: 'flex',
       alignItems: 'center'
     },
     statusIcon: {
@@ -52,8 +54,10 @@ var styles = function styles(theme) {
       color: "".concat(theme.palette.middle.main, " !important"),
       fontSize: '80px'
     },
+    dragOver: {},
     inputContainer: {
-      flex: '1'
+      flex: '1',
+      width: 'calc(100% - 88px)'
     },
     empty: {
       border: "1px solid ".concat(theme.palette.input.bottomLine),
@@ -67,7 +71,18 @@ var styles = function styles(theme) {
     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: {}
   };
 };
 
@@ -79,38 +94,248 @@ function (_React$PureComponent) {
   (0, _inherits2.default)(HiUpload, _React$PureComponent);
 
   function HiUpload() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, HiUpload);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiUpload).apply(this, arguments));
-  }
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiUpload).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({
+            dragOver: false
+          });
+        }
+      }
+    };
+
+    _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
+          });
+        } else {
+          _this.setState({
+            droppable: true,
+            dragOver: true
+          });
+        }
+      }
+    };
+
+    _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();
+      }
+    };
+
+    _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;
+        }
+      } 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
+
+      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(_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,
+            index: i,
+            key: inputs[i] ? inputs[i].id : "doc-".concat(i)
+          }, 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
+
 
   (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
+
+  }, {
     key: "render",
     value: function render() {
       var _classNames,
-          _this = this;
-
-      var _this$props = this.props,
-          inputs = _this$props.inputs,
-          classes = _this$props.classes,
-          values = _this$props.values,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["inputs", "classes", "values"]);
+          _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 (var i = 0, len = values.length; i < len; i += 1) {
-        var value = values[i];
+      var error = false; // For unlimited inputs: always grey
 
-        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;
+      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;
+          }
         }
       }
 
-      var statusClass = (0, _classnames.default)(classes.statusIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.empty, empty), (0, _defineProperty2.default)(_classNames, classes.complete, complete), (0, _defineProperty2.default)(_classNames, classes.error, error), _classNames));
+      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) {
@@ -121,29 +346,43 @@ function (_React$PureComponent) {
         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 _react.default.createElement("div", {
         className: classes.flexContainer
-      }, _react.default.createElement(_HiIcon.default, {
-        className: statusClass,
+      }, _react.default.createElement("label", {
+        htmlFor: "flat-button-file",
+        ref: function ref(label) {
+          _this2.uploadFieldRef = label;
+        },
+        tabIndex: "-1"
+      }, _react.default.createElement("input", {
+        hidden: true,
+        id: "flat-button-file",
+        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
-      }), _react.default.createElement("div", {
+        size: 32,
+        tabIndex: focusable ? '0' : '-1',
+        onKeyPress: this.handleKeyPress
+      })), _react.default.createElement("div", {
         className: classes.inputContainer
-      }, inputs.map(function (item, index) {
-        return _react.default.createElement(_HiUploadInput.default, (0, _extends2.default)({
-          maxSize: item.maxSize,
-          acceptedTypes: item.acceptedTypes,
-          placeholder: item.placeholder,
-          value: values[index] ? values[index].value : null,
-          error: values[index] ? values[index].error : null,
-          errorMessage: values[index] ? values[index].errorMessage : null,
-          onSeeFile: _this.handleSeeFile,
-          onDeleteFile: _this.props.onDeleteFile,
-          onChange: _this.props.onChange,
-          index: index,
-          key: item.id
-        }, others));
-      })));
+      }, this.createInputs(others)));
     }
   }]);
   return HiUpload;
@@ -170,8 +409,14 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   helperText: _propTypes.default.string,
 
+  /**
+   * id du composant
+   */
+  id: _propTypes.default.string.isRequired,
+
   /**
    * Array containing each of the inputs the component has to show (represented by an object).
+   * If empty => unlimited number of files accepted
    */
   inputs: _propTypes.default.array.isRequired,
 
@@ -191,7 +436,7 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
   onSeeFile: _propTypes.default.func,
 
   /**
-   * Valeurs des inputs
+   * True if can upload an unlimited number of files
    */
   values: _propTypes.default.array
 } : {};