@centreon/react-components
Version:
react components used by centreon web frontend
214 lines (181 loc) • 9.15 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactFiles = _interopRequireDefault(require("react-files"));
var _fileUpload = _interopRequireDefault(require("./file-upload.scss"));
var _ButtonRegular = _interopRequireDefault(require("../Button/ButtonRegular"));
var _Popup = _interopRequireDefault(require("../Popup"));
var _FileUploadItem = _interopRequireDefault(require("./FileUploadItem"));
var _IconClose = _interopRequireDefault(require("../Icon/IconClose"));
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/prop-types */
var FileUpload =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(FileUpload, _Component);
function FileUpload() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2["default"])(this, FileUpload);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(FileUpload)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
files: []
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFilesChange", function (files) {
_this.setState({
files: files
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFilesError", function (error) {
console.log("error code ".concat(error.code, ": ").concat(error.message));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveFile", function (idx) {
var files = _this.state.files;
files.splice(idx, 1);
_this.setState({
files: files
});
});
return _this;
}
(0, _createClass2["default"])(FileUpload, [{
key: "render",
value: function render() {
var _this2 = this;
var files = this.state.files;
var _this$props = this.props,
uploadingProgress = _this$props.uploadingProgress,
uploadStatus = _this$props.uploadStatus,
onClose = _this$props.onClose,
uploading = _this$props.uploading,
onApply = _this$props.onApply,
finished = _this$props.finished;
var isSuccessfull = true;
if (uploadStatus && !uploadStatus.status) {
isSuccessfull = false;
}
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Popup["default"], {
popupType: "small"
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"]['popup-header'], _fileUpload["default"][isSuccessfull ? 'blue-background-decorator' : 'red-background-decorator'])
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"].container__row)
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"]['container__col-xs-6'], _fileUpload["default"]['center-vertical'], _fileUpload["default"]['m-0'])
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"].file, _fileUpload["default"]['file-upload'])
}, _react["default"].createElement("span", {
className: (0, _classnames["default"])(_fileUpload["default"]['file-upload-title'])
}, _react["default"].createElement("span", {
className: (0, _classnames["default"])(_fileUpload["default"]['file-upload-icon'], _fileUpload["default"].white)
}), isSuccessfull ? 'File Upload' : 'No valid file uploaded.'))), !finished ? _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"]['container__col-xs-6'], _fileUpload["default"]['center-vertical'], _fileUpload["default"]['m-0'])
}, _react["default"].createElement(_reactFiles["default"], {
className: (0, _classnames["default"])('test'),
onChange: this.onFilesChange,
onError: this.onFilesError,
accepts: ['.zip', '.license'],
multiple: true,
maxFiles: 5,
maxFileSize: 1048576,
minFileSize: 0,
clickable: true
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"]['container__col-xs-6'], _fileUpload["default"]['text-right'])
}, _react["default"].createElement(_ButtonRegular["default"], {
buttonType: "bordered",
color: "white",
label: "BROWSE"
})))) : null), _react["default"].createElement("span", {
className: (0, _classnames["default"])(_fileUpload["default"]['icon-close'], _fileUpload["default"]['icon-close-middle']),
onClick: onClose
})), files.length > 0 ? _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"]['popup-body'])
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"].file, _fileUpload["default"]['file-upload'], _fileUpload["default"]['file-upload-body-container'])
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_fileUpload["default"]['file-upload-items'])
}, !uploadStatus ? files.map(function (file, idx) {
return _react["default"].createElement(_FileUploadItem["default"], {
icon: file.extension === 'zip' ? 'zip' : 'file',
iconStatus: uploading ? 'percentage' : 'warning',
title: file.name,
titleStatus: uploading ? 'percentage' : 'warning',
infoStatus: uploading ? 'percentage' : 'warning',
progressBar: uploading ? 'percentage' : '',
progressPercentage: uploadingProgress[idx] ? uploadingProgress[idx] : 0,
info: file.sizeReadable,
onDeleteFile: function onDeleteFile() {
_this2.onRemoveFile(idx);
},
uploading: uploading
});
}) : _react["default"].createElement(_react["default"].Fragment, null, uploadStatus.result.successed.map(function (_ref) {
var license = _ref.license;
return _react["default"].createElement(_FileUploadItem["default"], {
icon: "file",
iconStatus: "success",
title: license,
titleStatus: "success",
infoStatus: "success",
progressBar: "success",
progressPercentage: 100,
uploading: true
});
}), uploadStatus.result.errors.map(function (_ref2) {
var license = _ref2.license,
message = _ref2.message;
return _react["default"].createElement(_FileUploadItem["default"], {
icon: "file",
iconStatus: "error",
title: license,
titleStatus: "error",
infoStatus: "error",
progressBar: "error",
progressPercentage: 100,
message: message,
uploading: true
});
}))), !finished ? _react["default"].createElement(_ButtonRegular["default"], {
label: "Apply",
buttonType: uploading ? 'bordered' : 'regular',
color: uploading ? 'gray' : 'blue',
onClick: function onClick() {
if (!uploading) {
onApply(files);
}
}
}) : _react["default"].createElement(_ButtonRegular["default"], {
label: "Ok",
buttonType: "regular",
color: "green",
onClick: onClose
}))) : null, _react["default"].createElement(_IconClose["default"], {
iconPosition: "icon-close-position-small",
iconType: "middle",
onClick: onClose
})));
}
}]);
return FileUpload;
}(_react.Component);
var _default = FileUpload;
exports["default"] = _default;