From b8ba892434fd66afc11bdeae2bace1132789f0f4 Mon Sep 17 00:00:00 2001
From: kev1nzh <kev1nzh@app-ark.com>
Date: Tue, 28 Sep 2021 12:16:37 +0800
Subject: [PATCH] fix(upload): fix `show-preview-button` not working (#1238)

---
 CHANGELOG.en-US.md            | 1 +
 CHANGELOG.zh-CN.md            | 1 +
 src/upload/src/Upload.tsx     | 4 ++--
 src/upload/src/UploadFile.tsx | 8 ++++----
 src/upload/src/interface.ts   | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 7dbc862fe3a..c61c181dbbb 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -7,6 +7,7 @@
 - Fix `n-data-table` ellipsis not show when last column not set ellipsis, closes [#934](https://github.com/TuSimple/naive-ui/issues/934).
 - Fix `n-grid-item` won't work with responsive config.
 - Fix `n-tabs`'s scroll shadow is not updated when it's resized, closes [#1224](https://github.com/TuSimple/naive-ui/issues/1224).
+- Fix `n-upload`'s `show-preview-button` prop not working，closes [#1238](https://github.com/TuSimple/naive-ui/issues/1238)
 
 ### Feats
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index e20e1dc7335..9aa46573e2c 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -7,6 +7,7 @@
 - 修复 `n-data-table` 当最后一列未设置 `ellipsis` 时省略失效，关闭 [#934](https://github.com/TuSimple/naive-ui/issues/934)
 - 修复 `n-grid-item` 响应式不生效
 - 修复 `n-tabs` 在尺寸改变后没有更新滚动阴影状态，关闭 [#1224](https://github.com/TuSimple/naive-ui/issues/1224)
+- 修复 `n-upload` 的 `show-preview-button` 属性失效，关闭 [#1238](https://github.com/TuSimple/naive-ui/issues/1238)
 
 ### Feats
 
diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx
index 0495b4a9342..e94422769c2 100644
--- a/src/upload/src/Upload.tsx
+++ b/src/upload/src/Upload.tsx
@@ -247,7 +247,7 @@ const uploadProps = {
     type: Boolean,
     default: true
   },
-  showPreivewButton: {
+  showPreviewButton: {
     type: Boolean,
     default: true
   },
@@ -492,7 +492,7 @@ export default defineComponent({
       XhrMap,
       submit,
       doChange,
-      showPreivewButtonRef: toRef(props, 'showPreivewButton'),
+      showPreviewButtonRef: toRef(props, 'showPreviewButton'),
       onPreviewRef: toRef(props, 'onPreview'),
       getFileThumbnailUrl,
       listTypeRef: toRef(props, 'listType'),
diff --git a/src/upload/src/UploadFile.tsx b/src/upload/src/UploadFile.tsx
index fdd7bd39a3f..002090d701a 100644
--- a/src/upload/src/UploadFile.tsx
+++ b/src/upload/src/UploadFile.tsx
@@ -84,8 +84,8 @@ export default defineComponent({
       const { file } = props
       return ['error'].includes(file.status)
     })
-    const showPreivewButtonRef = computed(() => {
-      if (!NUpload.showPreivewButtonRef.value) return false
+    const showPreviewButtonRef = computed(() => {
+      if (!NUpload.showPreviewButtonRef.value) return false
       const {
         file: { status, url },
         listType
@@ -194,7 +194,7 @@ export default defineComponent({
       showRemoveButton: showRemoveButtonRef,
       showDownloadButton: showDownloadButtonRef,
       showRetryButton: showRetryButtonRef,
-      showPreivewButton: showPreivewButtonRef,
+      showPreviewButton: showPreviewButtonRef,
       thumbnailUrl: thumbnailUrlRef,
       imageRef,
       handleRemoveOrCancelClick,
@@ -303,7 +303,7 @@ export default defineComponent({
               `${clsPrefix}-upload-file-info__action--${listType}-type`
             ]}
           >
-            {this.showPreivewButton ? (
+            {this.showPreviewButton ? (
               <NButton
                 key="preview"
                 text
diff --git a/src/upload/src/interface.ts b/src/upload/src/interface.ts
index b89d698f6e3..d7261a95f26 100644
--- a/src/upload/src/interface.ts
+++ b/src/upload/src/interface.ts
@@ -66,7 +66,7 @@ export interface UploadInjection {
   onDownloadRef: Ref<OnDownload | undefined>
   XhrMap: Map<string, XMLHttpRequest>
   doChange: DoChange
-  showPreivewButtonRef: Ref<boolean>
+  showPreviewButtonRef: Ref<boolean>
   onPreviewRef: Ref<OnPreview | undefined>
   listTypeRef: Ref<listType>
   dragOverRef: Ref<boolean>