feat(upload): add show-file-list prop

* docs(upload): add `show-file-list` docs (#507)

* feat(upload):  add `show-file-list` props

* docs(upload):  update CHANGELOG  (#507)

* feat(upload):  add `show-file-list` props tests (#507)

* docs(upload): fix CHANGELOG  (#507)

Co-authored-by: kev1nzh <kev1nzh@app-ark.com>
Co-authored-by: kev1nzh_ark <kevin@app-ark.com>

CHANGELOG.en-US.md

@@ -4,6 +4,7 @@
 
 ### Feats
 
+- `n-upload` add `show-file-list` prop.
 - `n-checkbox-group` add `min` and `max` prop.
 
 ## 2.15.5 (2021-07-16)

CHANGELOG.zh-CN.md

@@ -4,6 +4,7 @@
 
 ### Feats
 
+- `n-upload` 新增 `show-file-list` 属性
 - `n-checkbox-group` 新增 `min` 和 `max` 属性.
 
 ## 2.15.5 (2021-07-16)

src/upload/demos/enUS/index.demo-entry.md

@@ -35,6 +35,7 @@ before-upload
 | show-cancel-button | `boolean` | `true` | Whether to show remove button (at file pending, uploadin, error status). Click on cancel button will fire `on-remove` callback. |
 | show-remove-button | `boolean` | `true` | Whether to show remove button (at file finished status). Click on remove button will fire `on-remove` callback. |
 | show-retry-button | `boolean` | `true` | Whether to show retry button (at file error status). |
+| show-file-list | `boolean` | `true` | Whether to show file list. |
 | with-credentials | `boolean` | `false` | If cookie attached. |
 | on-change | `(options: { file: UploadFile, fileList: Array<UploadFile>, event?: Event }) => void` | `() => {}` | The callback of status change of the component. Any file status change would fire the callback. |
 | on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | Callback function triggered on fileList changes. |

src/upload/demos/zhCN/index.demo-entry.md

@@ -35,6 +35,7 @@ before-upload
 | show-cancel-button | `boolean` | `true` | 是否显示取消按钮（在 pending、uploading、error 的时候展示），点击取消按钮会触发 `on-remove` 回调 |
 | show-remove-button | `boolean` | `true` | 是否显示删除按钮（在 finished 的时候展示），点击删除按钮会触发 `on-remove` 回调 |
 | show-retry-button | `boolean` | `true` | 是否显示重新上传按钮（在 error 时展示） |
+| show-file-list | `boolean` | `true` | 是否显示文件列表 |
 | with-credentials | `boolean` | `false` | 是否携带 Cookie |
 | on-change | `(options: { file: UploadFile, fileList: Array<UploadFile>, event?: Event }) => void` | `() => {}` | 组件状态变化的回调，组件的任何文件状态变化都会触发回调 |
 | on-finish | `(options: { file: UploadFile, event: Event }) => UploadFile \| void` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFile 或者返回一个新的 UploadFile |

src/upload/src/Upload.tsx

@@ -194,6 +194,10 @@ const uploadProps = {
     default: 'POST'
   },
   multiple: Boolean,
+  showFileList: {
+    type: Boolean,
+    default: true
+  },
   data: [Object, Function] as PropType<FuncOrRecordOrUndef>,
   headers: [Object, Function] as PropType<FuncOrRecordOrUndef>,
   withCredentials: Boolean,
@@ -515,23 +519,25 @@ export default defineComponent({
         >
           {this.$slots}
         </div>
-        <div
-          class={`${mergedClsPrefix}-upload-file-list`}
-          style={this.fileListStyle}
-        >
-          <NFadeInExpandTransition group>
-            {{
-              default: () =>
-                this.mergedFileList.map((file) => (
-                  <NUploadFile
-                    clsPrefix={mergedClsPrefix}
-                    key={file.id}
-                    file={file}
-                  />
-                ))
-            }}
-          </NFadeInExpandTransition>
-        </div>
+        {this.showFileList && (
+          <div
+            class={`${mergedClsPrefix}-upload-file-list`}
+            style={this.fileListStyle}
+          >
+            <NFadeInExpandTransition group>
+              {{
+                default: () =>
+                  this.mergedFileList.map((file) => (
+                    <NUploadFile
+                      clsPrefix={mergedClsPrefix}
+                      key={file.id}
+                      file={file}
+                    />
+                  ))
+              }}
+            </NFadeInExpandTransition>
+          </div>
+        )}
       </div>
     )
   }

src/upload/tests/Upload.spec.ts

@@ -5,4 +5,22 @@ describe('n-upload', () => {
   it('should work with import on demand', () => {
     mount(NUpload)
   })
+
+  it('should work with `show-file-list` prop', async () => {
+    const wrapper = mount(NUpload)
+
+    await wrapper.setProps({ showFileList: true })
+    expect(wrapper.find('.n-upload-file-list').exists()).toBe(true)
+
+    await wrapper.setProps({ showFileList: false })
+    expect(wrapper.find('.n-upload-file-list').exists()).not.toBe(true)
+  })
+
+  it('should work with `disabled` prop', async () => {
+    const wrapper = mount(NUpload)
+    expect(wrapper.find('.n-upload--disabled').exists()).not.toBe(true)
+
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.find('.n-upload').classes()).toContain('n-upload--disabled')
+  })
 })