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

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
 } : {};

package/HiForm/HiUploadField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,51 +25,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
-
 var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
 
 var _HiUpload = _interopRequireDefault(require("./HiUpload"));
 
-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.local.background2,
-      border: "1px solid ".concat(theme.palette.middle.main),
-      color: "".concat(theme.palette.middle.main, " !important"),
-      fontSize: '80px'
-    },
-    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")
-    }
-  };
-};
-
-exports.styles = styles;
-
 var HiUploadField =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -89,7 +48,8 @@ function (_React$PureComponent) {
           helperIcon = _this$props.helperIcon,
           helperText = _this$props.helperText,
           values = _this$props.values,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values"]);
+          fullWidth = _this$props.fullWidth,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth"]);
       var empty = true;
       var error = false;
       var errorText = '';
@@ -110,7 +70,8 @@ function (_React$PureComponent) {
         errorText: errorText,
         error: error,
         helperIcon: helperIcon,
-        helperText: helperText
+        helperText: helperText,
+        fullWidth: fullWidth
       }, _react.default.createElement(_HiUpload.default, (0, _extends2.default)({
         values: values
       }, others)));
@@ -121,7 +82,9 @@ function (_React$PureComponent) {
 
 HiUploadField.defaultProps = {
   helperText: '',
-  helperIcon: false
+  helperIcon: false,
+  seeFile: true,
+  fullWidth: false
 };
 HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -134,6 +97,11 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   className: _propTypes.default.string,
 
+  /**
+   * Si "true", applique l'attribut css correspondant
+   */
+  fullWidth: _propTypes.default.bool,
+
   /**
    * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
    */
@@ -169,15 +137,15 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSeeFile: _propTypes.default.func,
 
+  /**
+   * set to false to hide the eye button
+   */
+  seeFile: _propTypes.default.bool,
+
   /**
    * Valeurs des inputs
    */
   values: _propTypes.default.array
 } : {};
-
-var _default = (0, _withStyles.default)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiUploadField'
-})(HiUploadField);
-
+var _default = HiUploadField;
 exports.default = _default;

package/HiForm/HiUploadInput.js

@@ -46,6 +46,7 @@ var styles = function styles(theme) {
       height: 40,
       display: 'inline-flex',
       justifyContent: 'flex-start',
+      cursor: 'pointer',
       '&$focused, &$dragOver': {
         backgroundColor: theme.palette.global.background1
       },
@@ -112,7 +113,7 @@ var styles = function styles(theme) {
           transform: 'scaleX(1)'
         },
         '&$error': {
-          borderBottom: "1px solid ".concat(theme.palette.negative.normal)
+          borderBottom: "1px solid ".concat(theme.palette.negative.main)
         }
       }
     },
@@ -120,7 +121,8 @@ var styles = function styles(theme) {
       color: "".concat(theme.palette.action.disabled),
       '&:before': {
         display: 'none'
-      }
+      },
+      cursor: 'default'
     },
     focused: {
       backgroundColor: theme.palette.background3
@@ -137,6 +139,7 @@ var styles = function styles(theme) {
       height: 39,
       display: 'inline-flex',
       width: '100%',
+      cursor: 'pointer',
       '&$empty': {
         opacity: 0.42
       }
@@ -160,7 +163,7 @@ var styles = function styles(theme) {
       }),
       '&:hover': {
         color: 'inherit',
-        backgroundColor: theme.palette.local.background2
+        background: 'none'
       }
     }
   };
@@ -344,6 +347,12 @@ function (_React$Component) {
           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", {
@@ -358,10 +367,7 @@ function (_React$Component) {
         onChange: this.handleChange
       })), value === null || _react.default.createElement("div", {
         className: classes.endAdornment
-      }, _react.default.createElement(_HiIconButton.default, {
-        className: classes.icon,
-        onClick: this.handleSeeFile
-      }, _ref), _react.default.createElement(_HiIconButton.default, {
+      }, this.props.seeFile && eyeButton, _react.default.createElement(_HiIconButton.default, {
         className: classes.icon,
         onClick: this.handleDeleteFile
       }, _ref2)));
@@ -440,6 +446,11 @@ HiUploadInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   placeholder: _propTypes.default.string,
 
+  /**
+   * set to false to hide the eye button
+   */
+  seeFile: _propTypes.default.bool,
+
   /**
    * The translations of the error messages.
    */

package/HiSelectNew/HiDynamicSelect.js

@@ -80,7 +80,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -91,14 +91,14 @@ function (_React$PureComponent) {
       var _this$props2 = _this.props,
           nextPage = _this$props2.nextPage,
           translations = _this$props2.translations;
-      var itemList = (0, _toConsumableArray2.default)(options.length === 0 && !loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(options.length === 0 && !loading ? [{
         id: '_no_result',
         type: 'text',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: translations.no_result_match
-      }] : []).concat((0, _toConsumableArray2.default)(options), (0, _toConsumableArray2.default)(!loading && nextPage === 'manual' ? [{
+      }] : []), (0, _toConsumableArray2.default)(options), (0, _toConsumableArray2.default)(!loading && nextPage === 'manual' ? [{
         id: '_next_page',
         type: 'button',
         centered: true,