choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
328 lines (273 loc) • 9.91 kB
JavaScript
;
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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _request = _interopRequireDefault(require("./request"));
var _uid = _interopRequireDefault(require("./uid"));
var _attrAccept = _interopRequireDefault(require("./attr-accept"));
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var AjaxUploader =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(AjaxUploader, _Component);
var _super = _createSuper(AjaxUploader);
function AjaxUploader() {
var _this;
(0, _classCallCheck2["default"])(this, AjaxUploader);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
uid: (0, _uid["default"])()
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "reqs", {});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (e) {
var files = e.target.files;
_this.uploadFiles(files);
_this.reset();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function () {
var el = _this.fileInput;
if (!el) {
return;
}
el.click();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e) {
if (e.key === 'Enter') {
_this.onClick();
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFileDrop", function (e) {
if (e.type === 'dragover') {
e.preventDefault();
return;
}
var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) {
return (0, _attrAccept["default"])(file, _this.props.accept);
});
_this.uploadFiles(files);
e.preventDefault();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveFileInput", function (node) {
_this.fileInput = node;
});
return _this;
}
(0, _createClass2["default"])(AjaxUploader, [{
key: "componentDidMount",
value: function componentDidMount() {
this._isMounted = true;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
this.abort();
}
}, {
key: "uploadFiles",
value: function uploadFiles(files) {
var _this2 = this;
var postFiles = Array.prototype.slice.call(files);
postFiles.forEach(function (file) {
file.uid = (0, _uid["default"])();
_this2.upload(file, postFiles);
});
}
}, {
key: "upload",
value: function upload(file, fileList) {
var _this3 = this;
var props = this.props;
if (!props.beforeUpload) {
// always async in case use react state to keep fileList
return setTimeout(function () {
return _this3.post(file);
}, 0);
}
var before = props.beforeUpload(file, fileList);
if (before && before.then) {
before.then(function (processedFile) {
var processedFileType = Object.prototype.toString.call(processedFile);
if (processedFileType === '[object File]' || processedFileType === '[object Blob]') {
_this3.post(processedFile);
} else {
_this3.post(file);
}
})["catch"](function (e) {
console && console.log(e); // eslint-disable-line
});
} else if (before !== false) {
setTimeout(function () {
return _this3.post(file);
}, 0);
}
}
}, {
key: "post",
value: function post(file) {
var _this4 = this;
var requestFileKeys = this.props.requestFileKeys;
if (!this._isMounted) {
return;
}
var props = this.props;
var data = props.data;
var onStart = props.onStart,
onProgress = props.onProgress;
if (typeof data === 'function') {
data = data(file);
}
var uid = file.uid;
var request = props.customRequest || _request["default"];
this.reqs[uid] = request({
action: props.action,
filename: props.name,
file: file,
data: data,
requestFileKeys: requestFileKeys,
// 判断传递的是数据不是文件
headers: props.headers,
withCredentials: props.withCredentials,
onProgress: onProgress ? function (e) {
onProgress(e, file);
} : null,
onSuccess: function onSuccess(ret, xhr) {
delete _this4.reqs[uid];
props.onSuccess(ret, file, xhr);
},
onError: function onError(err, ret) {
delete _this4.reqs[uid];
props.onError(err, ret, file);
}
});
onStart(file);
}
}, {
key: "reset",
value: function reset() {
this.setState({
uid: (0, _uid["default"])()
});
}
}, {
key: "abort",
value: function abort(file) {
var reqs = this.reqs;
if (file) {
var uid = file;
if (file && file.uid) {
uid = file.uid;
}
if (reqs[uid]) {
reqs[uid].abort();
delete reqs[uid];
}
} else {
Object.keys(reqs).forEach(function (uid) {
if (reqs[uid]) {
reqs[uid].abort();
}
delete reqs[uid];
});
}
}
}, {
key: "render",
value: function render() {
var _classNames;
var _this$props = this.props,
Tag = _this$props.component,
prefixCls = _this$props.prefixCls,
className = _this$props.className,
disabled = _this$props.disabled,
style = _this$props.style,
multiple = _this$props.multiple,
accept = _this$props.accept,
children = _this$props.children;
var cls = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls, true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, className, className), _classNames));
var events = disabled ? {} : {
onClick: this.onClick,
onKeyDown: this.onKeyDown,
onDrop: this.onFileDrop,
onDragOver: this.onFileDrop,
tabIndex: '0'
};
return _react["default"].createElement(Tag, (0, _extends2["default"])({}, events, {
className: cls,
role: "button",
style: style
}), _react["default"].createElement("input", {
type: "file",
ref: this.saveFileInput,
key: this.state.uid,
style: {
display: 'none'
},
accept: accept,
multiple: multiple,
onChange: this.onChange
}), children);
}
}]);
return AjaxUploader;
}(_react.Component);
(0, _defineProperty2["default"])(AjaxUploader, "propTypes", {
component: _propTypes["default"].string,
style: _propTypes["default"].object,
prefixCls: _propTypes["default"].string,
className: _propTypes["default"].string,
multiple: _propTypes["default"].bool,
disabled: _propTypes["default"].bool,
accept: _propTypes["default"].string,
children: _propTypes["default"].any,
onStart: _propTypes["default"].func,
data: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
headers: _propTypes["default"].object,
beforeUpload: _propTypes["default"].func,
customRequest: _propTypes["default"].func,
onProgress: _propTypes["default"].func,
withCredentials: _propTypes["default"].bool
});
var _default = AjaxUploader;
exports["default"] = _default;
//# sourceMappingURL=AjaxUploader.js.map