mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix(UploadList): fix disabled state of action button when used in Form (#53504)

Browse Source
This commit is contained in:
𝑾𝒖𝒙𝒉 2025-04-16 17:40:53 +08:00 committed by GitHub
parent e685c18fbb
commit 88f03808d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/upload/UploadList/index.tsx
View File

@ -136,10 +136,9 @@ const InternalUploadList: React.ForwardRefRenderFunction<UploadListRef, UploadLi
}
},
className: `${prefixCls}-list-item-action`,
disabled: acceptUploadDisabled ? disabled : false,
};
if (acceptUploadDisabled) {
btnProps.disabled = disabled;
}
return React.isValidElement(customIcon) ? (
<Button
{...btnProps}

49
components/upload/__tests__/uploadlist.test.tsx
View File

@ -608,7 +608,7 @@ describe('Upload List', () => {
unmount();
});
it('disabled should not affect preview and download icon', () => {
describe('disabled should not affect preview and download icon', () => {
const list = [
{
name: 'image',
@ -618,7 +618,18 @@ describe('Upload List', () => {
},
];
const { container: wrapper, unmount } = render(
const check = (wrapper: HTMLElement) => {
const actionEls = wrapper.querySelectorAll('.ant-upload-list-item-actions > *');
expect(actionEls).toHaveLength(3);
// preview icon
expect(actionEls[0]).not.toBeDisabled();
// download icon
expect(actionEls[1]).not.toBeDisabled();
// delete icon
expect(actionEls[2]).toBeDisabled();
};
const InnerUploadList = (props: Partial<UploadProps>) => (
<Upload
listType="picture-card"
defaultFileList={list as UploadProps['defaultFileList']}
@ -627,25 +638,29 @@ describe('Upload List', () => {
showDownloadIcon: true,
showRemoveIcon: true,
}}
disabled
{...props}
>
<button type="button">upload</button>
</Upload>,
</Upload>
);
// preview icon
expect(
wrapper.querySelectorAll('.ant-upload-list-item-actions > *')[0].hasAttribute('disabled'),
).toBeFalsy();
// download icon
expect(
wrapper.querySelectorAll('.ant-upload-list-item-actions > *')[1].hasAttribute('disabled'),
).toBeFalsy();
// delete icon
expect(
wrapper.querySelectorAll('.ant-upload-list-item-actions > *')[2].hasAttribute('disabled'),
).toBeTruthy();
unmount();
// https://github.com/ant-design/ant-design/issues/46171
it('normal', () => {
const { container: wrapper } = render(<InnerUploadList disabled />);
check(wrapper);
});
// https://github.com/ant-design/ant-design/issues/53503
it('in Form', () => {
const { container: wrapper } = render(
<Form disabled>
<Form.Item>
<InnerUploadList />
</Form.Item>
</Form>,
);
check(wrapper);
});
});
it('should support custom onClick in custom icon', async () => {