zent
Version:
一套前端设计语言和基于React的实现
47 lines (46 loc) • 3.48 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from 'classnames';
import { Icon } from '../../../icon';
import Pop from '../../../pop';
import { Progress } from '../../../progress';
import { FILE_UPLOAD_STATUS } from '../../constants';
import { useItemHandler } from '../../hooks/item-handler';
import { hasOwnProperty } from '../../../utils/hasOwn';
var mimeTypeIconMap = {
audio: (_jsx(Icon, { className: "zent-file-upload-item-icon zent-file-upload-item-icon__type", type: "voice" }, void 0)),
video: (_jsx(Icon, { className: "zent-file-upload-item-icon zent-file-upload-item-icon__type", type: "video" }, void 0)),
};
var getFileIcon = function (item) {
var status = item.status, mimeType = item.type;
if (status === FILE_UPLOAD_STATUS.failed) {
return _jsx(Icon, { className: "zent-file-upload-item-icon", type: "error-circle" }, void 0);
}
for (var type in mimeTypeIconMap) {
if (hasOwnProperty(mimeTypeIconMap, type) && mimeType.indexOf(type) === 0) {
return mimeTypeIconMap[type];
}
}
return (_jsx(Icon, { className: "zent-file-upload-item-icon zent-file-upload-item-icon__type", type: "doc" }, void 0));
};
var splitFileNameParts = function (filename) {
if (filename[0] === '.') {
return [filename];
}
var splitIndex = filename.lastIndexOf('.');
return [filename.slice(0, splitIndex), filename.slice(splitIndex)];
};
var NormalUploadItem = function (props) {
var _a;
var i18n = props.i18n, item = props.item;
var isFailed = item.status === FILE_UPLOAD_STATUS.failed;
var _b = useItemHandler(props), deleteHandler = _b.deleteHandler, retryHandler = _b.retryHandler;
var isUploading = item.status === FILE_UPLOAD_STATUS.uploading;
var cls = cn('zent-file-upload-item', (_a = {},
_a['zent-file-upload-item__failed'] = isFailed,
_a['zent-file-upload-item__uploading'] = isUploading,
_a));
var _c = splitFileNameParts(item.name), filename = _c[0], ext = _c[1];
return (_jsxs("li", __assign({ className: cls, "data-zv": '10.0.17' }, { children: [_jsxs("div", __assign({ className: "zent-file-upload-item-info", "data-zv": '10.0.17' }, { children: [getFileIcon(item), _jsx("div", __assign({ className: "zent-file-upload-item-name-wrapper", "data-zv": '10.0.17' }, { children: _jsx(Pop, __assign({ content: item.name, trigger: "hover", mouseEnterDelay: 500 }, { children: _jsxs("p", __assign({ className: "zent-file-upload-item-name-line", "data-zv": '10.0.17' }, { children: [_jsx("span", __assign({ className: "zent-file-upload-item-name", "data-zv": '10.0.17' }, { children: filename }), void 0), _jsx("span", __assign({ className: "zent-file-upload-item-name-ext", "data-zv": '10.0.17' }, { children: ext }), void 0)] }), void 0) }), void 0) }), void 0), _jsxs("div", __assign({ className: "zent-file-upload-item-actions", "data-zv": '10.0.17' }, { children: [isFailed && (_jsx("a", __assign({ className: "zent-file-upload-item-retry", onClick: retryHandler, "data-zv": '10.0.17' }, { children: i18n.retry }), void 0)), _jsx("a", __assign({ onClick: deleteHandler, "data-zv": '10.0.17' }, { children: i18n.delete }), void 0)] }), void 0)] }), void 0), isUploading && (_jsx(Progress, { showInfo: false, className: "zent-file-upload-item-progress", strokeWidth: 2, status: "normal", percent: item.percent }, void 0))] }), item.id));
};
export default NormalUploadItem;