fix(upload): operation buttons displayed when has file-list & disabled props (#669)

* fix(upload): operation buttons displayed when has file-list & disabled props

* style(upload): cursor

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -14,6 +14,7 @@
 - Fix `n-message`'s `destroyAll` method doesn't work.
 - Fix `n-timeline`'s header slot is invalid when using alone.
 - Fix `n-select` incorrect style when props has `disabled` and `filterable`, closes [#698](https://github.com/TuSimple/naive-ui/issues/698).
+- Fix `n-upload` operation buttons displayed when has `file-list` & `disabled` props, closes [#668](https://github.com/TuSimple/naive-ui/issues/668).
 
 ## 2.15.9 (2021-07-28)
 

CHANGELOG.zh-CN.md

@@ -14,6 +14,7 @@
 - 修复 `n-message` 的 `destroyAll` 方法不生效
 - 修复 `n-timeline` 的 header slot 单独使用无效的问题
 - 修复 `n-select` 当属性是 `disabled` 和 `filterable` 时样式错误, 关闭 [#698](https://github.com/TuSimple/naive-ui/issues/698)
+- 修复 `n-upload` 拥有 `file-list` & `disabled` 属性时操作按钮仍然显示，关闭 [#668](https://github.com/TuSimple/naive-ui/issues/668)
 
 ## 2.15.9 (2021-07-28)
 

src/upload/src/Upload.tsx

@@ -415,6 +415,7 @@ export default defineComponent({
     provide(uploadInjectionKey, {
       mergedClsPrefixRef,
       mergedThemeRef: themeRef,
+      disabledRef: toRef(props, 'disabled'),
       showCancelButtonRef: toRef(props, 'showCancelButton'),
       showDownloadButtonRef: toRef(props, 'showDownloadButton'),
       showRemoveButtonRef: toRef(props, 'showRemoveButton'),

src/upload/src/UploadFile.tsx

@@ -126,6 +126,7 @@ export default defineComponent({
       progressStatus: progressStatusRef,
       buttonType: buttonTypeRef,
       showProgress: showProgressRef,
+      disabled: NUpload.disabledRef,
       showCancelButton: showCancelButtonRef,
       showRemoveButton: showRemoveButtonRef,
       showDownloadButton: showDownloadButtonRef,
@@ -156,7 +157,8 @@ export default defineComponent({
             {this.file.name}
           </div>
           <div class={`${clsPrefix}-upload-file-info__action`}>
-            {this.showRemoveButton || this.showCancelButton ? (
+            {(this.showRemoveButton || this.showCancelButton) &&
+            !this.disabled ? (
               <NButton
                 key="cancelOrTrash"
                 theme={mergedTheme.peers.Button}
@@ -184,8 +186,8 @@ export default defineComponent({
                   )
                 }}
               </NButton>
-            ) : null}
-            {this.showRetryButton ? (
+                ) : null}
+            {this.showRetryButton && !this.disabled ? (
               <NButton
                 key="retry"
                 text

src/upload/src/interface.ts

@@ -54,6 +54,7 @@ export type OnUpdateFileList = (fileList: FileInfo[]) => void
 export interface UploadInjection {
   mergedClsPrefixRef: Ref<string>
   mergedThemeRef: Ref<MergedTheme<UploadTheme>>
+  disabledRef: Ref<boolean>
   showCancelButtonRef: Ref<boolean>
   showRemoveButtonRef: Ref<boolean>
   showDownloadButtonRef: Ref<boolean>

src/upload/src/styles/index.cssr.ts

@@ -145,7 +145,7 @@ export default cB('upload', [
     cE('trigger', `
       cursor: not-allowed;
     `),
-    cB('upload-file-list', `
+    cB('upload-file', `
       cursor: not-allowed;
     `),
     cB('upload-dragger', `