Browse Source

feat: enhance handleRemove in Upload (#5974)

onRemove will be executed when removing file button is clicked, remove event will be prevented when return value is false.
But, if we want't to popup a confirm dialog, it can't block the execution of onRemove.
So, I add Promise support for onRemove. The return value of onRemove now can be a Promise, and the handleRemove function in Upload can wait for the non-blocking confirm dialog.
pull/5990/head
shlice 8 years ago
committed by Benjy Cui
parent
commit
38a7a87690
  1. 27
      components/upload/Upload.tsx
  2. 2
      components/upload/index.en-US.md
  3. 2
      components/upload/index.zh-CN.md

27
components/upload/Upload.tsx

@ -167,18 +167,21 @@ export default class Upload extends React.Component<UploadProps, any> {
handleRemove(file) {
const { onRemove } = this.props;
// Prevent removing file
const onRemoveReturnValue = onRemove && onRemove(file);
if (onRemoveReturnValue === false) {
return;
}
const removedFileList = removeFileItem(file, this.state.fileList);
if (removedFileList) {
this.onChange({
file,
fileList: removedFileList,
});
}
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
// Prevent removing file
if (ret === false) {
return;
}
const removedFileList = removeFileItem(file, this.state.fileList);
if (removedFileList) {
this.onChange({
file,
fileList: removedFileList,
});
}
});
}
handleManualRemove = (file) => {

2
components/upload/index.en-US.md

@ -34,7 +34,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| onChange | A callback function, can be executed when uploading state is changing. See [onChange](#onChange) | Function | - |
| listType | Built-in stylesheets, support for two types: `text` or `picture` | string | 'text'|
| onPreview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` | Function(file): boolean | - |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject. | Function(file): `boolean | Promise` | - |
| supportServerRender | Need to be turned on while the server side is rendering.| boolean | false |
| disabled | disable upload button | boolean | false |
| withCredentials | ajax upload with cookie sent | boolean | false |

2
components/upload/index.zh-CN.md

@ -35,7 +35,7 @@ title: Upload
| onChange | 上传文件改变时的状态,详见 onChange | Function | 无 |
| listType | 上传列表的内建样式,支持两种基本样式 `text` or `picture` | string | 'text'|
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 |
| onRemove | 点击移除文件时的回调,返回值为 false 时不移除 | Function(file): Boolean | 无 |
| onRemove   | 点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   |
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| withCredentials | 上传请求时是否携带 cookie | boolean | false |

Loading…
Cancel
Save