Browse Source

optimize

pull/226/head
yiminghe 9 years ago
parent
commit
af30f55e7a
  1. 1
      components/select/index.md
  2. 4
      components/upload/demo/defaultFileList.md
  3. 4
      components/upload/demo/fileList.md
  4. 55
      components/upload/index.jsx
  5. 6
      components/upload/index.md

1
components/select/index.md

@ -35,6 +35,7 @@
| allowClear | 显示清除按钮 | | false | | allowClear | 显示清除按钮 | | false |
| placeholder | 选择框默认文字 | string | 无 | | placeholder | 选择框默认文字 | string | 无 |
| searchPlaceholder | 搜索框默认文字 | string | 无 | | searchPlaceholder | 搜索框默认文字 | string | 无 |
| optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
| combobox | 输入框自动提示模式 | | false | | combobox | 输入框自动提示模式 | | false |
| size | 选择框大小 | String | 无 | | size | 选择框大小 | String | 无 |

4
components/upload/demo/defaultFileList.md

@ -18,12 +18,12 @@ var props = {
} }
}, },
defaultFileList: [{ defaultFileList: [{
uid: 12345, uid: -1,
name: 'xxx.png', name: 'xxx.png',
status: 'done', status: 'done',
url: 'http://www.baidu.com/xxx.png' url: 'http://www.baidu.com/xxx.png'
}, { }, {
uid: 12346, uid: -2,
name: 'yyy.png', name: 'yyy.png',
status: 'done', status: 'done',
url: 'http://www.baidu.com/yyy.png' url: 'http://www.baidu.com/yyy.png'

4
components/upload/demo/fileList.md

@ -15,7 +15,7 @@
````jsx ````jsx
var Upload = antd.Upload; var Upload = antd.Upload;
var fileList = [{ var fileList = [{
uid: 123, uid: -1,
name: 'xxx.png', name: 'xxx.png',
status: 'done', status: 'done',
url: 'http://www.baidu.com/xxx.png' url: 'http://www.baidu.com/xxx.png'
@ -32,7 +32,7 @@ var MyUpload = React.createClass({
// 1. 上传列表数量的限制 // 1. 上传列表数量的限制
// 只显示最近上传的一个,旧的会被新的顶掉 // 只显示最近上传的一个,旧的会被新的顶掉
fileList = fileList.slice(-1); fileList = fileList.slice(-2);
// 2. 读取远程路径并显示链接 // 2. 读取远程路径并显示链接
fileList = fileList.map(function(file) { fileList = fileList.map(function(file) {

55
components/upload/index.jsx

@ -16,10 +16,10 @@ const AntUpload = React.createClass({
}; };
}, },
onStart(file) { onStart(file) {
let nextFileList = this.state.fileList; let nextFileList = this.state.fileList.concat();
file.status = 'uploading'; file.status = 'uploading';
nextFileList.push(file); nextFileList.push(file);
this.props.onChange({ this.onChange({
file: file, file: file,
fileList: nextFileList fileList: nextFileList
}); });
@ -31,30 +31,34 @@ const AntUpload = React.createClass({
let index = fileList.indexOf(targetItem); let index = fileList.indexOf(targetItem);
if (index !== -1) { if (index !== -1) {
fileList.splice(index, 1); fileList.splice(index, 1);
return fileList;
} }
return fileList; return null;
}, },
onSuccess(response, file) { onSuccess(response, file) {
let fileList = this.state.fileList.concat(); let fileList = this.state.fileList.concat();
Message.success(file.name + '上传完成。'); Message.success(file.name + '上传完成。');
let targetItem = getFileItem(file, fileList); let targetItem = getFileItem(file, fileList);
targetItem.status = 'done'; //
targetItem.response = response; if (targetItem) {
// targetItem.status = 'done';
if (typeof this.props.urlResolver === 'function') { targetItem.response = response;
targetItem.url = this.props.urlResolver(response); this.onChange({
file: targetItem,
fileList: this.state.fileList
});
} }
this.onChange({
file: targetItem,
fileList: this.state.fileList
});
}, },
onProgress(e, file) { onProgress(e, file) {
this.onChange({ let fileList = this.state.fileList;
event: e, let targetItem = getFileItem(file, fileList);
file: file, if (targetItem) {
fileList: this.state.fileList this.onChange({
}); event: e,
file: file,
fileList: this.state.fileList
});
}
}, },
onError(error, response, file) { onError(error, response, file) {
Message.error(file.name + ' 上传失败。'); Message.error(file.name + ' 上传失败。');
@ -64,10 +68,12 @@ const AntUpload = React.createClass({
}, },
handleRemove(file) { handleRemove(file) {
let fileList = this.removeFile(file); let fileList = this.removeFile(file);
this.onChange({ if (fileList) {
file: file, this.onChange({
fileList: fileList file: file,
}); fileList: fileList
});
}
}, },
onChange(info) { onChange(info) {
// 1. fileList // 1. fileList
@ -88,11 +94,6 @@ const AntUpload = React.createClass({
data: {}, data: {},
accept: '', accept: '',
onChange: noop, onChange: noop,
urlResolver: function(response) {
try {
return JSON.parse(response).url;
} catch(e) {}
}
}; };
}, },
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
@ -129,7 +130,7 @@ const AntUpload = React.createClass({
</Upload> </Upload>
</div> </div>
<UploadList items={this.state.fileList} <UploadList items={this.state.fileList}
onRemove={this.handleRemove} /> onRemove={this.handleRemove}/>
</div> </div>
); );
} }

6
components/upload/index.md

@ -43,9 +43,9 @@
```js ```js
{ {
uid: 'uid', // 文件唯一标识 uid: 'uid', // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
name: 'xx.png' // 文件名 name: 'xx.png' // 文件名
status: 'done', // 状态:uploading done removed status: 'done', // 状态:uploading done
response: '{"status":"success"}' // 服务端响应内容 response: '{"status":"success"}' // 服务端响应内容
} }
``` ```
@ -55,4 +55,4 @@
## 显示下载链接 ## 显示下载链接
默认会解析服务器返回数据的 `body.url` 作为下载链接,需要自行配置请使用 fileList 属性进行展示控制。 请使用 fileList 属性设置数组项的 url 属性进行展示控制。

Loading…
Cancel
Save