feat(upload): add max prop and fix disabled's style (tusen-ai#1237)

kev1nzh37 · Oct 14, 2021 · 9006a48 · 9006a48
1 parent b377d4b
commit 9006a48
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 16 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,6 +7,11 @@
 - Fix `n-ellipisis`'s `expand-trigger` prop not show `pointer` cursor when content is short，closes [#1299](https://github.com/TuSimple/naive-ui/issues/1299).
 - Fix `n-select`'s `fallback-option` prop's type, closes [#1327](https://github.com/TuSimple/naive-ui/issues/1327).
 - Fix `n-modal`'s `on-after-enter` prop not working.
+- Fix `n-upload`'s `disabled` prop's style not working, closes [#1237](https://github.com/TuSimple/naive-ui/issues/1237).
+
+### Feats
+
+- `n-upload` add `max` prop.
 
 ## 2.19.6 (2021-10-10)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -7,6 +7,11 @@
 - 修复 `n-ellipisis` 的 `expand-trigger` 属性在内容不显示提示的时候禁用鼠标样式的问题，关闭 [#1299](https://github.com/TuSimple/naive-ui/issues/1299)
 - 修复 `n-select` `fallback-option` 属性类型，关闭 [#1327](https://github.com/TuSimple/naive-ui/issues/1327)
 - 修复 `n-modal` `on-after-enter` 不生效
+- 修复 `n-upload` 的 `disabled` 属性的样式问题，关闭 [#1237](https://github.com/TuSimple/naive-ui/issues/1237)
+
+### Feats
+
+- `n-upload` 新增 `max` 属性
 
 ## 2.19.6 (2021-10-10)
 

diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md
@@ -35,6 +35,7 @@ abstract
 | file-list | `Array<UploadFileInfo>` | `undefined` | The file list of component. If set, the component will work in controlled manner. |
 | headers | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | The additional HTTP Headers of request. |
 | list-type | `string` | `'text'` | Built-in styles for file lists, `text`, `image` and `image-card`. |
+| max | `number` | `undefined` | Limit the number of uploaded files. |
 | method | `string` | `'POST'` | The method of HTTP request. |
 | multiple | `boolean` | `false` | If multiple files selection supported. |
 | name | `string` | `'file'` | The field name of file in form data. |

diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md
@@ -35,6 +35,7 @@ abstract
 | file-list | `Array<UploadFileInfo>` | `undefined` | 文件列表，如果传入组件会处于受控状态 |
 | headers | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | HTTP 请求需要附加的 Headers |
 | list-type | `string` | `'text'` | 文件列表的内建样式，`text`、`image` 和 `image-card` |
+| max | `number` | `undefined` | 限制上传文件数量 |
 | method | `string` | `'POST'` | HTTP 请求的方法 |
 | multiple | `boolean` | `false` | 是否支持多个文件 |
 | name | `string` | `'file'` | 文件在提交表单中的字段名 |

diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx
@@ -257,7 +257,8 @@ const uploadProps = {
   },
   onPreview: Function as PropType<OnPreview>,
   createThumbnailUrl: Function as PropType<CreateThumbnailUrl>,
-  abstract: Boolean
+  abstract: Boolean,
+  max: Number
 } as const
 
 export type UploadProps = ExtractPublicPropTypes<typeof uploadProps>
@@ -282,7 +283,11 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const formItem = useFormItem(props)
-    const { mergedDisabledRef } = formItem
+    const mergedDisabledRef = computed(() => {
+      const { max } = props
+      if (max !== undefined) return mergedFileListRef.value.length >= max
+      return formItem.mergedDisabledRef.value
+    })
     const uncontrolledFileListRef = ref(props.defaultFileList)
     const controlledFileListRef = toRef(props, 'fileList')
     const inputElRef = ref<HTMLInputElement | null>(null)
@@ -500,7 +505,6 @@ export default defineComponent({
       openFileDialog,
       draggerInsideRef,
       handleFileAddition,
-      mergedDisabledRef,
       fileListStyleRef: toRef(props, 'fileListStyle'),
       abstractRef: toRef(props, 'abstract'),
       cssVarsRef

diff --git a/src/upload/src/UploadDragger.tsx b/src/upload/src/UploadDragger.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
     return () => {
       const {
         mergedClsPrefixRef: { value: mergedClsPrefix },
-        mergedDisabledRef: { value: mergedDisabled }
+        disabledRef: { value: mergedDisabled }
       } = NUpload
       return (
         <div

diff --git a/src/upload/src/UploadFileList.tsx b/src/upload/src/UploadFileList.tsx
@@ -22,8 +22,7 @@ export default defineComponent({
       listTypeRef,
       mergedFileListRef,
       fileListStyleRef,
-      cssVarsRef,
-      mergedDisabledRef
+      cssVarsRef
     } = NUpload
 
     const isImageCardTypeRef = computed(
@@ -57,15 +56,15 @@ export default defineComponent({
         <div
           class={[
             `${mergedClsPrefix}-upload-file-list`,
-            mergedDisabledRef.value &&
-              `${mergedClsPrefix}-upload-file-list--disabled`,
             isImageCardTypeRef.value &&
               `${mergedClsPrefix}-upload-file-list--grid`
           ]}
           style={[cssVarsRef.value, fileListStyleRef.value as CSSProperties]}
         >
           {renderUploadFileList()}
-          {isImageCardTypeRef.value && <NUploadTrigger>{slots}</NUploadTrigger>}
+          {isImageCardTypeRef.value && slots.default && (
+            <NUploadTrigger>{slots}</NUploadTrigger>
+          )}
         </div>
       )
     }

diff --git a/src/upload/src/UploadTrigger.tsx b/src/upload/src/UploadTrigger.tsx
@@ -19,7 +19,6 @@ export default defineComponent({
 
     const {
       mergedClsPrefixRef,
-      mergedDisabledRef,
       listTypeRef,
       disabledRef,
       dragOverRef,
@@ -73,7 +72,8 @@ export default defineComponent({
         <div
           class={[
             `${mergedClsPrefix}-upload-trigger`,
-            mergedDisabledRef.value &&
+            disabledRef.value &&
+              !isImageCardTypeRef.value &&
               `${mergedClsPrefix}-upload-trigger--disabled`,
             isImageCardTypeRef.value &&
               `${mergedClsPrefix}-upload-trigger--image-card`

diff --git a/src/upload/src/interface.ts b/src/upload/src/interface.ts
@@ -72,7 +72,6 @@ export interface UploadInjection {
   dragOverRef: Ref<boolean>
   draggerInsideRef: { value: boolean }
   fileListStyleRef: Ref<string | CSSProperties | undefined>
-  mergedDisabledRef: Ref<boolean>
   abstractRef: Ref<boolean>
   cssVarsRef: Ref<CSSProperties>
   submit: (fileId?: string) => void

diff --git a/src/upload/tests/Upload.spec.ts b/src/upload/tests/Upload.spec.ts
@@ -31,10 +31,7 @@ describe('n-upload', () => {
 
   it('should work with `disabled` prop', async () => {
     const wrapper = mount(NUpload)
-    const disabledClasses = [
-      'n-upload-trigger--disabled',
-      'n-upload-file-list--disabled'
-    ]
+    const disabledClasses = ['n-upload-trigger--disabled']
     for (const disabledClass of disabledClasses) {
       expect(wrapper.find(disabledClass).exists()).not.toBe(true)
     }