From 5e52057671f9781ad2b957b0ff9adfcd1eb1eb88 Mon Sep 17 00:00:00 2001
From: Wuxh <wxh1220@gmail.com>
Date: Fri, 5 May 2023 14:05:20 +0800
Subject: [PATCH] fix: Upload disabled state logic (#42143)

* fix: Upload disable state logic

* chore(typo): update

* test(upload): add case

* fix: Upload disable state logic

* test: remove case

* chore: remove unused

(cherry picked from commit 6d0acb0518bc285e7a7717ae52fba0765d25e141)

# Conflicts:
#	components/upload/Upload.tsx
#	components/upload/UploadList/index.tsx

* chore: skip githook format

* test: update

* test: update

* chore: update
---
 components/upload/Upload.tsx                  | 12 ++++++---
 components/upload/UploadList/index.tsx        |  2 ++
 .../upload/__tests__/uploadlist.test.tsx      | 27 +++++++++++++++++++
 components/upload/interface.tsx               |  4 +++
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 77f036bc24..b27acd64f7 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -9,14 +9,19 @@ import DisabledContext from '../config-provider/DisabledContext';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import warning from '../_util/warning';
-import type { RcFile, ShowUploadListInterface, UploadChangeParam, UploadFile } from './interface';
-import { UploadProps } from './interface';
+import type {
+  RcFile,
+  ShowUploadListInterface,
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from './interface';
 import UploadList from './UploadList';
 import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
 
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
 
-export { UploadProps };
+export type { UploadProps };
 
 const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (props, ref) => {
   const {
@@ -368,6 +373,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
               appendAction={button}
               appendActionVisible={buttonVisible}
               itemRender={itemRender}
+              disabled={mergedDisabled}
             />
           );
         }}
diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
index 2d73b00dcb..ba7134a76b 100644
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@@ -49,6 +49,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     appendAction,
     appendActionVisible = true,
     itemRender,
+    disabled,
   } = props;
   const forceUpdate = useForceUpdate();
   const [motionAppear, setMotionAppear] = React.useState(false);
@@ -130,6 +131,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
       type: 'text',
       size: 'small',
       title,
+      disabled,
       onClick: (e: React.MouseEvent<HTMLElement>) => {
         callback();
         if (isValidElement(customIcon) && customIcon.props.onClick) {
diff --git a/components/upload/__tests__/uploadlist.test.tsx b/components/upload/__tests__/uploadlist.test.tsx
index b055ba1663..2f5008de42 100644
--- a/components/upload/__tests__/uploadlist.test.tsx
+++ b/components/upload/__tests__/uploadlist.test.tsx
@@ -1541,4 +1541,31 @@ describe('Upload List', () => {
 
     expect(container.querySelector('.ant-upload-list-item-error')).toBeTruthy();
   });
+
+  // https://github.com/ant-design/ant-design/issues/42056
+  describe('when form is disabled but upload is not', () => {
+    it('should not disable remove button', () => {
+      const { container } = render(
+        <Form name="base" disabled>
+          <Form.Item name="upload">
+            <Upload
+              disabled={false}
+              defaultFileList={[
+                {
+                  uid: '1',
+                  name: 'zzz.png',
+                  status: 'error',
+                  url: 'http://www.baidu.com/zzz.png',
+                },
+              ]}
+            />
+          </Form.Item>
+        </Form>,
+      );
+
+      const removeButton = container.querySelector('.ant-upload-list-item-card-actions > button');
+      expect(removeButton).toBeTruthy();
+      expect(removeButton).not.toBeDisabled();
+    });
+  });
 });
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 1b1c218085..540d645885 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -159,4 +159,8 @@ export interface UploadListProps<T = any> {
   appendAction?: React.ReactNode;
   appendActionVisible?: boolean;
   itemRender?: ItemRender<T>;
+  /**
+   * @internal Only the internal remove button is provided for use
+   */
+  disabled?: boolean;
 }