UNPKG

antd

Version:

An enterprise-class UI design language and React components implementation

351 lines (295 loc) 16.9 kB
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } import * as React from 'react'; import Animate from 'rc-animate'; import classNames from 'classnames'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined'; import PictureTwoTone from '@ant-design/icons/PictureTwoTone'; import FileTwoTone from '@ant-design/icons/FileTwoTone'; import EyeOutlined from '@ant-design/icons/EyeOutlined'; import DeleteOutlined from '@ant-design/icons/DeleteOutlined'; import DownloadOutlined from '@ant-design/icons/DownloadOutlined'; import { cloneElement, isValidElement } from '../_util/reactNode'; import { previewImage, isImageUrl } from './utils'; import Tooltip from '../tooltip'; import Progress from '../progress'; import { ConfigConsumer } from '../config-provider'; import Button from '../button'; var UploadList = /*#__PURE__*/function (_React$Component) { _inherits(UploadList, _React$Component); var _super = _createSuper(UploadList); function UploadList() { var _this; _classCallCheck(this, UploadList); _this = _super.apply(this, arguments); _this.handlePreview = function (file, e) { var onPreview = _this.props.onPreview; if (!onPreview) { return; } e.preventDefault(); return onPreview(file); }; _this.handleDownload = function (file) { var onDownload = _this.props.onDownload; if (typeof onDownload === 'function') { onDownload(file); } else if (file.url) { window.open(file.url); } }; _this.handleClose = function (file) { var onRemove = _this.props.onRemove; if (onRemove) { onRemove(file); } }; _this.handleIconRender = function (file) { var _this$props = _this.props, listType = _this$props.listType, locale = _this$props.locale, iconRender = _this$props.iconRender, isImgUrl = _this$props.isImageUrl; if (iconRender) { return iconRender(file, listType); } var isLoading = file.status === 'uploading'; var fileIcon = isImgUrl && isImgUrl(file) ? /*#__PURE__*/React.createElement(PictureTwoTone, null) : /*#__PURE__*/React.createElement(FileTwoTone, null); var icon = isLoading ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : /*#__PURE__*/React.createElement(PaperClipOutlined, null); if (listType === 'picture') { icon = isLoading ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : fileIcon; } else if (listType === 'picture-card') { icon = isLoading ? locale.uploading : fileIcon; } return icon; }; _this.handleActionIconRender = function (customIcon, callback, prefixCls, title) { var btnProps = { type: 'text', size: 'small', title: title, onClick: function onClick(e) { callback(); if (isValidElement(customIcon) && customIcon.props.onClick) { customIcon.props.onClick(e); } }, className: "".concat(prefixCls, "-list-item-card-actions-btn") }; if (isValidElement(customIcon)) { var btnIcon = cloneElement(customIcon, _extends(_extends({}, customIcon.props), { onClick: function onClick() {} })); return /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, { icon: btnIcon })); } return /*#__PURE__*/React.createElement(Button, btnProps, /*#__PURE__*/React.createElement("span", null, customIcon)); }; _this.renderUploadList = function (_ref) { var _classNames6; var getPrefixCls = _ref.getPrefixCls, direction = _ref.direction; var _this$props2 = _this.props, customizePrefixCls = _this$props2.prefixCls, _this$props2$items = _this$props2.items, items = _this$props2$items === void 0 ? [] : _this$props2$items, listType = _this$props2.listType, showPreviewIcon = _this$props2.showPreviewIcon, showRemoveIcon = _this$props2.showRemoveIcon, showDownloadIcon = _this$props2.showDownloadIcon, customRemoveIcon = _this$props2.removeIcon, customDownloadIcon = _this$props2.downloadIcon, locale = _this$props2.locale, progressProps = _this$props2.progress, isImgUrl = _this$props2.isImageUrl; var prefixCls = getPrefixCls('upload', customizePrefixCls); var list = items.map(function (file) { var _classNames3, _classNames4; var progress; var iconNode = _this.handleIconRender(file); var icon = /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-text-icon") }, iconNode); if (listType === 'picture' || listType === 'picture-card') { if (file.status === 'uploading' || !file.thumbUrl && !file.url) { var _classNames; var uploadingClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-list-item-thumbnail"), true), _defineProperty(_classNames, "".concat(prefixCls, "-list-item-file"), file.status !== 'uploading'), _classNames)); icon = /*#__PURE__*/React.createElement("div", { className: uploadingClassName }, iconNode); } else { var _classNames2; var thumbnail = isImgUrl && isImgUrl(file) ? /*#__PURE__*/React.createElement("img", { src: file.thumbUrl || file.url, alt: file.name, className: "".concat(prefixCls, "-list-item-image") }) : iconNode; var aClassName = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-list-item-thumbnail"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-list-item-file"), isImgUrl && !isImgUrl(file)), _classNames2)); icon = /*#__PURE__*/React.createElement("a", { className: aClassName, onClick: function onClick(e) { return _this.handlePreview(file, e); }, href: file.url || file.thumbUrl, target: "_blank", rel: "noopener noreferrer" }, thumbnail); } } if (file.status === 'uploading') { // show loading icon if upload progress listener is disabled var loadingProgress = 'percent' in file ? /*#__PURE__*/React.createElement(Progress, _extends({}, progressProps, { type: "line", percent: file.percent })) : null; progress = /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-list-item-progress"), key: "progress" }, loadingProgress); } var infoUploadingClass = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-list-item"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-item-").concat(file.status), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _classNames3)); var linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps; var removeIcon = showRemoveIcon ? _this.handleActionIconRender(customRemoveIcon || /*#__PURE__*/React.createElement(DeleteOutlined, null), function () { return _this.handleClose(file); }, prefixCls, locale.removeFile) : null; var downloadIcon = showDownloadIcon && file.status === 'done' ? _this.handleActionIconRender(customDownloadIcon || /*#__PURE__*/React.createElement(DownloadOutlined, null), function () { return _this.handleDownload(file); }, prefixCls, locale.downloadFile) : null; var downloadOrDelete = listType !== 'picture-card' && /*#__PURE__*/React.createElement("span", { key: "download-delete", className: "".concat(prefixCls, "-list-item-card-actions ").concat(listType === 'picture' ? 'picture' : '') }, downloadIcon, removeIcon); var listItemNameClass = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-list-item-name"), true), _defineProperty(_classNames4, "".concat(prefixCls, "-list-item-name-icon-count-").concat([downloadIcon, removeIcon].filter(function (x) { return x; }).length), true), _classNames4)); var preview = file.url ? [/*#__PURE__*/React.createElement("a", _extends({ key: "view", target: "_blank", rel: "noopener noreferrer", className: listItemNameClass, title: file.name }, linkProps, { href: file.url, onClick: function onClick(e) { return _this.handlePreview(file, e); } }), file.name), downloadOrDelete] : [/*#__PURE__*/React.createElement("span", { key: "view", className: listItemNameClass, onClick: function onClick(e) { return _this.handlePreview(file, e); }, title: file.name }, file.name), downloadOrDelete]; var style = { pointerEvents: 'none', opacity: 0.5 }; var previewIcon = showPreviewIcon ? /*#__PURE__*/React.createElement("a", { href: file.url || file.thumbUrl, target: "_blank", rel: "noopener noreferrer", style: file.url || file.thumbUrl ? undefined : style, onClick: function onClick(e) { return _this.handlePreview(file, e); }, title: locale.previewFile }, /*#__PURE__*/React.createElement(EyeOutlined, null)) : null; var actions = listType === 'picture-card' && file.status !== 'uploading' && /*#__PURE__*/React.createElement("span", { className: "".concat(prefixCls, "-list-item-actions") }, previewIcon, file.status === 'done' && downloadIcon, removeIcon); var message; if (file.response && typeof file.response === 'string') { message = file.response; } else { message = file.error && file.error.statusText || locale.uploadError; } var iconAndPreview = /*#__PURE__*/React.createElement("span", null, icon, preview); var dom = /*#__PURE__*/React.createElement("div", { className: infoUploadingClass }, /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-list-item-info") }, iconAndPreview), actions, /*#__PURE__*/React.createElement(Animate, { transitionName: "fade", component: "" }, progress)); var listContainerNameClass = classNames(_defineProperty({}, "".concat(prefixCls, "-list-picture-card-container"), listType === 'picture-card')); return /*#__PURE__*/React.createElement("div", { key: file.uid, className: listContainerNameClass }, file.status === 'error' ? /*#__PURE__*/React.createElement(Tooltip, { title: message, getPopupContainer: function getPopupContainer(node) { return node.parentNode; } }, dom) : /*#__PURE__*/React.createElement("span", null, dom)); }); var listClassNames = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(prefixCls, "-list"), true), _defineProperty(_classNames6, "".concat(prefixCls, "-list-").concat(listType), true), _defineProperty(_classNames6, "".concat(prefixCls, "-list-rtl"), direction === 'rtl'), _classNames6)); var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate'; return /*#__PURE__*/React.createElement(Animate, { transitionName: "".concat(prefixCls, "-").concat(animationDirection), component: "div", className: listClassNames }, list); }; return _this; } _createClass(UploadList, [{ key: "componentDidUpdate", value: function componentDidUpdate() { var _this2 = this; var _this$props3 = this.props, listType = _this$props3.listType, items = _this$props3.items, previewFile = _this$props3.previewFile; if (listType !== 'picture' && listType !== 'picture-card') { return; } (items || []).forEach(function (file) { if (typeof document === 'undefined' || typeof window === 'undefined' || !window.FileReader || !window.File || !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== undefined) { return; } file.thumbUrl = ''; if (previewFile) { previewFile(file.originFileObj).then(function (previewDataUrl) { // Need append '' to avoid dead loop file.thumbUrl = previewDataUrl || ''; _this2.forceUpdate(); }); } }); } }, { key: "render", value: function render() { return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderUploadList); } }]); return UploadList; }(React.Component); export { UploadList as default }; UploadList.defaultProps = { listType: 'text', progress: { strokeWidth: 2, showInfo: false }, showRemoveIcon: true, showDownloadIcon: false, showPreviewIcon: true, previewFile: previewImage, isImageUrl: isImageUrl };