mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

fix: Upload.Dragger triggered by label when disabled (#24202)

Browse Source 
* refactor Dragger.tsx

* 🐛 Avoid disabled Upload.Dragger being triggered by label

close #24197
This commit is contained in:
偏右 2020-05-16 14:25:49 +08:00 committed by GitHub
parent 9924bbf838
commit a820046130
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/upload/Dragger.tsx
View File

@ -9,7 +9,7 @@ export type DraggerProps = UploadProps & { height?: number };
// eslint-disable-next-line react/prefer-stateless-function
export default class Dragger extends React.Component<DraggerProps, any> {
render() {
const { props } = this;
return <Upload {...props} type="drag" style={{ ...props.style, height: props.height }} />;
const { style, height, ...restProps } = this.props;
return <Upload {...restProps} type="drag" style={{ ...style, height }} />;
}
}

15
components/upload/Upload.tsx
View File

@ -299,6 +299,14 @@ class Upload extends React.Component<UploadProps, UploadState> {
delete rcUploadProps.className;
delete rcUploadProps.style;
// Remove id to avoid open by label when trigger is hidden
// !children: https://github.com/ant-design/ant-design/issues/14298
// disabled: https://github.com/ant-design/ant-design/issues/16478
// https://github.com/ant-design/ant-design/issues/24197
if (!children || disabled) {
delete rcUploadProps.id;
}
const uploadList = showUploadList ? (
<LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
{this.renderUploadList}
@ -342,13 +350,6 @@ class Upload extends React.Component<UploadProps, UploadState> {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
// Remove id to avoid open by label when trigger is hidden
// https://github.com/ant-design/ant-design/issues/14298
// https://github.com/ant-design/ant-design/issues/16478
if (!children || disabled) {
delete rcUploadProps.id;
}
const uploadButton = (
<div className={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
<RcUpload {...rcUploadProps} ref={this.saveUpload} />

20
components/upload/__tests__/upload.test.js
View File

@ -219,7 +219,7 @@ describe('Upload', () => {
});
// https://github.com/ant-design/ant-design/issues/16478
it('should not have id if upload is disabled, avoid being triggered by label', () => {
it('should not have id if Upload is disabled, avoid being triggered by label', () => {
const Demo = ({ disabled }) => (
<Form>
<Form.Item name="upload" label="Upload" valuePropName="fileList">
@ -236,6 +236,24 @@ describe('Upload', () => {
expect(wrapper.find('input#upload').length).toBe(0);
});
// https://github.com/ant-design/ant-design/issues/24197
it('should not have id if upload.Dragger is disabled, avoid being triggered by label', () => {
const Demo = ({ disabled }) => (
<Form>
<Form.Item name="upload" label="Upload" valuePropName="fileList">
<Upload.Dragger disabled={disabled}>
<div>upload</div>
</Upload.Dragger>
</Form.Item>
</Form>
);
const wrapper = mount(<Demo />);
expect(wrapper.find('input#upload').length).toBe(1);
wrapper.setProps({ disabled: true });
expect(wrapper.find('input#upload').length).toBe(0);
});
it('should be controlled by fileList', () => {
const fileList = [
{