zent
Version:
一套前端设计语言和基于React的实现
76 lines (75 loc) • 4.21 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from 'classnames';
import AbstractMultiUpload from './components/AbstractMultiUpload';
import ImageUploadList from './components/image/List';
import ImageUploadTrigger from './components/image/Trigger';
import { DEFAULT_ENABLE_MULTIPLE, DEFAULT_MAX_AMOUNT, DEFAULT_MAX_SIZE, FILE_UPLOAD_STATUS, } from './constants';
import { defaultGetThumbSrcFromFile, defaultPreview, } from './utils/default-image-props';
import { formatFileSize } from './utils/format-file-size';
import { getTipsContent } from './utils/get-tips-content';
import { I18nReceiver } from '../i18n';
import isNil from '../utils/isNil';
import { createBaseNewUploadFileItem } from './utils/create-new-upload-file-item';
var ImageUpload = (function (_super) {
__extends(ImageUpload, _super);
function ImageUpload() {
return _super !== null && _super.apply(this, arguments) || this;
}
ImageUpload.prototype.getUploadSuccessOverrideProps = function (onUploadSuccessReturn) {
if (isNil(onUploadSuccessReturn)) {
return {};
}
return typeof onUploadSuccessReturn === 'string'
? {
src: onUploadSuccessReturn,
thumbSrc: onUploadSuccessReturn,
}
: onUploadSuccessReturn;
};
ImageUpload.prototype.renderUploadList = function (i18n) {
var _a = this
.props, sortable = _a.sortable, preview = _a.preview, customUploadItem = _a.customUploadItem;
var uploadTrigger = this.remainAmount > 0 && this.renderTrigger(i18n);
return (_jsx(ImageUploadList, { i18n: i18n, fileList: this.fileList, onRetry: this.retryUploadItem, onDelete: this.deleteUploadItem, onSortChange: this.updateFileList, sortable: sortable, trigger: uploadTrigger, onPreview: preview, customUploadItem: customUploadItem }, void 0));
};
ImageUpload.prototype.createNewUploadFileItem = function (file) {
var thumbPromise = this.props.getThumbSrcFromFile(file);
return Promise.resolve(thumbPromise).then(function (thumbSrc) {
var item = __assign(__assign({}, createBaseNewUploadFileItem(file)), { thumbSrc: thumbSrc });
return item;
});
};
ImageUpload.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-image-upload-tips", "data-zv": '10.0.17' }, { children: tipsContent }), void 0));
};
ImageUpload.prototype.renderTrigger = function (i18n) {
var _a = this
.props, accept = _a.accept, maxAmount = _a.maxAmount, maxSize = _a.maxSize, multiple = _a.multiple, disabled = _a.disabled;
var fileList = this.state.fileList;
return (_jsx(ImageUploadTrigger, { i18n: i18n, accept: accept, maxAmount: maxAmount, maxSize: maxSize, multiple: multiple, disabled: disabled, remainAmount: this.remainAmount, fileList: fileList, onAddFile: this.onTriggerUploadFile, onError: this.emitOnError }, void 0));
};
ImageUpload.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-image-upload', className), "data-zv": '10.0.17' }, { children: [_this.renderUploadList(i18n), _this.renderTips()] }), void 0));
} }), void 0));
};
ImageUpload.defaultProps = {
maxAmount: DEFAULT_MAX_AMOUNT,
maxSize: DEFAULT_MAX_SIZE,
multiple: DEFAULT_ENABLE_MULTIPLE,
manualUpload: false,
getThumbSrcFromFile: defaultGetThumbSrcFromFile,
preview: defaultPreview,
accept: 'image/*',
};
ImageUpload.FILE_UPLOAD_STATUS = FILE_UPLOAD_STATUS;
return ImageUpload;
}(AbstractMultiUpload));
export { ImageUpload };
export default ImageUpload;