@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta3 → 2.3.0-rcstyleguide-beta4

package/old_components/HiForm/HiUpload.js

@@ -0,0 +1,385 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/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/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/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);
+
+  function HiUpload() {
+    var _this;
+
+    (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) {
+          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
+          });
+        }
+      }
+    });
+    (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.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
+          });
+        }
+      }
+    });
+    (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({
+          errorMessage: '',
+          value: null
+        }, 0);
+
+        _this.setState({
+          droppable: false,
+          dragOver: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+      var index = _this.getNextInputIndex();
+
+      var param = _this.handleFile(event.target.files, index);
+
+      _this.props.onChange(param, index);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmptyField", function (event) {
+      event.target.value = '';
+    });
+    (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();
+      }
+    });
+    (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);
+          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
+      };
+    });
+    (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;
+      }
+
+      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;
+    });
+    (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
+
+
+  (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,
+          _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;
+          }
+        }
+      }
+
+      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) {
+        icon = 'check_circle';
+      } 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 _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);
+
+exports.default = _default;

package/old_components/HiForm/HiUploadField.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
+
+var _HiUpload = _interopRequireDefault(require("./HiUpload"));
+
+var HiUploadField =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiUploadField, _React$PureComponent);
+
+  function HiUploadField() {
+    (0, _classCallCheck2.default)(this, HiUploadField);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiUploadField).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,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth"]);
+      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 _react.default.createElement(_HiFormControl.default, {
+        label: label,
+        className: className,
+        errorText: errorText,
+        error: error,
+        helperIcon: helperIcon,
+        helperText: helperText,
+        fullWidth: fullWidth
+      }, _react.default.createElement(_HiUpload.default, (0, _extends2.default)({
+        values: values
+      }, others)));
+    }
+  }]);
+  return HiUploadField;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiUploadField, "defaultProps", {
+  helperText: '',
+  helperIcon: false,
+  seeFile: true,
+  fullWidth: false
+});
+var _default = HiUploadField;
+exports.default = _default;