@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
86 lines (85 loc) • 4.9 kB
JavaScript
import React from "react";
import { Del, Failure, Link as LinkIcon, Loading } from "@nutui/icons-react";
import Image from "../image";
import { Progress } from "../progress/progress";
export var Preview = function(param) {
var fileList = param.fileList, previewType = param.previewType, deletable = param.deletable, onDeleteItem = param.onDeleteItem, handleItemClick = param.handleItemClick, previewUrl = param.previewUrl, deleteIcon = param.deleteIcon, children = param.children;
var renderIcon = function(item) {
if (item.status === 'error') {
return item.failIcon || /*#__PURE__*/ React.createElement(Failure, {
color: "#fff"
});
}
return item.loadingIcon || /*#__PURE__*/ React.createElement(Loading, {
className: "nut-icon-loading",
color: "#fff"
});
};
return /*#__PURE__*/ React.createElement(React.Fragment, null, fileList.length !== 0 && fileList.map(function(item, index) {
var _item_status = item.status, status = _item_status === void 0 ? 'success' : _item_status, _item_uid = item.uid, uid = _item_uid === void 0 ? index : _item_uid, url = item.url, _item_message = item.message, message = _item_message === void 0 ? '' : _item_message, _item_name = item.name, name = _item_name === void 0 ? '' : _item_name, _item_type = item.type, type = _item_type === void 0 ? 'image' : _item_type;
return /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview ".concat(previewType),
key: uid
}, previewType === 'picture' && !children && deletable && /*#__PURE__*/ React.createElement("div", {
onClick: function() {
return onDeleteItem(item, index);
},
className: "close"
}, deleteIcon), previewType === 'picture' && !children && /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-img"
}, status === 'ready' ? /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-progress"
}, /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-progress-msg"
}, message)) : status !== 'success' && /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-progress"
}, renderIcon(item), /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-progress-msg"
}, message)), type.includes('image') ? /*#__PURE__*/ React.createElement(React.Fragment, null, url && /*#__PURE__*/ React.createElement(Image, {
className: "nut-uploader-preview-img-c",
style: {
objectFit: 'fill'
},
src: url,
alt: "",
onClick: function() {
return handleItemClick(item, index);
}
})) : /*#__PURE__*/ React.createElement(React.Fragment, null, previewUrl ? /*#__PURE__*/ React.createElement(Image, {
className: "nut-uploader-preview-img-c",
src: previewUrl,
alt: "",
onClick: function() {
return handleItemClick(item, index);
}
}) : /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-img-file"
}, /*#__PURE__*/ React.createElement("div", {
onClick: function() {
return handleItemClick(item, index);
},
className: "nut-uploader-preview-img-file-name"
}, /*#__PURE__*/ React.createElement(LinkIcon, {
color: "#808080"
}), /*#__PURE__*/ React.createElement("span", null, "\xa0", name)))), status === 'success' && name ? /*#__PURE__*/ React.createElement("div", {
className: "tips"
}, name) : null), previewType === 'list' && /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-list"
}, /*#__PURE__*/ React.createElement("div", {
className: "nut-uploader-preview-img-file-name ".concat(status),
onClick: function() {
return handleItemClick(item, index);
}
}, /*#__PURE__*/ React.createElement(LinkIcon, null), /*#__PURE__*/ React.createElement("span", null, "\xa0", name)), deletable && /*#__PURE__*/ React.createElement(Del, {
color: "#808080",
className: "nut-uploader-preview-img-file-del",
onClick: function() {
return onDeleteItem(item, index);
}
}), item.status === 'uploading' && item.percentage && /*#__PURE__*/ React.createElement(Progress, {
percent: item.percentage,
color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
showText: false
})));
}));
};