dtd/lib/upload/UploadList.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _extends2=require("babel-runtime/helpers/extends"),_extends3=_interopRequireDefault(_extends2),_defineProperty2=require("babel-runtime/helpers/defineProperty"),_defineProperty3=_interopRequireDefault(_defineProperty2),_classCallCheck2=require("babel-runtime/helpers/classCallCheck"),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_createClass2=require("babel-runtime/helpers/createClass"),_createClass3=_interopRequireDefault(_createClass2),_possibleConstructorReturn2=require("babel-runtime/helpers/possibleConstructorReturn"),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=require("babel-runtime/helpers/inherits"),_inherits3=_interopRequireDefault(_inherits2),_react=require("react"),React=_interopRequireWildcard(_react),_rcAnimate=require("rc-animate"),_rcAnimate2=_interopRequireDefault(_rcAnimate),_icon=require("../icon"),_icon2=_interopRequireDefault(_icon),_tooltip=require("../tooltip"),_tooltip2=_interopRequireDefault(_tooltip),_progress=require("../progress"),_progress2=_interopRequireDefault(_progress),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames);function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var previewFile=function(e,t){var r=new FileReader;r.onloadend=function(){return t(r.result)},r.readAsDataURL(e)},UploadList=function(e){function t(){(0,_classCallCheck3.default)(this,t);var a=(0,_possibleConstructorReturn3.default)(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments));return a.handleClose=function(e){var t=a.props.onRemove;t&&t(e)},a.handlePreview=function(e,t){var r=a.props.onPreview;if(r)return t.preventDefault(),r(e)},a}return(0,_inherits3.default)(t,e),(0,_createClass3.default)(t,[{key:"componentDidUpdate",value:function(){var r=this;"picture"!==this.props.listType&&"picture-card"!==this.props.listType||(this.props.items||[]).forEach(function(t){"undefined"!=typeof document&&"undefined"!=typeof window&&window.FileReader&&window.File&&t.originFileObj instanceof File&&void 0===t.thumbUrl&&(t.thumbUrl="",previewFile(t.originFileObj,function(e){t.thumbUrl=e,r.forceUpdate()}))})}},{key:"render",value:function(){var e,v=this,t=this.props,b=t.prefixCls,r=t.items,a=void 0===r?[]:r,y=t.listType,C=t.showPreviewIcon,E=t.showRemoveIcon,q=t.locale,i=a.map(function(t){var e,r=void 0,a=React.createElement(_icon2.default,{type:"paper-clip"});if("picture"!==y&&"picture-card"!==y||(a="picture-card"===y&&"uploading"===t.status?React.createElement("div",{className:b+"-list-item-uploading-text"},q.uploading):t.thumbUrl||t.url?null:React.createElement(_icon2.default,{className:b+"-list-item-thumbnail",type:"picture"})),"uploading"===t.status&&"text"!==y){var i="percent"in t?React.createElement(_progress2.default,{type:"line",percent:t.percent,size:"small",showInfo:!1}):null;r=React.createElement("div",{className:b+"-list-item-progress",key:"progress"},i)}var n=(0,_classnames2.default)((e={},(0,_defineProperty3.default)(e,b+"-list-item",!0),(0,_defineProperty3.default)(e,b+"-list-item-"+t.status,!0),e)),l=void 0,s=parseFloat((t.size/1024).toFixed(1)),o=s<1024;if(!isNaN(s)){var c=o?(t.percent/100*s).toFixed(1):(t.percent/100*s/1024).toFixed(1);l="uploading"===t.status?c+(o?"KB":"M")+" / "+(o?s+"KB":(s/1024).toFixed(1)+"M")+"\n          (已上传"+t.percent.toFixed(2)+"%)":"error"===t.status?"上传失败":o?s+"KB":(s/1024).toFixed(1)+"M"}var u="text"===y?t.url?React.createElement("a",(0,_extends3.default)({},t.linkProps,{href:t.url,target:"_blank",rel:"noopener noreferrer",className:b+"-list-item-name",onClick:function(e){return v.handlePreview(t,e)},title:t.name}),a,React.createElement("span",{className:b+"-list-item-name-title"},t.name),React.createElement("span",{className:b+"-list-item-name-progress"},l)):React.createElement("span",{className:b+"-list-item-name",onClick:function(e){return v.handlePreview(t,e)},title:t.name},a,React.createElement("span",{className:b+"-list-item-name-title"},t.name),React.createElement("span",{className:b+"-list-item-name-progress"},l)):React.createElement("a",{className:b+"-list-item-thumbnail",onClick:function(e){return v.handlePreview(t,e)},href:t.url||t.thumbUrl,target:"_blank",rel:"noopener noreferrer"},React.createElement("img",{src:t.thumbUrl||t.url,alt:t.name})),p=t.url||t.thumbUrl?void 0:{pointerEvents:"none",opacity:.5},m=C?React.createElement("a",{href:t.url||t.thumbUrl,target:"_blank",rel:"noopener noreferrer",style:p,onClick:function(e){return v.handlePreview(t,e)},title:q.previewFile},React.createElement(_icon2.default,{type:"eye-o"})):null,d=E?React.createElement(_icon2.default,{type:"delete",title:q.removeFile,onClick:function(){return v.handleClose(t)}}):null,f=E?React.createElement(_icon2.default,{type:"close",title:q.removeFile,onClick:function(){return v.handleClose(t)}}):null,_="picture-card"===y&&"uploading"!==t.status?React.createElement("span",{className:b+"-list-item-actions"},m,d):f,h=void 0;h=t.response&&"string"==typeof t.response?t.response:t.error&&t.error.statusText||q.uploadError;var R="error"===t.status?React.createElement(_tooltip2.default,{title:h},u):React.createElement("span",null,u);return React.createElement("div",{className:n,key:t.uid},React.createElement("div",{className:b+"-list-item-info"},R),_,React.createElement(_rcAnimate2.default,{transitionName:"fade",component:""},r))}),n=(0,_classnames2.default)((e={},(0,_defineProperty3.default)(e,b+"-list",!0),(0,_defineProperty3.default)(e,b+"-list-"+y,!0),e)),l="picture-card"===y?"animate-inline":"animate";return React.createElement(_rcAnimate2.default,{transitionName:b+"-"+l,component:"div",className:n},i)}}]),t}(React.Component);(exports.default=UploadList).defaultProps={listType:"text",prefixCls:"dt-upload",showRemoveIcon:!0,showPreviewIcon:!0},module.exports=exports.default;