From f1530aaaf2d1d3c4db849683442b1c351cf25eb7 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 14:48:11 +0800
Subject: [PATCH 01/15] fix(upload): fix upload and remove action of component
 upload

affects: @gio-design/components
---
 .../src/components/upload/Actions.tsx         |  9 ++++++--
 .../src/components/upload/Upload.tsx          | 23 ++++++++++++++++---
 .../src/components/upload/interface.ts        |  2 ++
 .../upload/triggers/AvatarTrigger.tsx         |  3 ++-
 .../upload/triggers/CardTrigger.tsx           | 10 ++++++--
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/upload/Actions.tsx b/packages/components/src/components/upload/Actions.tsx
index b69dfb5143..48e64d4be5 100644
--- a/packages/components/src/components/upload/Actions.tsx
+++ b/packages/components/src/components/upload/Actions.tsx
@@ -6,9 +6,10 @@ import { IActionsProps, STATUS_SUCCESS } from './interface';
 
 const Actions: React.FC<IActionsProps> = ({
   useDelete = true,
-  useUpload,
+  useUpload ,
   file,
   onRemove,
+  onUpload,
   placement = 'center',
 }: IActionsProps) => {
   const prefixCls = useContext(UploadPrefixClsContext);
@@ -30,10 +31,14 @@ const Actions: React.FC<IActionsProps> = ({
     onRemove?.();
   };
 
+  const handleUpload = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onUpload?.();
+  };
   return (
     <span className={cls} onClick={handleStopPropagation} aria-hidden="true">
       <span className={iconContainerCls}>
-        {useUpload && <UploadOutlined className={iconCls} />}
+        {useUpload && <UploadOutlined className={iconCls} onClick={ handleUpload }/>}
         {useDelete && <DeleteOutlined className={iconCls} onClick={handleRemove} />}
       </span>
     </span>
diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index 1d3f067dd5..d67e8c751f 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import RcUpload from 'rc-upload';
 import classnames from 'classnames';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
@@ -67,6 +67,7 @@ const Upload: React.FC<IUploadProps> = ({
 
   const Trigger = triggerMap[type];
 
+  useEffect(() => {});
   const handleBeforeUpload = (fileBeforeUpload: IRcFile, fileList: IRcFile[]) =>
     beforeUpload?.(fileBeforeUpload, fileList);
 
@@ -130,10 +131,25 @@ const Upload: React.FC<IUploadProps> = ({
       if (res === false) {
         return;
       }
-
-      setFile(getEmptyFileObj(uploadedFile));
+      console.log(file)
+      console.log(uploadedFile)
+      if (file?.dataUrl === uploadedFile?.dataUrl) {
+        setFile({
+          uid: '',
+          size: 0,
+          name: '本地上传',
+          type: '$empty-file',
+          status: 'notYet',
+          dataUrl: '',
+        });
+      } else {
+        setFile(getEmptyFileObj(uploadedFile));
+      }
     });
   };
+  const handleUpload = () => {
+    rcUploadRef.current.uploader.onClick();
+  };
 
   const handleInputUpload = async (uploadType: TInputUploadType = 'url', url: string) => {
     const uploadFile = {
@@ -207,6 +223,7 @@ const Upload: React.FC<IUploadProps> = ({
     inputUploadType,
     setFile,
     onRemove: handleRemove,
+    onUpload: handleUpload,
     onInputUpload: handleInputUpload,
     placeholderImg,
   };
diff --git a/packages/components/src/components/upload/interface.ts b/packages/components/src/components/upload/interface.ts
index f960c7efdf..0166bfba92 100644
--- a/packages/components/src/components/upload/interface.ts
+++ b/packages/components/src/components/upload/interface.ts
@@ -125,6 +125,7 @@ export interface ITriggerProps {
   setFile: (file: IUploadFile) => void;
   file: IUploadFile;
   onRemove: () => void;
+  onUpload: () => void;
   onInputUpload: (type: TInputUploadType, url: string) => void;
   inputUploadType: TInputUploadType;
   accept: string | undefined;
@@ -146,6 +147,7 @@ export interface IPreviewProps {
 export interface IActionsProps {
   file: IUploadFile;
   onRemove: () => void;
+  onUpload?: () => void;
   useUpload?: boolean;
   useDelete?: boolean;
   placement?: 'center' | 'rightTop';
diff --git a/packages/components/src/components/upload/triggers/AvatarTrigger.tsx b/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
index 2132a6bf14..2e84dae7c4 100644
--- a/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
+++ b/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
@@ -10,6 +10,7 @@ const AvatarTrigger: React.FC<ITriggerProps> = ({
   triggerProps,
   file,
   onRemove,
+  onUpload,
   children,
   placeholderImg = '',
 }: ITriggerProps) => {
@@ -22,7 +23,7 @@ const AvatarTrigger: React.FC<ITriggerProps> = ({
         <Avatar src={file?.dataUrl ?? placeholderImg} size="huge">
           {children as string}
         </Avatar>
-        <Actions file={file} useUpload useDelete={file?.status === STATUS_SUCCESS} onRemove={onRemove} />
+        <Actions file={file} useUpload useDelete={file?.status === STATUS_SUCCESS} onRemove={onRemove} onUpload={ onUpload}/>
       </span>
     </Loading>
   );
diff --git a/packages/components/src/components/upload/triggers/CardTrigger.tsx b/packages/components/src/components/upload/triggers/CardTrigger.tsx
index 9886a06bc4..0b0c6a1b59 100644
--- a/packages/components/src/components/upload/triggers/CardTrigger.tsx
+++ b/packages/components/src/components/upload/triggers/CardTrigger.tsx
@@ -7,7 +7,13 @@ import { UploadPrefixClsContext } from '../UploadContext';
 import Preview from '../Preview';
 import Actions from '../Actions';
 
-const CardTrigger: React.FC<ITriggerProps> = ({ triggerProps, file, onRemove, placeholderImg }: ITriggerProps) => {
+const CardTrigger: React.FC<ITriggerProps> = ({
+  triggerProps,
+  file,
+  onRemove,
+  onUpload,
+  placeholderImg,
+}: ITriggerProps) => {
   const prefixCls = useContext(UploadPrefixClsContext);
   const cls = classnames(triggerProps?.className, `${prefixCls}__card`);
 
@@ -25,7 +31,7 @@ const CardTrigger: React.FC<ITriggerProps> = ({ triggerProps, file, onRemove, pl
         {file?.status === STATUS_SUCCESS && (
           <>
             <Preview file={file} size={80} />
-            <Actions file={file} useUpload onRemove={onRemove} />
+            <Actions file={file} onRemove={onRemove} useUpload onUpload={onUpload} />
           </>
         )}
         {file?.status !== STATUS_SUCCESS && <PlusOutlined className={`${prefixCls}__plus-icon`} />}

From 001139533f5af09ff45ad5781446014b19175551 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 14:56:06 +0800
Subject: [PATCH 02/15] fix(upload): remove unnessary code

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index d67e8c751f..4c99553bbb 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -67,7 +67,6 @@ const Upload: React.FC<IUploadProps> = ({
 
   const Trigger = triggerMap[type];
 
-  useEffect(() => {});
   const handleBeforeUpload = (fileBeforeUpload: IRcFile, fileList: IRcFile[]) =>
     beforeUpload?.(fileBeforeUpload, fileList);
 

From 413d1f7382a252df3af30de6f5ad6cfa88901807 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 15:02:16 +0800
Subject: [PATCH 03/15] fix(upload): format code

affects: @gio-design/components
---
 packages/components/src/components/upload/Actions.tsx     | 4 ++--
 .../src/components/upload/triggers/AvatarTrigger.tsx      | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/upload/Actions.tsx b/packages/components/src/components/upload/Actions.tsx
index 48e64d4be5..3e00d5b8da 100644
--- a/packages/components/src/components/upload/Actions.tsx
+++ b/packages/components/src/components/upload/Actions.tsx
@@ -6,7 +6,7 @@ import { IActionsProps, STATUS_SUCCESS } from './interface';
 
 const Actions: React.FC<IActionsProps> = ({
   useDelete = true,
-  useUpload ,
+  useUpload,
   file,
   onRemove,
   onUpload,
@@ -38,7 +38,7 @@ const Actions: React.FC<IActionsProps> = ({
   return (
     <span className={cls} onClick={handleStopPropagation} aria-hidden="true">
       <span className={iconContainerCls}>
-        {useUpload && <UploadOutlined className={iconCls} onClick={ handleUpload }/>}
+        {useUpload && <UploadOutlined className={iconCls} onClick={handleUpload} />}
         {useDelete && <DeleteOutlined className={iconCls} onClick={handleRemove} />}
       </span>
     </span>
diff --git a/packages/components/src/components/upload/triggers/AvatarTrigger.tsx b/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
index 2e84dae7c4..a1713df355 100644
--- a/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
+++ b/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
@@ -23,7 +23,13 @@ const AvatarTrigger: React.FC<ITriggerProps> = ({
         <Avatar src={file?.dataUrl ?? placeholderImg} size="huge">
           {children as string}
         </Avatar>
-        <Actions file={file} useUpload useDelete={file?.status === STATUS_SUCCESS} onRemove={onRemove} onUpload={ onUpload}/>
+        <Actions
+          file={file}
+          useUpload
+          useDelete={file?.status === STATUS_SUCCESS}
+          onRemove={onRemove}
+          onUpload={onUpload}
+        />
       </span>
     </Loading>
   );

From ca2c409b07dad9e6bffc12d3aaa8b8c7a3e98b9f Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 15:08:28 +0800
Subject: [PATCH 04/15] fix(upload): remove unused hook

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index 4c99553bbb..09e5895b59 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import RcUpload from 'rc-upload';
 import classnames from 'classnames';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
@@ -130,8 +130,8 @@ const Upload: React.FC<IUploadProps> = ({
       if (res === false) {
         return;
       }
-      console.log(file)
-      console.log(uploadedFile)
+      console.log(file);
+      console.log(uploadedFile);
       if (file?.dataUrl === uploadedFile?.dataUrl) {
         setFile({
           uid: '',
@@ -147,7 +147,7 @@ const Upload: React.FC<IUploadProps> = ({
     });
   };
   const handleUpload = () => {
-    rcUploadRef.current.uploader.onClick();
+    rcUploadRef.current.uploader?.onClick();
   };
 
   const handleInputUpload = async (uploadType: TInputUploadType = 'url', url: string) => {

From 655f855cf8f2d99eb17cfb45a2ba68e2abf3818d Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 15:14:22 +0800
Subject: [PATCH 05/15] fix(upload): resolve compile error

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index 09e5895b59..7fbd8874fa 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -147,7 +147,7 @@ const Upload: React.FC<IUploadProps> = ({
     });
   };
   const handleUpload = () => {
-    rcUploadRef.current.uploader?.onClick();
+    rcUploadRef.current?.uploader.onClick();
   };
 
   const handleInputUpload = async (uploadType: TInputUploadType = 'url', url: string) => {

From 1330c6200fc9054ed7d5a364a51833801990200f Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 15:21:40 +0800
Subject: [PATCH 06/15] refactor(upload): resolve compile error

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index 7fbd8874fa..ecae0c51e9 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -147,7 +147,8 @@ const Upload: React.FC<IUploadProps> = ({
     });
   };
   const handleUpload = () => {
-    rcUploadRef.current?.uploader.onClick();
+    const { current } = rcUploadRef;
+    current.uploader?.onClick();
   };
 
   const handleInputUpload = async (uploadType: TInputUploadType = 'url', url: string) => {

From 6686c531ef008d5b46af36422706f86fd10ef295 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 15:25:36 +0800
Subject: [PATCH 07/15] refactor(upload): remove log

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index ecae0c51e9..56d87e4b10 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -130,8 +130,6 @@ const Upload: React.FC<IUploadProps> = ({
       if (res === false) {
         return;
       }
-      console.log(file);
-      console.log(uploadedFile);
       if (file?.dataUrl === uploadedFile?.dataUrl) {
         setFile({
           uid: '',
@@ -148,7 +146,7 @@ const Upload: React.FC<IUploadProps> = ({
   };
   const handleUpload = () => {
     const { current } = rcUploadRef;
-    current.uploader?.onClick();
+    current?.uploader?.onClick();
   };
 
   const handleInputUpload = async (uploadType: TInputUploadType = 'url', url: string) => {

From d327d9aa240d428c97d47b34ca614731342e98c2 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 17:48:13 +0800
Subject: [PATCH 08/15] fix(upload): reconstruct code

affects: @gio-design/components
---
 packages/components/src/components/upload/Actions.tsx  | 10 +++-------
 packages/components/src/components/upload/Upload.tsx   |  5 -----
 packages/components/src/components/upload/interface.ts |  2 --
 .../src/components/upload/triggers/AvatarTrigger.tsx   |  9 +--------
 .../src/components/upload/triggers/CardTrigger.tsx     | 10 ++--------
 5 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/components/upload/Actions.tsx b/packages/components/src/components/upload/Actions.tsx
index 3e00d5b8da..c7b96b576b 100644
--- a/packages/components/src/components/upload/Actions.tsx
+++ b/packages/components/src/components/upload/Actions.tsx
@@ -9,7 +9,6 @@ const Actions: React.FC<IActionsProps> = ({
   useUpload,
   file,
   onRemove,
-  onUpload,
   placement = 'center',
 }: IActionsProps) => {
   const prefixCls = useContext(UploadPrefixClsContext);
@@ -21,7 +20,8 @@ const Actions: React.FC<IActionsProps> = ({
   const iconCls = classnames(`${prefixCls}__actions-icon`);
 
   const handleStopPropagation = (e: any) => {
-    if (!e.target?.classList?.contains(`${prefixCls}__actions-icon`) && file?.status === STATUS_SUCCESS) {
+    const targetNode = document.getElementsByClassName(`${prefixCls}__actions-container`)[0];
+    if (targetNode !== e.target && !targetNode.contains(e.target) && file?.status === STATUS_SUCCESS) {
       e.stopPropagation();
     }
   };
@@ -31,14 +31,10 @@ const Actions: React.FC<IActionsProps> = ({
     onRemove?.();
   };
 
-  const handleUpload = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onUpload?.();
-  };
   return (
     <span className={cls} onClick={handleStopPropagation} aria-hidden="true">
       <span className={iconContainerCls}>
-        {useUpload && <UploadOutlined className={iconCls} onClick={handleUpload} />}
+        {useUpload && <UploadOutlined className={iconCls} />}
         {useDelete && <DeleteOutlined className={iconCls} onClick={handleRemove} />}
       </span>
     </span>
diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index 56d87e4b10..8bacf0f50c 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -144,10 +144,6 @@ const Upload: React.FC<IUploadProps> = ({
       }
     });
   };
-  const handleUpload = () => {
-    const { current } = rcUploadRef;
-    current?.uploader?.onClick();
-  };
 
   const handleInputUpload = async (uploadType: TInputUploadType = 'url', url: string) => {
     const uploadFile = {
@@ -221,7 +217,6 @@ const Upload: React.FC<IUploadProps> = ({
     inputUploadType,
     setFile,
     onRemove: handleRemove,
-    onUpload: handleUpload,
     onInputUpload: handleInputUpload,
     placeholderImg,
   };
diff --git a/packages/components/src/components/upload/interface.ts b/packages/components/src/components/upload/interface.ts
index 0166bfba92..f960c7efdf 100644
--- a/packages/components/src/components/upload/interface.ts
+++ b/packages/components/src/components/upload/interface.ts
@@ -125,7 +125,6 @@ export interface ITriggerProps {
   setFile: (file: IUploadFile) => void;
   file: IUploadFile;
   onRemove: () => void;
-  onUpload: () => void;
   onInputUpload: (type: TInputUploadType, url: string) => void;
   inputUploadType: TInputUploadType;
   accept: string | undefined;
@@ -147,7 +146,6 @@ export interface IPreviewProps {
 export interface IActionsProps {
   file: IUploadFile;
   onRemove: () => void;
-  onUpload?: () => void;
   useUpload?: boolean;
   useDelete?: boolean;
   placement?: 'center' | 'rightTop';
diff --git a/packages/components/src/components/upload/triggers/AvatarTrigger.tsx b/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
index a1713df355..2132a6bf14 100644
--- a/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
+++ b/packages/components/src/components/upload/triggers/AvatarTrigger.tsx
@@ -10,7 +10,6 @@ const AvatarTrigger: React.FC<ITriggerProps> = ({
   triggerProps,
   file,
   onRemove,
-  onUpload,
   children,
   placeholderImg = '',
 }: ITriggerProps) => {
@@ -23,13 +22,7 @@ const AvatarTrigger: React.FC<ITriggerProps> = ({
         <Avatar src={file?.dataUrl ?? placeholderImg} size="huge">
           {children as string}
         </Avatar>
-        <Actions
-          file={file}
-          useUpload
-          useDelete={file?.status === STATUS_SUCCESS}
-          onRemove={onRemove}
-          onUpload={onUpload}
-        />
+        <Actions file={file} useUpload useDelete={file?.status === STATUS_SUCCESS} onRemove={onRemove} />
       </span>
     </Loading>
   );
diff --git a/packages/components/src/components/upload/triggers/CardTrigger.tsx b/packages/components/src/components/upload/triggers/CardTrigger.tsx
index 0b0c6a1b59..067aac9a5a 100644
--- a/packages/components/src/components/upload/triggers/CardTrigger.tsx
+++ b/packages/components/src/components/upload/triggers/CardTrigger.tsx
@@ -7,13 +7,7 @@ import { UploadPrefixClsContext } from '../UploadContext';
 import Preview from '../Preview';
 import Actions from '../Actions';
 
-const CardTrigger: React.FC<ITriggerProps> = ({
-  triggerProps,
-  file,
-  onRemove,
-  onUpload,
-  placeholderImg,
-}: ITriggerProps) => {
+const CardTrigger: React.FC<ITriggerProps> = ({ triggerProps, file, onRemove, placeholderImg }: ITriggerProps) => {
   const prefixCls = useContext(UploadPrefixClsContext);
   const cls = classnames(triggerProps?.className, `${prefixCls}__card`);
 
@@ -31,7 +25,7 @@ const CardTrigger: React.FC<ITriggerProps> = ({
         {file?.status === STATUS_SUCCESS && (
           <>
             <Preview file={file} size={80} />
-            <Actions file={file} onRemove={onRemove} useUpload onUpload={onUpload} />
+            <Actions file={file} onRemove={onRemove} useUpload />
           </>
         )}
         {file?.status !== STATUS_SUCCESS && <PlusOutlined className={`${prefixCls}__plus-icon`} />}

From 7acc89a78d2d933b5f3b3b7941e4af27c7ea49c6 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Mon, 7 Dec 2020 18:58:56 +0800
Subject: [PATCH 09/15] test(upload): modify upload test

affects: @gio-design/components
---
 .../src/components/upload/__tests__/actions.test.js        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/upload/__tests__/actions.test.js b/packages/components/src/components/upload/__tests__/actions.test.js
index 4f29a697fd..45870ade49 100644
--- a/packages/components/src/components/upload/__tests__/actions.test.js
+++ b/packages/components/src/components/upload/__tests__/actions.test.js
@@ -40,9 +40,14 @@ describe('Testing Actions Events', () => {
     expect(onRemove).toBeCalled();
   });
   it('should stop default events', () => {
+    global.document.getElementsByClassName = () => [
+      {
+        contains: () => false,
+      },
+    ];
     const onRemove = jest.fn();
     const handleStopPropagation = jest.fn();
-    test.status = 'success';
+    testFile.status = 'success';
     const wrapper = mount(<Actions file={testFile} onRemove={onRemove} />);
     wrapper.find('.gio-upload__actions').simulate('click');
     // expect(handleStopPropagation).toBeCalled();

From c5c60325e50b3e7628322904b1d5053baa65145b Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Tue, 8 Dec 2020 11:50:51 +0800
Subject: [PATCH 10/15] fix(upload): fix the problem that upload cannot trigger

affects: @gio-design/components
---
 packages/components/src/components/upload/Actions.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/upload/Actions.tsx b/packages/components/src/components/upload/Actions.tsx
index c7b96b576b..99536174e1 100644
--- a/packages/components/src/components/upload/Actions.tsx
+++ b/packages/components/src/components/upload/Actions.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import classnames from 'classnames';
 import { DeleteOutlined, UploadOutlined } from '@gio-design/icons';
 import { UploadPrefixClsContext } from './UploadContext';
@@ -11,6 +11,7 @@ const Actions: React.FC<IActionsProps> = ({
   onRemove,
   placement = 'center',
 }: IActionsProps) => {
+  const spanRef = useRef<HTMLSpanElement>(null);;
   const prefixCls = useContext(UploadPrefixClsContext);
   const cls = classnames(`${prefixCls}__actions`, {
     [`${prefixCls}__actions--center`]: placement === 'center',
@@ -20,8 +21,8 @@ const Actions: React.FC<IActionsProps> = ({
   const iconCls = classnames(`${prefixCls}__actions-icon`);
 
   const handleStopPropagation = (e: any) => {
-    const targetNode = document.getElementsByClassName(`${prefixCls}__actions-container`)[0];
-    if (targetNode !== e.target && !targetNode.contains(e.target) && file?.status === STATUS_SUCCESS) {
+    const targetNode = spanRef.current?.childNodes[0];
+    if (!targetNode.contains(e.target) && file?.status === STATUS_SUCCESS) {
       e.stopPropagation();
     }
   };
@@ -33,7 +34,7 @@ const Actions: React.FC<IActionsProps> = ({
 
   return (
     <span className={cls} onClick={handleStopPropagation} aria-hidden="true">
-      <span className={iconContainerCls}>
+      <span className={iconContainerCls} ref={spanRef}>
         {useUpload && <UploadOutlined className={iconCls} />}
         {useDelete && <DeleteOutlined className={iconCls} onClick={handleRemove} />}
       </span>

From 02f9daf4b5b0d8079a062ccf3e17c031802b9cac Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Tue, 8 Dec 2020 12:35:12 +0800
Subject: [PATCH 11/15] fix(upload): remove semicolon

affects: @gio-design/components
---
 packages/components/src/components/upload/Actions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/upload/Actions.tsx b/packages/components/src/components/upload/Actions.tsx
index 99536174e1..f0f6ebccfe 100644
--- a/packages/components/src/components/upload/Actions.tsx
+++ b/packages/components/src/components/upload/Actions.tsx
@@ -11,7 +11,7 @@ const Actions: React.FC<IActionsProps> = ({
   onRemove,
   placement = 'center',
 }: IActionsProps) => {
-  const spanRef = useRef<HTMLSpanElement>(null);;
+  const spanRef = useRef<HTMLSpanElement>(null);
   const prefixCls = useContext(UploadPrefixClsContext);
   const cls = classnames(`${prefixCls}__actions`, {
     [`${prefixCls}__actions--center`]: placement === 'center',
@@ -22,7 +22,7 @@ const Actions: React.FC<IActionsProps> = ({
 
   const handleStopPropagation = (e: any) => {
     const targetNode = spanRef.current?.childNodes[0];
-    if (!targetNode.contains(e.target) && file?.status === STATUS_SUCCESS) {
+    if (targetNode && !targetNode.contains(e.target) && file?.status === STATUS_SUCCESS) {
       e.stopPropagation();
     }
   };

From 80e950efbe9d0c7c82bb986c660b0cc26bce2068 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Fri, 11 Dec 2020 15:06:22 +0800
Subject: [PATCH 12/15] fix(upload): fix the problem that file do not render in
 non-standard way

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx   |  8 ++++++--
 .../upload/__tests__/__snapshots__/upload.test.js.snap | 10 ----------
 packages/components/src/components/upload/utils.ts     |  2 +-
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index 6e5700364c..c87f62fd50 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import RcUpload from 'rc-upload';
 import classnames from 'classnames';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
@@ -55,6 +55,9 @@ const Upload: React.FC<IUploadProps> = ({
   ...restProps
 }: IUploadProps) => {
   const [file, setFile] = useState<IUploadFile>(getEmptyFileObj(uploadedFile));
+  useEffect(() => {
+    setFile(getEmptyFileObj(uploadedFile));
+  }, [uploadedFile]);
   const rcUploadRef = useRef(null);
   const prefixCls = usePrefixCls('upload', customPrefixCls);
 
@@ -64,7 +67,6 @@ const Upload: React.FC<IUploadProps> = ({
     [`${prefixCls}--success`]: file?.status === STATUS_SUCCESS && !successBorder,
     [`${prefixCls}--success-border`]: file?.status === STATUS_SUCCESS && successBorder,
   });
-
   const Trigger = triggerMap[type];
 
   const handleBeforeUpload = (fileBeforeUpload: IRcFile, fileList: IRcFile[]) =>
@@ -130,6 +132,8 @@ const Upload: React.FC<IUploadProps> = ({
       if (res === false) {
         return;
       }
+      console.log(uploadedFile);
+      console.log(file);
       if (file?.dataUrl === uploadedFile?.dataUrl) {
         setFile({
           uid: '',
diff --git a/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap b/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap
index 63bef11374..356ea6cea5 100644
--- a/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap
+++ b/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap
@@ -9,7 +9,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 1`] = `
     role="button"
   >
     <input
-      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -19,7 +18,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 1`] = `
         }
       }
       type="file"
-      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -73,7 +71,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 2`] = `
     role="button"
   >
     <input
-      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -83,7 +80,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 2`] = `
         }
       }
       type="file"
-      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -137,7 +133,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 3`] = `
     role="button"
   >
     <input
-      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -147,7 +142,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 3`] = `
         }
       }
       type="file"
-      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -201,7 +195,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 4`] = `
     role="button"
   >
     <input
-      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -211,7 +204,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 4`] = `
         }
       }
       type="file"
-      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -265,7 +257,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 5`] = `
     role="button"
   >
     <input
-      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -275,7 +266,6 @@ exports[`Testing Upload mount match snapshot should match snapshot 5`] = `
         }
       }
       type="file"
-      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
diff --git a/packages/components/src/components/upload/utils.ts b/packages/components/src/components/upload/utils.ts
index 9bbec5d259..6a299d8c43 100644
--- a/packages/components/src/components/upload/utils.ts
+++ b/packages/components/src/components/upload/utils.ts
@@ -20,7 +20,7 @@ export const getEmptyFileObj = (file?: IUploadFile): IUploadFile => ({
   size: file?.size ?? 0,
   name: file?.name ?? '本地上传',
   type: file?.type ?? '$empty-file',
-  status: file?.dataUrl ? STATUS_SUCCESS : STATUS_NOT_YET,
+  status: file?.dataUrl && file?.status === STATUS_SUCCESS ? STATUS_SUCCESS : STATUS_NOT_YET,
   dataUrl: file?.dataUrl ?? '',
 });
 

From cb6d0eed7578f7a8303c84f0c3ee4fd99125c096 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Fri, 11 Dec 2020 15:20:50 +0800
Subject: [PATCH 13/15] style(upload): remove log

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index c87f62fd50..be8938427d 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -132,8 +132,6 @@ const Upload: React.FC<IUploadProps> = ({
       if (res === false) {
         return;
       }
-      console.log(uploadedFile);
-      console.log(file);
       if (file?.dataUrl === uploadedFile?.dataUrl) {
         setFile({
           uid: '',

From 30ce0d10eb4993b0c645380f14bbcaf57665eb68 Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Fri, 11 Dec 2020 15:30:48 +0800
Subject: [PATCH 14/15] style(upload): format

affects: @gio-design/components
---
 packages/components/src/components/upload/Upload.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/upload/Upload.tsx b/packages/components/src/components/upload/Upload.tsx
index be8938427d..ebd8c9835d 100644
--- a/packages/components/src/components/upload/Upload.tsx
+++ b/packages/components/src/components/upload/Upload.tsx
@@ -58,6 +58,7 @@ const Upload: React.FC<IUploadProps> = ({
   useEffect(() => {
     setFile(getEmptyFileObj(uploadedFile));
   }, [uploadedFile]);
+  
   const rcUploadRef = useRef(null);
   const prefixCls = usePrefixCls('upload', customPrefixCls);
 

From e8b9876cd5d897756358c3903e589d6970dda1fe Mon Sep 17 00:00:00 2001
From: huqiyao <huqiyao@growingio.com>
Date: Tue, 15 Dec 2020 14:17:11 +0800
Subject: [PATCH 15/15] test(upload): update snapshot

affects: @gio-design/components
---
 .../upload/__tests__/__snapshots__/upload.test.js.snap | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap b/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap
index 356ea6cea5..63bef11374 100644
--- a/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap
+++ b/packages/components/src/components/upload/__tests__/__snapshots__/upload.test.js.snap
@@ -9,6 +9,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 1`] = `
     role="button"
   >
     <input
+      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -18,6 +19,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 1`] = `
         }
       }
       type="file"
+      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -71,6 +73,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 2`] = `
     role="button"
   >
     <input
+      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -80,6 +83,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 2`] = `
         }
       }
       type="file"
+      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -133,6 +137,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 3`] = `
     role="button"
   >
     <input
+      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -142,6 +147,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 3`] = `
         }
       }
       type="file"
+      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -195,6 +201,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 4`] = `
     role="button"
   >
     <input
+      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -204,6 +211,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 4`] = `
         }
       }
       type="file"
+      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"
@@ -257,6 +265,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 5`] = `
     role="button"
   >
     <input
+      directory={null}
       multiple={false}
       onChange={[Function]}
       onClick={[Function]}
@@ -266,6 +275,7 @@ exports[`Testing Upload mount match snapshot should match snapshot 5`] = `
         }
       }
       type="file"
+      webkitdirectory={null}
     />
     <button
       className="gio-btn gio-upload__btn gio-btn-primary gio-btn-large"