@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
97 lines (96 loc) • 5.64 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Preview", {
enumerable: true,
get: function() {
return Preview;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _image = /*#__PURE__*/ _interop_require_default._(require("../image"));
var _progress = require("../progress/progress");
var Preview = function Preview(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 renderIcon(item) {
if (item.status === 'error') {
return item.failIcon || /*#__PURE__*/ _react.default.createElement(_iconsreact.Failure, {
color: "#fff"
});
}
return item.loadingIcon || /*#__PURE__*/ _react.default.createElement(_iconsreact.Loading, {
className: "nut-icon-loading",
color: "#fff"
});
};
return /*#__PURE__*/ _react.default.createElement(_react.default.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.default.createElement("div", {
className: "nut-uploader-preview ".concat(previewType),
key: uid
}, previewType === 'picture' && !children && deletable && /*#__PURE__*/ _react.default.createElement("div", {
onClick: function onClick() {
return onDeleteItem(item, index);
},
className: "close"
}, deleteIcon), previewType === 'picture' && !children && /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-img"
}, status === 'ready' ? /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-progress"
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-progress-msg"
}, message)) : status !== 'success' && /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-progress"
}, renderIcon(item), /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-progress-msg"
}, message)), type.includes('image') ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, url && /*#__PURE__*/ _react.default.createElement(_image.default, {
className: "nut-uploader-preview-img-c",
style: {
objectFit: 'fill'
},
src: url,
alt: "",
onClick: function onClick() {
return handleItemClick(item, index);
}
})) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, previewUrl ? /*#__PURE__*/ _react.default.createElement(_image.default, {
className: "nut-uploader-preview-img-c",
src: previewUrl,
alt: "",
onClick: function onClick() {
return handleItemClick(item, index);
}
}) : /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-img-file"
}, /*#__PURE__*/ _react.default.createElement("div", {
onClick: function onClick() {
return handleItemClick(item, index);
},
className: "nut-uploader-preview-img-file-name"
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.Link, {
color: "#808080"
}), /*#__PURE__*/ _react.default.createElement("span", null, "\xa0", name)))), status === 'success' && name ? /*#__PURE__*/ _react.default.createElement("div", {
className: "tips"
}, name) : null), previewType === 'list' && /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-list"
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-uploader-preview-img-file-name ".concat(status),
onClick: function onClick() {
return handleItemClick(item, index);
}
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.Link, null), /*#__PURE__*/ _react.default.createElement("span", null, "\xa0", name)), deletable && /*#__PURE__*/ _react.default.createElement(_iconsreact.Del, {
color: "#808080",
className: "nut-uploader-preview-img-file-del",
onClick: function onClick() {
return onDeleteItem(item, index);
}
}), item.status === 'uploading' && item.percentage && /*#__PURE__*/ _react.default.createElement(_progress.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
})));
}));
};