choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
341 lines (285 loc) • 11.1 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _request = _interopRequireDefault(require("./request"));
var _uid = _interopRequireDefault(require("./uid"));
var _attrAccept = _interopRequireDefault(require("./attr-accept"));
var _traverseFileTree = _interopRequireDefault(require("./traverseFileTree"));
var _utils = require("../../upload/utils");
/* eslint react/no-is-mounted:0 react/sort-comp:0 */
var AjaxUploader = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(AjaxUploader, _Component);
var _super = (0, _createSuper2["default"])(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;
var _this$props = _this.props,
onReUpload = _this$props.onReUpload,
originReuploadItem = _this$props.originReuploadItem;
if (originReuploadItem && originReuploadItem !== null) {
// Upload 文件重新上传的替换操作只考虑单个文件
var targetFile = files[0];
targetFile ? onReUpload(targetFile) : null;
} else {
_this.uploadFiles(files);
_this.reset();
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (e) {
var el = _this.fileInput;
if (!el) {
return;
}
if (e && e.target === el) return;
if (_this.props.fileInputClick) {
_this.props.fileInputClick(el);
} else {
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) {
e.preventDefault();
if (e.type === 'dragover') {
return;
}
var uploadCount = 0;
if (_this.props.directory) {
(0, _traverseFileTree["default"])(e.dataTransfer.items, function (files) {
uploadCount++;
if (_this.props.multiple || uploadCount <= 1) {
_this.uploadFiles(files);
}
}, function (_file) {
return (0, _attrAccept["default"])(_file, _this.props.accept);
});
} else {
var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) {
return (0, _attrAccept["default"])(file, _this.props.accept);
});
var filesResult = _this.props.multiple || files.length <= 1 ? files : [files[0]];
_this.uploadFiles(filesResult);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "uploadFiles", function (files) {
var _this$props$beforeUpl = _this.props.beforeUploadFiles,
beforeUploadFiles = _this$props$beforeUpl === void 0 ? _noop["default"] : _this$props$beforeUpl;
var postFiles = Array.prototype.slice.call(files).map(function (file) {
file.uid = (0, _uid["default"])();
return file;
});
Promise.resolve(beforeUploadFiles(files)).then(function (res) {
if (res !== false) {
postFiles.forEach(function (file) {
_this.upload(file, postFiles);
});
}
});
});
(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: "upload",
value: function upload(file, fileList) {
var _this2 = this;
var _this$props2 = this.props,
originReuploadItem = _this$props2.originReuploadItem,
originFileList = _this$props2.fileList,
setReplaceReuploadItem = _this$props2.setReplaceReuploadItem; // Upload 重新上传的替换处理
if (originReuploadItem) {
var reuploadItemIndex = originFileList.findIndex(function (item) {
return item.uid === originReuploadItem.uid;
});
file.uid = originReuploadItem.uid;
file.originFileObj = originReuploadItem;
originFileList[reuploadItemIndex] = (0, _utils.fileToObject)(file);
setReplaceReuploadItem(null);
}
var props = this.props;
if (!props.beforeUpload) {
// always async in case use react state to keep fileList
return setTimeout(function () {
return _this2.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]') {
return _this2.post(processedFile);
}
return _this2.post(file);
})["catch"](function (e) {
console && console.log(e); // eslint-disable-line
});
} else if (before !== false) {
setTimeout(function () {
return _this2.post(file);
}, 0);
}
}
}, {
key: "post",
value: function post(file) {
var _this3 = this;
if (!this._isMounted) {
return;
}
var props = this.props;
var data = props.data,
requestFileKeys = props.requestFileKeys;
var onStart = props.onStart,
onProgress = props.onProgress;
if (typeof data === 'function') {
data = data(file);
}
new Promise(function (resolve) {
var action = props.action;
if (typeof action === 'function') {
return resolve(action(file));
}
resolve(action);
}).then(function (action) {
var uid = file.uid;
var request = props.customRequest || _request["default"];
_this3.reqs[uid] = request({
action: 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 _this3.reqs[uid];
props.onSuccess(ret, file, xhr);
},
onError: function onError(err, ret) {
delete _this3.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.uid ? file.uid : file;
if (reqs[uid] && reqs[uid].abort) {
reqs[uid].abort();
}
delete reqs[uid];
} else {
Object.keys(reqs).forEach(function (uid) {
if (reqs[uid] && reqs[uid].abort) {
reqs[uid].abort();
}
delete reqs[uid];
});
}
}
}, {
key: "render",
value: function render() {
var _classNames;
var _this$props3 = this.props,
Tag = _this$props3.component,
prefixCls = _this$props3.prefixCls,
className = _this$props3.className,
disabled = _this$props3.disabled,
style = _this$props3.style,
multiple = _this$props3.multiple,
accept = _this$props3.accept,
children = _this$props3.children,
directory = _this$props3.directory;
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 /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, events, {
className: cls,
role: "button",
style: style
}), /*#__PURE__*/_react["default"].createElement("input", {
type: "file",
ref: this.saveFileInput,
key: this.state.uid,
style: {
display: 'none'
},
accept: accept,
directory: directory ? 'directory' : null,
webkitdirectory: directory ? 'webkitdirectory' : null,
multiple: multiple,
onChange: this.onChange
}), disabled && children ? /*#__PURE__*/_react["default"].cloneElement(children, {
disabled: disabled
}) : children);
}
}]);
return AjaxUploader;
}(_react.Component);
var _default = AjaxUploader;
exports["default"] = _default;
//# sourceMappingURL=AjaxUploader.js.map