@cainiaofe/cn-ui-m
Version:
45 lines (44 loc) • 2.25 kB
JavaScript
import React from 'react';
import { CnIcon } from "../../cn-icon";
import { CnLoading } from "../../cn-loading";
import { CnImageViewer } from "../../cn-image-viewer";
import { useShowUploadRemoveIcon, useShowUploadPreviewIcon, useUploadState, } from '@cainiaofe/cn-ui-common';
export var UploadListItem = function (props) {
var _a = useUploadState(), rootProps = _a.props, readOnly = _a.readOnly, onRemove = _a.onRemove;
var index = props.index, style = props.style, file = props.file, fileList = props.fileList;
var disabled = rootProps.disabled;
var status = file.status;
var isUploading = status && ['idle', 'uploading'].includes(status);
var showRemove = useShowUploadRemoveIcon({
showRemove: !disabled && !readOnly && rootProps.showRemove,
file: file,
});
var showPreview = useShowUploadPreviewIcon({
showPreview: rootProps.showPreview,
onPreview: rootProps.onPreview,
file: file,
});
var onPreview = function (_file) {
if (!showPreview)
return;
if (rootProps.onPreview) {
rootProps.onPreview(_file);
return;
}
CnImageViewer.open({
index: index,
src: fileList.map(function (item) {
return item.objectUrl || item.url;
}),
});
};
return (React.createElement("div", { style: style, className: "cn-ui-m-oss-image-upload-item" },
isUploading ? (React.createElement("div", { className: "cn-ui-m-oss-image-upload-item-uploading" },
React.createElement(CnLoading, { visible: true, inverse: true }))) : null,
showRemove ? (React.createElement("div", { className: "cn-ui-m-oss-image-upload-item-remove", onClick: function () { return onRemove(file); } },
React.createElement("div", { className: "cn-ui-m-oss-image-upload-item-remove-inner" },
React.createElement(CnIcon, { type: "error", size: "xs" })))) : null,
React.createElement("div", { style: {
backgroundImage: "url(".concat(file.objectUrl || file.previewUrl || file.url, ")"),
}, className: "cn-ui-m-oss-image-upload-item-img", onClick: function () { return onPreview(file); } })));
};