@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta5 → 2.3.1-rc1

package/old_components/HiForm/HiUpload.js

@@ -1,385 +0,0 @@
-"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

@@ -1,90 +0,0 @@
-"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;