From 7288dfbaf9e33d61a034788822133431bbb1ff6e Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Dec 2015 15:25:54 +0800 Subject: [PATCH] Add picture style upload list --- components/upload/demo/picture-style.md | 35 ++++++++ components/upload/index.jsx | 13 ++- components/upload/index.md | 4 +- components/upload/uploadList.jsx | 29 +++++-- style/components/upload.less | 101 +++++++++++++++++++----- 5 files changed, 152 insertions(+), 30 deletions(-) create mode 100644 components/upload/demo/picture-style.md diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md new file mode 100644 index 000000000..2eb73148f --- /dev/null +++ b/components/upload/demo/picture-style.md @@ -0,0 +1,35 @@ +# 图片列表样式 + +- order: 6 + +上传文件为图片，可展示缩略图。 + +--- + +````jsx +import { Upload, Button, Icon } from 'antd'; + +const props = { + action: '/upload.do', + listType: 'picture', + defaultFileList: [{ + uid: -1, + name: 'xxx.png', + status: 'done', + url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png' + }, { + uid: -2, + name: 'yyy.png', + status: 'done', + url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png' + }] +}; + +ReactDOM.render( + + + +, document.getElementById('components-upload-demo-picture-style')); +```` diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 554545bba..5f2ccbfd2 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -169,7 +169,9 @@ const AntUpload = React.createClass({ data: {}, accept: '', onChange: noop, - showUploadList: true + showUploadList: true, + listType: 'text', // or pictrue + className: '', }; }, componentWillReceiveProps(nextProps) { @@ -197,12 +199,15 @@ const AntUpload = React.createClass({ }); let uploadList; if (this.props.showUploadList) { - uploadList = ; + uploadList = ( + + ); } if (type === 'drag') { let dragUploadingClass = this.state.fileList.some(file => file.status === 'uploading') ? `${prefixCls}-drag-uploading` : ''; - let draggingClass = this.state.dragState === 'dragover' ? `${prefixCls}-drag-hover` : ''; return ( @@ -223,7 +228,7 @@ const AntUpload = React.createClass({ ); } else if (type === 'select') { return ( - +
{this.props.children} diff --git a/components/upload/index.md b/components/upload/index.md index 4583634cb..c3fc2fd34 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -23,10 +23,12 @@ | name | 可选参数, 上传的文件 | String | file | | action | 必选参数, 上传的地址 | String | 无 | | data | 可选参数, 上传所需参数 | Object | 无 | -|showUploadList | 可选参数, 是否展示 uploadList, 默认开启 | Boolean | true | +| showUploadList | 可选参数, 是否展示 uploadList, 默认开启 | Boolean | true | | multiple | 可选参数, 是否支持多选文件，支持 `ie10+` | Boolean | false | | accept | 可选参数, 接受上传的文件类型, 详见 input accept Attribute | String | 无 | | onChange | 可选参数, 上传文件改变时的状态，详见 onChange | Function | 无 | +| listType | 上传列表的内建样式，支持两种基本样式 `text` or `picture` | String | 'text'| +| className | 自定义类名 | String | 无 | ### onChange diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 584131d1b..246fe83c6 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -3,10 +3,12 @@ import Animate from 'rc-animate'; import Icon from '../icon'; const prefixCls = 'ant-upload'; import { Line } from '../progress'; +import classNames from 'classnames'; export default React.createClass({ getDefaultProps() { return { + listType: 'text', // or picture items: [], progressAttr: { strokeWidth: 3, @@ -20,25 +22,40 @@ export default React.createClass({ render() { let list = this.props.items.map((file) => { let progress; - let infoUploadingClass = ''; + let icon = ; + + if (this.props.listType === 'picture') { + icon = (file.status === 'uploading' || !file.url) + ? + : {file.name}; + } if (file.status === 'uploading') { progress =
; - infoUploadingClass = ' ' + prefixCls + '-list-item-uploading'; } + const infoUploadingClass = classNames({ + [`${prefixCls}-list-item`]: true, + [`${prefixCls}-list-item-uploading`]: file.status === 'uploading', + }); return ( -
+
- - {file.name} + {icon} + {file.name}
{ progress }
); }); - return
+ const listClassNames = classNames({ + [`${prefixCls}-list`]: true, + [`${prefixCls}-list-${this.props.listType}`]: true, + }); + return
{list} diff --git a/style/components/upload.less b/style/components/upload.less index 8f05a74b2..0e09801f4 100644 --- a/style/components/upload.less +++ b/style/components/upload.less @@ -11,12 +11,12 @@ cursor: pointer; } - &.@{upload-prefix-cls}-select { + &&-select { display: inline-block; } - &.@{upload-prefix-cls}-drag { - border: 1px dashed #d9d9d9; + &&-drag { + border: 1px dashed @border-color-base; transition: border-color 0.3s ease; cursor: pointer; border-radius: @border-radius-base; @@ -74,11 +74,12 @@ } .@{upload-prefix-cls}-list { - .@{upload-prefix-cls}-list-item { + &-item { overflow: hidden; margin-top: 8px; + font-size: 12px; - .@{upload-prefix-cls}-list-item-info { + &-info { height: 22px; line-height: 22px; padding: 0 4px; @@ -101,15 +102,17 @@ color: #666; } } - &:hover { - background-color: tint(@primary-color, 90%); - .anticon.anticon-cross { - opacity: 1; - } - } } - .@{upload-prefix-cls}-list-item-progress { + &:hover &-info { + background-color: tint(@primary-color, 90%); + } + + &:hover .anticon-cross { + opacity: 1; + } + + &-progress { padding: 0 8px 0 20px; margin-top: -2px; margin-bottom: 1px; @@ -118,15 +121,75 @@ vertical-align: middle; } } - - } - .@{upload-prefix-cls}-item-name { - font-size: 12px; - font-weight: normal; } - b.@{upload-prefix-cls}-item-name { - color: #666; + &-picture &-item { + padding: 8px; + border-radius: @border-radius-base; + border: 1px solid @border-color-base; + height: 66px; + position: relative; + &:hover { + background: transparent; + } + } + + &-picture &-item-info { + padding: 0; + } + + &-picture &-item:hover &-item-info { + background: transparent; + color: #345678; + } + + &-picture &-item-uploading { + border-style: dashed; + } + + &-picture &-item-thumbnail { + width: 48px; + height: 48px; + display: inline-block; + overflow: hidden; + } + + &-picture &-item-thumbnail img { + width: 48px; + height: 48px; + display: block; + } + + &-picture &-item-thumbnail.anticon:before { + line-height: 48px; + font-size: 24px; + color: #999; + } + + &-picture &-item-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: top; + margin: 0 0 0 8px; + line-height: 42px; + transition: all 0.3s ease; + } + + &-picture &-item-uploading &-item-name { + line-height: 28px; + } + + &-picture &-item-progress { + padding-left: 56px; + margin-top: 0; + } + + &-picture .anticon-cross { + position: absolute; + right: 8px; + top: 8px; + line-height: 1; } .@{upload-prefix-cls}-success-icon {