From 03cc7cbffacaeb67778cb81af11c74940e7493f2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 31 Aug 2015 18:13:16 +0800 Subject: [PATCH 1/7] Change variable name --- components/upload/demo/drag-simple.md | 2 +- components/upload/demo/drag.md | 2 +- components/upload/demo/limit.md | 2 +- components/upload/index.jsx | 32 +++++++++++++-------------- components/upload/uploadList.jsx | 7 +++--- 5 files changed, 22 insertions(+), 23 deletions(-) diff --git a/components/upload/demo/drag-simple.md b/components/upload/demo/drag-simple.md index 65860dda09..61322ec510 100644 --- a/components/upload/demo/drag-simple.md +++ b/components/upload/demo/drag-simple.md @@ -1,6 +1,6 @@ # 拖拽上传 -- order: 2 +- order: 3 样式简单一些。 diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index d802d97522..451e3603be 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -1,6 +1,6 @@ # 拖拽上传 -- order: 1 +- order: 2 可以把文件拖入指定区域，完成上传，同样支持点击上传。 diff --git a/components/upload/demo/limit.md b/components/upload/demo/limit.md index 91fc1fc60b..ea49cd722d 100644 --- a/components/upload/demo/limit.md +++ b/components/upload/demo/limit.md @@ -1,6 +1,6 @@ # 文件列表限制 -- order: 3 +- order: 1 `limit` 属性控制文件列表数的上限。如设为 1 时，表示只能上传一个文件，新文件会顶掉旧文件。 diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 666c07eef6..8333cf778b 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -13,50 +13,50 @@ function noop() { const AntUpload = React.createClass({ getInitialState() { return { - downloadList: [] + fileList: [] }; }, onStart(file) { - let nextDownloadList = this.state.downloadList; - nextDownloadList.push({ + let nextFileList = this.state.fileList; + nextFileList.push({ index: fileIndex++, uid: file.uid || '', filename: file.name, file: file, - status: 'downloading' + status: 'uploading' }); - if (nextDownloadList.length === this.props.limit + 1) { - nextDownloadList = nextDownloadList.slice(1); + if (nextFileList.length === this.props.limit + 1) { + nextFileList = nextFileList.slice(1); } this.setState({ - downloadList: nextDownloadList + fileList: nextFileList }); this.props.onStart(file); }, removeFile(file){ - var downloadList = this.state.downloadList.concat(); - let targetItem = getFileItem(file, downloadList); - var index = downloadList.indexOf(targetItem); + var fileList = this.state.fileList.concat(); + let targetItem = getFileItem(file, fileList); + var index = fileList.indexOf(targetItem); if (index !== -1) { - downloadList.splice(index, 1); + fileList.splice(index, 1); } this.setState({ - downloadList: downloadList + fileList: fileList }); }, onSuccess(ret, file) { var res = this.props.onSuccess(ret, file); if (res !== false) { - var downloadList = this.state.downloadList.concat(); + var fileList = this.state.fileList.concat(); Message.success(file.name + '上传完成'); - let targetItem = getFileItem(file, downloadList); + let targetItem = getFileItem(file, fileList); targetItem.status = 'done'; // 解析出文件上传后的远程地址 if (typeof this.props.urlResolver === 'function') { targetItem.url = this.props.urlResolver(ret); } this.setState({ - downloadList: downloadList + fileList: fileList }); } else { this.removeFile(file); @@ -121,7 +121,7 @@ const AntUpload = React.createClass({ {this.props.children} - diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 8c75b64994..7d61c4fdb3 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -33,8 +33,7 @@ export default React.createClass({ this.props.onRemove(file.file); }, render() { - let items = this.state.items; - let downloadItem = (file) => { + let list = this.state.items.map((file) => { let statusIcon = file.status === 'done' ? : ; let filename = file.url ? {file.filename} : @@ -47,10 +46,10 @@ export default React.createClass({ onClick={this.handleClose.bind(this, file)}> ); - }; + }); return (
- {items.map(downloadItem)} + {list}
); } From f50342b2ba7f013febcf24280ebfd39a587f86dc Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 31 Aug 2015 21:26:34 +0800 Subject: [PATCH 2/7] use onChange --- components/upload/demo/basic.md | 9 ++-- components/upload/demo/drag-simple.md | 5 +- components/upload/demo/drag.md | 5 +- components/upload/demo/limit.md | 6 +-- components/upload/index.jsx | 75 ++++++++++++++------------- components/upload/uploadList.jsx | 6 +-- 6 files changed, 48 insertions(+), 58 deletions(-) diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index c7d7ef0949..8ce67fbfac 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -10,13 +10,10 @@ var Upload = antd.Upload; var props = { - description: '支持扩展名为: .rar .zip ...', action: '/upload.do', - data: {}, - accept: '', - uploadTip: '', - onStart(file){ - console.log(file.uid); + onChange(info) { + console.log(info.file); + console.log(info.fileList); } }; diff --git a/components/upload/demo/drag-simple.md b/components/upload/demo/drag-simple.md index 61322ec510..a913d656c1 100644 --- a/components/upload/demo/drag-simple.md +++ b/components/upload/demo/drag-simple.md @@ -11,10 +11,7 @@ var Dragger = antd.Upload.Dragger; var props = { name: 'file', - action: '/upload.do', - data: {}, - accept: '', - uploadTip: '' + action: '/upload.do' }; React.render( diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index 451e3603be..99def9c085 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -11,10 +11,7 @@ var Dragger = antd.Upload.Dragger; var props = { name: 'file', - action: '/upload.do', - data: {}, - accept: 'i', - uploadTip: '' + action: '/upload.do' }; React.render( diff --git a/components/upload/demo/limit.md b/components/upload/demo/limit.md index ea49cd722d..00312c076d 100644 --- a/components/upload/demo/limit.md +++ b/components/upload/demo/limit.md @@ -10,13 +10,9 @@ var Upload = antd.Upload; var props = { - description: '支持扩展名为: .rar .zip ...', action: '/upload.do', - data: {}, - accept: '', - uploadTip: '', limit: 1, - onStart(file){ + onStart(file) { console.log(file.uid); } }; diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 8333cf778b..044c61612d 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -5,7 +5,6 @@ import Message from '../message'; import UploadList from './uploadList'; import getFileItem from './getFileItem'; const prefixCls = 'ant-upload'; -let fileIndex = 0; function noop() { } @@ -18,20 +17,18 @@ const AntUpload = React.createClass({ }, onStart(file) { let nextFileList = this.state.fileList; - nextFileList.push({ - index: fileIndex++, - uid: file.uid || '', - filename: file.name, - file: file, - status: 'uploading' - }); + file.status = 'started'; + nextFileList.push(file); if (nextFileList.length === this.props.limit + 1) { nextFileList = nextFileList.slice(1); } this.setState({ fileList: nextFileList }); - this.props.onStart(file); + this.props.onChange({ + file: file, + fileList: nextFileList + }); }, removeFile(file){ var fileList = this.state.fileList.concat(); @@ -45,33 +42,45 @@ const AntUpload = React.createClass({ }); }, onSuccess(ret, file) { - var res = this.props.onSuccess(ret, file); - if (res !== false) { - var fileList = this.state.fileList.concat(); - Message.success(file.name + '上传完成'); - let targetItem = getFileItem(file, fileList); - targetItem.status = 'done'; - // 解析出文件上传后的远程地址 - if (typeof this.props.urlResolver === 'function') { - targetItem.url = this.props.urlResolver(ret); - } - this.setState({ - fileList: fileList - }); - } else { - this.removeFile(file); + var fileList = this.state.fileList.concat(); + Message.success(file.name + '上传完成'); + let targetItem = getFileItem(file, fileList); + targetItem.status = 'done'; + // 解析出文件上传后的远程地址 + if (typeof this.props.urlResolver === 'function') { + targetItem.url = this.props.urlResolver(ret); } + this.setState({ + fileList: fileList + }); + this.props.onChange({ + file: targetItem, + fileList: this.state.fileList, + response: ret + }); }, onProgress(e, file) { - this.props.onProgress(e, file); + this.props.onChange({ + event: e, + file: file, + fileList: this.state.fileList + }); }, - onError(err, responce, file) { + onError(err, response, file) { Message.error(file.name + ' 上传失败'); this.removeFile(file); - this.props.onError(err, responce, file); + file.response = response; + this.props.onChange({ + error: err, + file: file, + fileList: this.fileList + }); }, - onRemove(file){ - this.props.onRemove(file); + onRemove(file) { + this.props.onChange({ + file: file, + fileList: this.fileList + }); }, getDefaultProps() { return { @@ -81,12 +90,7 @@ const AntUpload = React.createClass({ action: '', data: {}, accept: '', - uploadTip: '', - onStart: noop, - onError: noop, - onSuccess: noop, - onProgress: noop, - onRemove: noop, + onChange: noop, limit: Number.MAX_VALUE, urlResolver: function(ret) { try { @@ -122,7 +126,6 @@ const AntUpload = React.createClass({ ); diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 7d61c4fdb3..fe2a200ba2 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -36,10 +36,10 @@ export default React.createClass({ let list = this.state.items.map((file) => { let statusIcon = file.status === 'done' ? : ; - let filename = file.url ? {file.filename} : - {file.filename}; + let filename = file.url ? {file.name} : + {file.name}; return ( -
+
{statusIcon} {filename} Date: Tue, 1 Sep 2015 00:52:34 +0800 Subject: [PATCH 3/7] Refractor upload API 1. Remove limit urlResolver and onRemove 2. Remove onSuccess onProgress onError 3. Add onChange 4. Add fileList and defaultFileList props --- components/upload/demo/basic.md | 11 +-- components/upload/demo/defaultFileList.md | 40 +++++++++++ components/upload/demo/drag-simple.md | 2 +- components/upload/demo/drag.md | 2 +- components/upload/demo/fileList.md | 72 ++++++++++++++++++++ components/upload/demo/limit.md | 29 -------- components/upload/getFileItem.js | 2 +- components/upload/index.jsx | 83 ++++++++++++----------- components/upload/index.md | 49 +++++++------ components/upload/uploadList.jsx | 20 ++---- 10 files changed, 201 insertions(+), 109 deletions(-) create mode 100644 components/upload/demo/defaultFileList.md create mode 100644 components/upload/demo/fileList.md delete mode 100644 components/upload/demo/limit.md diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index 8ce67fbfac..fd5659d200 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -12,8 +12,10 @@ var Upload = antd.Upload; var props = { action: '/upload.do', onChange(info) { - console.log(info.file); - console.log(info.fileList); + if (info.file.status !== 'uploading') { + console.log(info.file); + console.log(info.fileList); + } } }; @@ -22,7 +24,6 @@ React.render( - , - document.getElementById('components-upload-demo-basic') -); + +, document.getElementById('components-upload-demo-basic')); ```` diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md new file mode 100644 index 0000000000..7de15e10c2 --- /dev/null +++ b/components/upload/demo/defaultFileList.md @@ -0,0 +1,40 @@ +# 传入已上传的文件 + +- order: 1 + +对已上传的文件进行编辑。 + +--- + +````jsx +var Upload = antd.Upload; + +var props = { + action: '/upload.do', + onChange(info) { + if (info.file.status !== 'uploading') { + console.log(info.file); + console.log(info.fileList); + } + }, + defaultFileList: [{ + uid: 12345, + name: 'xxx.png', + status: 'done', + url: 'http://www.baidu.com/xxx.png' + }, { + uid: 12346, + name: 'yyy.png', + status: 'done', + url: 'http://www.baidu.com/yyy.png' + }] +}; + +React.render( + + + +, document.getElementById('components-upload-demo-defaultfilelist')); +```` diff --git a/components/upload/demo/drag-simple.md b/components/upload/demo/drag-simple.md index a913d656c1..6d33ff60e4 100644 --- a/components/upload/demo/drag-simple.md +++ b/components/upload/demo/drag-simple.md @@ -1,6 +1,6 @@ # 拖拽上传 -- order: 3 +- order: 4 样式简单一些。 diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index 99def9c085..632e89bb97 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -1,6 +1,6 @@ # 拖拽上传 -- order: 2 +- order: 3 可以把文件拖入指定区域，完成上传，同样支持点击上传。 diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md new file mode 100644 index 0000000000..d359cff48e --- /dev/null +++ b/components/upload/demo/fileList.md @@ -0,0 +1,72 @@ +# 完全控制的上传列表 + +- order: 2 + +使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况： + +1) 上传列表数量的限制。 + +2) 读取远程路径并显示链接。 + +3) 按照服务器返回信息筛选成功上传的文件。 + +--- + +````jsx +var Upload = antd.Upload; +var fileList = [{ + uid: 123, + name: 'xxx.png', + status: 'done', + url: 'http://www.baidu.com/xxx.png' +}]; + +var MyUpload = React.createClass({ + getInitialState() { + return { + fileList: fileList + }; + }, + handleChange(info) { + let fileList = info.fileList; + + // 1. 上传列表数量的限制 + // 只显示最近上传的一个，旧的会被新的顶掉 + fileList = fileList.slice(-1); + + // 2. 读取远程路径并显示链接 + fileList = fileList.map(function(file) { + if (file.response) { + // 组件会将 file.url 作为链接进行展示 + file.url = JSON.parse(file.response).url; + } + return file; + }); + + // 3. 按照服务器返回信息筛选成功上传的文件 + fileList = fileList.filter(function(file) { + if (file.response) { + return JSON.parse(file.response).status === 'success'; + } + return true; + }); + + this.setState({ + fileList: fileList + }); + }, + render() { + var props = { + action: '/upload.do', + onChange: this.handleChange + }; + return + + ; + } +}); + +React.render(, document.getElementById('components-upload-demo-filelist')); +```` diff --git a/components/upload/demo/limit.md b/components/upload/demo/limit.md deleted file mode 100644 index 00312c076d..0000000000 --- a/components/upload/demo/limit.md +++ /dev/null @@ -1,29 +0,0 @@ -# 文件列表限制 - -- order: 1 - -`limit` 属性控制文件列表数的上限。如设为 1 时，表示只能上传一个文件，新文件会顶掉旧文件。 - ---- - -````jsx -var Upload = antd.Upload; - -var props = { - action: '/upload.do', - limit: 1, - onStart(file) { - console.log(file.uid); - } -}; - -React.render( - - - , - document.getElementById('components-upload-demo-limit') -); -```` - diff --git a/components/upload/getFileItem.js b/components/upload/getFileItem.js index 12f2125f72..660b02e72b 100644 --- a/components/upload/getFileItem.js +++ b/components/upload/getFileItem.js @@ -2,7 +2,7 @@ export default function getFileItem(file, fileList) { let matchWay = (!file.uid) ? 'byName' : 'byUid'; let target = fileList.filter((item) => { if (matchWay === 'byName') { - return item.filename === file.filename; + return item.name === file.name; } else { return item.uid === file.uid; } diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 044c61612d..246560e35f 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -12,76 +12,73 @@ function noop() { const AntUpload = React.createClass({ getInitialState() { return { - fileList: [] + fileList: this.props.fileList || this.props.defaultFileList || [] }; }, onStart(file) { let nextFileList = this.state.fileList; - file.status = 'started'; + file.status = 'uploading'; nextFileList.push(file); - if (nextFileList.length === this.props.limit + 1) { - nextFileList = nextFileList.slice(1); - } - this.setState({ - fileList: nextFileList - }); this.props.onChange({ file: file, fileList: nextFileList }); }, - removeFile(file){ - var fileList = this.state.fileList.concat(); + removeFile(file) { + file.status = 'removed'; + let fileList = this.state.fileList.concat(); let targetItem = getFileItem(file, fileList); - var index = fileList.indexOf(targetItem); + let index = fileList.indexOf(targetItem); if (index !== -1) { fileList.splice(index, 1); } - this.setState({ - fileList: fileList - }); + return fileList; }, - onSuccess(ret, file) { - var fileList = this.state.fileList.concat(); - Message.success(file.name + '上传完成'); + onSuccess(response, file) { + let fileList = this.state.fileList.concat(); + Message.success(file.name + '上传完成。'); let targetItem = getFileItem(file, fileList); targetItem.status = 'done'; + targetItem.response = response; // 解析出文件上传后的远程地址 if (typeof this.props.urlResolver === 'function') { - targetItem.url = this.props.urlResolver(ret); + targetItem.url = this.props.urlResolver(response); } - this.setState({ - fileList: fileList - }); - this.props.onChange({ + this.onChange({ file: targetItem, - fileList: this.state.fileList, - response: ret + fileList: this.state.fileList }); }, onProgress(e, file) { - this.props.onChange({ + this.onChange({ event: e, file: file, fileList: this.state.fileList }); }, - onError(err, response, file) { - Message.error(file.name + ' 上传失败'); - this.removeFile(file); + onError(error, response, file) { + Message.error(file.name + ' 上传失败。'); + file.error = error; file.response = response; - this.props.onChange({ - error: err, - file: file, - fileList: this.fileList - }); + this.handleRemove(file); }, - onRemove(file) { - this.props.onChange({ + handleRemove(file) { + let fileList = this.removeFile(file); + this.onChange({ file: file, - fileList: this.fileList + fileList: fileList }); }, + onChange(info) { + // 1. 有设置外部属性时不改变 fileList + // 2. 上传中状态（info.event）不改变 fileList + if (!('fileList' in this.props) && !info.event) { + this.setState({ + fileList: info.fileList + }); + } + this.props.onChange(info); + }, getDefaultProps() { return { type: 'select', @@ -91,14 +88,20 @@ const AntUpload = React.createClass({ data: {}, accept: '', onChange: noop, - limit: Number.MAX_VALUE, - urlResolver: function(ret) { + urlResolver: function(response) { try { - return JSON.parse(ret).url; + return JSON.parse(response).url; } catch(e) {} } }; }, + componentWillReceiveProps(nextProps) { + if ('fileList' in nextProps) { + this.setState({ + fileList: nextProps.fileList + }); + } + }, render() { let type = this.props.type || 'select'; let props = assign({}, this.props, { @@ -126,7 +129,7 @@ const AntUpload = React.createClass({
+ onRemove={this.handleRemove} />
); } diff --git a/components/upload/index.md b/components/upload/index.md index d7422f4b04..536696aa78 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -18,30 +18,41 @@ ## API -| 参数 | 说明 | 类型 | 默认值 | -|----------- |--------------------------------------------------------- | ---------- |-------| -| name | 可选参数, 上传的文件 | String | file | +| 参数 | 说明 | 类型 | 默认值| +|------------|--------------------------------------------------------------| ----------- |-------| +| name | 可选参数, 上传的文件 | String | file | | action | 必选参数, 上传的地址 | String | 无 | | data | 可选参数, 上传所需参数 | Object | 无 | -| multiple | 可选参数, 是否支持多选文件，支持ie10+ | Boolean | false | -| accept | 可选参数, 接受上传的文件类型, 详见input accept Attribute | String | 无 | -| onError | 可选参数, error callback |Function | 无 | -| onSuccess | 可选参数, success callback | Function | 无 | -| onProgress | 可选参数, progress callback, 现代浏览器有效 | Function | 无 | -| urlResolver| 通过解析请求返回数据，获得文件上传的远程地址 | Function | `function() { return JSON.parse(ret).url }` | -| limit | 文件上传数量的限制 | Number | Number.MAX_VALUE | +| multiple | 可选参数, 是否支持多选文件，支持 `ie10+` | Boolean | false | +| accept | 可选参数, 接受上传的文件类型, 详见 input accept Attribute | String | 无 | +| onChange | 可选参数, 上传文件改变时的状态，详见 onChange | Function | 无 | -### onError +### onChange -错误回调，有三个参数返回： +文件状态改变的回调，返回为： -1. `err` 请求返回错误信息 -2. `responce` 请求响应，包括错误状态码等信息 -3. `file` 错误的文件对象 +```js +{ + file: { ... }, + fileList: [ ... ], + event: { ... } +} +``` -### onSuccess +1. `file` 当前操作的文件对象。 -成功回调，返回两个参数 + ```js + { + uid: 'uid', // 文件唯一标识 + name: 'xx.png' // 文件名 + status: 'done', // 状态：uploading done removed + response: '{"status":"success"}' // 服务端响应内容 + } + ``` -1. `result` 上传图片返回结果 -2. `file` 文件对象 +2. `fileList` 当前的文件列表。 +3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。 + +## 显示下载链接 + +默认会解析服务器返回数据的 `body.url` 作为下载链接，需要自行配置请使用 fileList 属性进行展示控制。 diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index fe2a200ba2..7edb042235 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -22,21 +22,15 @@ export default React.createClass({ } }, handleClose(file) { - let items = this.state.items; - let removeItem = getFileItem(file, items); - if (removeItem) { - items.splice(items.indexOf(removeItem), 1); - } - this.setState({ - items: items - }); - this.props.onRemove(file.file); + this.props.onRemove(file); }, render() { let list = this.state.items.map((file) => { - let statusIcon = file.status === 'done' ? : + let statusIcon = file.status === 'done' ? + : ; - let filename = file.url ? {file.name} : + let filename = file.url ? + {file.name} : {file.name}; return (
@@ -47,10 +41,10 @@ export default React.createClass({
); }); - return (
+ return
{list} -
); +
; } }); From 5b76d65ee7987b3bfbe2796067ce0e53b23ef808 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Sep 2015 01:05:55 +0800 Subject: [PATCH 4/7] update CHANGELOG for Upload --- CHANGELOG.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 056bc0bf1e..32a5ebb6aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,13 @@ -## 0.8.1 (not ready) +## 0.9.0 (not ready) + + +### Upload + +**重构了 API 接口，不向下兼容**，支持自定义的功能扩展。 + +* 新增 `onChange(file) {}` 接口，移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。 +* 新增 `fileList` 和 `defaultFileList` 属性，以满足更多的自定义功能，具体见演示。 +* 默认可以拿到请求回调数据里的远程文件地址：`res.body.url`，作为链接展示在文件列表中方便下载。 ### Table @@ -7,12 +16,6 @@ * 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf) * 用 [reqwest-without-xhr2](http://npmjs.com/reqwest-without-xhr2) 代替了 reqwest，解决某些开发环境下 xhr2 依赖的问题。 -### Upload - -* 新增 `onRemove(file) {}` 接口，作为移除上传文件的回调。 -* 新增 `urlResolver(res) {}` 接口，可以拿到请求回调数据里的远程文件地址，展示在文件列表中方便下载。 -* 新增 `limit` 属性，用于限制文件上传列表的数量。 - ### Notification * 修复不会自动消失的问题。[23fce55](https://github.com/ant-design/ant-design/commit/23fce559b0b2faf4e0b686a92dbcdd045727a464) From dfa34ef99948462a4fe048e1e362b98bc1182411 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Tue, 1 Sep 2015 11:19:59 +0800 Subject: [PATCH 5/7] description font-size 12px --- style/components/steps.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/steps.less b/style/components/steps.less index 0baa2c00e3..b597d1f95e 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -204,7 +204,7 @@ font-weight: bold; } .@{steps-prefix-cls}-description { - font-size: 10px; + font-size: 12px; color: #999; } .@{steps-prefix-cls}-tail { From af30f55e7a5e7517ef8eddc4b3af8ddfec1e01a6 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 1 Sep 2015 11:26:33 +0800 Subject: [PATCH 6/7] optimize --- components/select/index.md | 1 + components/upload/demo/defaultFileList.md | 4 +- components/upload/demo/fileList.md | 4 +- components/upload/index.jsx | 55 ++++++++++++----------- components/upload/index.md | 6 +-- 5 files changed, 36 insertions(+), 34 deletions(-) diff --git a/components/select/index.md b/components/select/index.md index b10e3eea8c..4abd1515af 100644 --- a/components/select/index.md +++ b/components/select/index.md @@ -35,6 +35,7 @@ | allowClear | 显示清除按钮 | | false | | placeholder | 选择框默认文字 | string | 无 | | searchPlaceholder | 搜索框默认文字 | string | 无 | +| optionFilterProp | 输入项过滤对应的 option 属性 | string | value | | combobox | 输入框自动提示模式 | | false | | size | 选择框大小 | String | 无 | diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md index 7de15e10c2..0cbdc7d096 100644 --- a/components/upload/demo/defaultFileList.md +++ b/components/upload/demo/defaultFileList.md @@ -18,12 +18,12 @@ var props = { } }, defaultFileList: [{ - uid: 12345, + uid: -1, name: 'xxx.png', status: 'done', url: 'http://www.baidu.com/xxx.png' }, { - uid: 12346, + uid: -2, name: 'yyy.png', status: 'done', url: 'http://www.baidu.com/yyy.png' diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md index d359cff48e..ecc371814f 100644 --- a/components/upload/demo/fileList.md +++ b/components/upload/demo/fileList.md @@ -15,7 +15,7 @@ ````jsx var Upload = antd.Upload; var fileList = [{ - uid: 123, + uid: -1, name: 'xxx.png', status: 'done', url: 'http://www.baidu.com/xxx.png' @@ -32,7 +32,7 @@ var MyUpload = React.createClass({ // 1. 上传列表数量的限制 // 只显示最近上传的一个，旧的会被新的顶掉 - fileList = fileList.slice(-1); + fileList = fileList.slice(-2); // 2. 读取远程路径并显示链接 fileList = fileList.map(function(file) { diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 246560e35f..e8f2b1c665 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -16,10 +16,10 @@ const AntUpload = React.createClass({ }; }, onStart(file) { - let nextFileList = this.state.fileList; + let nextFileList = this.state.fileList.concat(); file.status = 'uploading'; nextFileList.push(file); - this.props.onChange({ + this.onChange({ file: file, fileList: nextFileList }); @@ -31,30 +31,34 @@ const AntUpload = React.createClass({ let index = fileList.indexOf(targetItem); if (index !== -1) { fileList.splice(index, 1); + return fileList; } - return fileList; + return null; }, onSuccess(response, file) { let fileList = this.state.fileList.concat(); Message.success(file.name + '上传完成。'); let targetItem = getFileItem(file, fileList); - targetItem.status = 'done'; - targetItem.response = response; - // 解析出文件上传后的远程地址 - if (typeof this.props.urlResolver === 'function') { - targetItem.url = this.props.urlResolver(response); + // 之前已经删除 + if (targetItem) { + targetItem.status = 'done'; + targetItem.response = response; + this.onChange({ + file: targetItem, + fileList: this.state.fileList + }); } - this.onChange({ - file: targetItem, - fileList: this.state.fileList - }); }, onProgress(e, file) { - this.onChange({ - event: e, - file: file, - fileList: this.state.fileList - }); + let fileList = this.state.fileList; + let targetItem = getFileItem(file, fileList); + if (targetItem) { + this.onChange({ + event: e, + file: file, + fileList: this.state.fileList + }); + } }, onError(error, response, file) { Message.error(file.name + ' 上传失败。'); @@ -64,10 +68,12 @@ const AntUpload = React.createClass({ }, handleRemove(file) { let fileList = this.removeFile(file); - this.onChange({ - file: file, - fileList: fileList - }); + if (fileList) { + this.onChange({ + file: file, + fileList: fileList + }); + } }, onChange(info) { // 1. 有设置外部属性时不改变 fileList @@ -88,11 +94,6 @@ const AntUpload = React.createClass({ data: {}, accept: '', onChange: noop, - urlResolver: function(response) { - try { - return JSON.parse(response).url; - } catch(e) {} - } }; }, componentWillReceiveProps(nextProps) { @@ -129,7 +130,7 @@ const AntUpload = React.createClass({ + onRemove={this.handleRemove}/> ); } diff --git a/components/upload/index.md b/components/upload/index.md index 536696aa78..1b2640c408 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -43,9 +43,9 @@ ```js { - uid: 'uid', // 文件唯一标识 + uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png' // 文件名 - status: 'done', // 状态：uploading done removed + status: 'done', // 状态：uploading done response: '{"status":"success"}' // 服务端响应内容 } ``` @@ -55,4 +55,4 @@ ## 显示下载链接 -默认会解析服务器返回数据的 `body.url` 作为下载链接，需要自行配置请使用 fileList 属性进行展示控制。 +请使用 fileList 属性设置数组项的 url 属性进行展示控制。 From b4a3d3e4d974f15f5eea0ffcb73ecd8a825b6ab3 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 1 Sep 2015 11:28:36 +0800 Subject: [PATCH 7/7] optimize --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32a5ebb6aa..1ed9727171 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ * 新增 `onChange(file) {}` 接口，移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。 * 新增 `fileList` 和 `defaultFileList` 属性，以满足更多的自定义功能，具体见演示。 -* 默认可以拿到请求回调数据里的远程文件地址：`res.body.url`，作为链接展示在文件列表中方便下载。 +* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。 ### Table