zent
Version:
一套前端设计语言和基于React的实现
121 lines (120 loc) • 5.54 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from 'classnames';
import { I18nReceiver } from '../i18n';
import AbstractUpload from './components/AbstractUpload';
import { formatFileSize } from './utils/format-file-size';
import { getTipsContent } from './utils/get-tips-content';
import { FILE_UPLOAD_STATUS } from './constants';
import { wrapPromise } from './utils/wrap-promise';
import SingleUploadTrigger from './components/single/Trigger';
import SingleUploadItem from './components/single/Item';
import { createBaseNewUploadFileItem } from './utils/create-new-upload-file-item';
var SingleUpload = (function (_super) {
__extends(SingleUpload, _super);
function SingleUpload() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
value: null,
};
_this.onChange = function (item, detail, cb) {
var updateCallback = function () {
_this.props.onChange(item, detail);
cb && cb();
};
if (_this.isControlled) {
updateCallback();
}
else {
_this.setState({
value: item,
}, updateCallback);
}
};
_this.updateUploadItem = function (updateItemId, overrideProps) {
var updateItem = _this.getUploadItem(updateItemId);
if (!updateItem) {
return;
}
var newItem = __assign(__assign({}, updateItem), overrideProps);
_this.onChange(newItem, {
item: newItem,
type: 'change',
});
};
_this.deleteUploadItem = function (deleteItem) {
_this.onChange(null, {
item: deleteItem,
type: 'delete',
});
};
_this.retryUploadItem = function (retryItem) {
var newRetryItem = __assign(__assign({}, retryItem), { status: FILE_UPLOAD_STATUS.uploading, percent: 0 });
_this.onChange(newRetryItem, {
item: newRetryItem,
type: 'retry',
}, function () { return _this.emitOnUpload(retryItem.file, newRetryItem); });
};
_this.onTriggerUploadFile = function (file) {
var beforeUpload = _this.props.beforeUpload;
var beforeUploadRes = wrapPromise(beforeUpload ? beforeUpload(file) : true);
return beforeUploadRes
.then(function () {
return _this.createNewUploadFileItem(file);
})
.then(function (newUploadFileItem) {
_this.onChange(newUploadFileItem, {
item: newUploadFileItem,
type: 'add',
}, function () { return _this.emitOnUpload(file, newUploadFileItem); });
});
};
return _this;
}
Object.defineProperty(SingleUpload.prototype, "isControlled", {
get: function () {
return this.props.value !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SingleUpload.prototype, "value", {
get: function () {
return this.isControlled ? this.props.value : this.state.value;
},
enumerable: false,
configurable: true
});
SingleUpload.prototype.getUploadItem = function (id) {
var _a;
return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) === id ? this.value : null;
};
SingleUpload.prototype.createNewUploadFileItem = function (file) {
return createBaseNewUploadFileItem(file);
};
SingleUpload.prototype.renderTips = function () {
var _a = this.props, tips = _a.tips, maxSize = _a.maxSize;
var config = __assign(__assign({}, this.props), { formattedMaxSize: formatFileSize(maxSize) });
var tipsContent = getTipsContent(tips, config);
return (tipsContent && (_jsx("div", __assign({ className: "zent-single-upload-tips", "data-zv": '10.0.17' }, { children: tipsContent }), void 0)));
};
SingleUpload.prototype.renderTrigger = function (i18n) {
var _a = this.props, accept = _a.accept, maxSize = _a.maxSize, disabled = _a.disabled;
return (_jsx(SingleUploadTrigger, { i18n: i18n, accept: accept, maxAmount: 1, maxSize: maxSize, multiple: false, disabled: disabled, remainAmount: this.value ? 0 : 1, onAddFile: this.onTriggerUploadFile, onError: this.emitOnError }, void 0));
};
SingleUpload.prototype.renderItem = function (i18n) {
var customUploadItem = this.props.customUploadItem;
var UploadItem = customUploadItem || SingleUploadItem;
return (_jsx(UploadItem, { item: this.value, i18n: i18n, onDelete: this.deleteUploadItem, onRetry: this.retryUploadItem }, void 0));
};
SingleUpload.prototype.render = function () {
var _this = this;
var className = this.props.className;
return (_jsx(I18nReceiver, __assign({ componentName: "Upload" }, { children: function (i18n) {
return (_jsxs("div", __assign({ className: cn('zent-single-upload', className), "data-zv": '10.0.17' }, { children: [_this.value ? _this.renderItem(i18n) : _this.renderTrigger(i18n), _this.renderTips()] }), void 0));
} }), void 0));
};
return SingleUpload;
}(AbstractUpload));
export { SingleUpload };
export default SingleUpload;