feat(upload): fix upload-trigger and upload-file-list bug (tusen-…

…ai#1102)
kev1nzh37 · Sep 18, 2021 · 02a49b9 · 02a49b9
1 parent f8fe3b3
commit 02a49b9
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 217 deletions.
diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx
@@ -258,10 +258,7 @@ const uploadProps = {
   },
   onPreview: Function as PropType<OnPreview>,
   createThumbnailUrl: Function as PropType<CreateThumbnailUrl>,
-  abstract: {
-    type: Boolean,
-    default: false
-  }
+  abstract: Boolean
 } as const
 
 export type UploadProps = ExtractPublicPropTypes<typeof uploadProps>
@@ -551,12 +548,10 @@ export default defineComponent({
           multiple={this.multiple}
           onChange={this.handleFileInputChange}
         />
-        {this.listType !== 'image-card' ? (
+        {this.listType !== 'image-card' && (
           <NUploadTrigger>{this.$slots}</NUploadTrigger>
-        ) : null}
-        {this.showFileList ? (
-          <NUploadFileList>{this.$slots}</NUploadFileList>
-        ) : null}
+        )}
+        {this.showFileList && <NUploadFileList>{this.$slots}</NUploadFileList>}
       </div>
     )
   }

diff --git a/src/upload/src/UploadFileList.tsx b/src/upload/src/UploadFileList.tsx
@@ -1,10 +1,19 @@
-import { h, defineComponent, inject, VNode, CSSProperties } from 'vue'
+import {
+  h,
+  defineComponent,
+  inject,
+  VNode,
+  CSSProperties,
+  computed,
+  ComputedRef
+} from 'vue'
 import { throwError } from '../../_utils'
 import { uploadInjectionKey } from './interface'
 import NUploadFile from './UploadFile'
 import { NImageGroup } from '../../image'
 import { NFadeInExpandTransition } from '../../_internal'
 import NUploadTrigger from './UploadTrigger'
+
 export default defineComponent({
   name: 'UploadFileList',
   setup (_, { slots }) {
@@ -23,7 +32,9 @@ export default defineComponent({
       fileListStyle,
       cssVarsRef
     } = NUpload
-    const isImageCardType = listTypeRef.value === 'image-card'
+    const isImageCardTypeRef = computed(
+      () => listTypeRef.value === 'image-card'
+    )
 
     const createFileList = (): VNode[] =>
       mergedFileListRef.value.map((file) => (
@@ -35,27 +46,30 @@ export default defineComponent({
         />
       ))
 
-    const uploadFileList = isImageCardType ? (
-      <NImageGroup>{{ default: createFileList }}</NImageGroup>
-    ) : (
-      <NFadeInExpandTransition group>
-        {{
-          default: createFileList
-        }}
-      </NFadeInExpandTransition>
-    )
+    const createUploadFileList = (
+      isImageCardTypeRef: ComputedRef<boolean>
+    ): VNode =>
+      isImageCardTypeRef.value ? (
+        <NImageGroup>{{ default: createFileList }}</NImageGroup>
+      ) : (
+        <NFadeInExpandTransition group>
+          {{
+            default: createFileList
+          }}
+        </NFadeInExpandTransition>
+      )
 
     return () => (
       <div
         class={[
           `${mergedClsPrefixRef.value}-upload-file-list`,
-          isImageCardType &&
+          isImageCardTypeRef.value &&
             `${mergedClsPrefixRef.value}-upload-file-list--grid`
         ]}
         style={[cssVarsRef.value, fileListStyle as CSSProperties]}
       >
-        {uploadFileList}
-        {isImageCardType && <NUploadTrigger>{slots}</NUploadTrigger>}
+        {createUploadFileList(isImageCardTypeRef)}
+        {isImageCardTypeRef.value && <NUploadTrigger>{slots}</NUploadTrigger>}
       </div>
     )
   }

diff --git a/src/upload/src/UploadTrigger.tsx b/src/upload/src/UploadTrigger.tsx
@@ -1,22 +1,11 @@
-import { h, defineComponent, inject, computed, renderSlot } from 'vue'
-import { ExtractPublicPropTypes, throwError } from '../../_utils'
+import { h, defineComponent, inject, renderSlot, computed } from 'vue'
+import { throwError } from '../../_utils'
 import { uploadInjectionKey } from './interface'
 import NUploadDragger from './UploadDragger'
 
-const uploadTriggerProps = {
-  abstract: {
-    type: Boolean,
-    default: false
-  }
-} as const
-export type UploadTriggerProps = ExtractPublicPropTypes<
-  typeof uploadTriggerProps
->
-
 export default defineComponent({
   name: 'UploadTrigger',
-  props: uploadTriggerProps,
-  setup (props, { slots }) {
+  setup (_, { slots }) {
     const NUpload = inject(uploadInjectionKey, null)
     if (!NUpload) {
       throwError(
@@ -33,12 +22,11 @@ export default defineComponent({
       openFileDialog,
       draggerInsideRef,
       handleFileAddition,
-      abstractRef: parentAbstract
+      abstractRef
     } = NUpload
 
-    const isImageCardType = listTypeRef.value === 'image-card'
-    const mergedAbstractRef = computed(
-      () => parentAbstract.value && props.abstract
+    const isImageCardTypeRef = computed(
+      () => listTypeRef.value === 'image-card'
     )
 
     function handleTriggerClick (): void {
@@ -69,19 +57,19 @@ export default defineComponent({
     }
 
     return () =>
-      mergedAbstractRef.value ? (
+      abstractRef.value ? (
         renderSlot(slots, 'default', {
-          handleTriggerClick,
-          handleTriggerDrop,
-          handleTriggerDragOver,
-          handleTriggerDragEnter,
-          handleTriggerDragLeave
+          handleClick: handleTriggerClick,
+          handleDrop: handleTriggerDrop,
+          handleDragOver: handleTriggerDragOver,
+          handleDragEnter: handleTriggerDragEnter,
+          handleDragLeave: handleTriggerDragLeave
         })
       ) : (
         <div
           class={[
             `${mergedClsPrefixRef.value}-upload__trigger`,
-            isImageCardType &&
+            isImageCardTypeRef.value &&
               `${mergedClsPrefixRef.value}-upload__trigger--image-card`
           ]}
           onClick={handleTriggerClick}
@@ -90,7 +78,11 @@ export default defineComponent({
           onDragenter={handleTriggerDragEnter}
           onDragleave={handleTriggerDragLeave}
         >
-          {isImageCardType ? <NUploadDragger>{slots}</NUploadDragger> : slots}
+          {isImageCardTypeRef.value ? (
+            <NUploadDragger>{slots}</NUploadDragger>
+          ) : (
+            slots
+          )}
         </div>
       )
   }