Jelajahi Sumber

Fix incorrect title (tooltip) message on file preview by refactoring

Fixes #1033
Artur Paikin 6 tahun lalu
induk
melakukan
26842c9aa4

+ 23 - 13
packages/@uppy/dashboard/src/components/FileItem.js

@@ -9,7 +9,7 @@ const { iconCopy, iconRetry } = require('./icons')
 const classNames = require('classnames')
 const classNames = require('classnames')
 const { h } = require('preact')
 const { h } = require('preact')
 
 
-const FileItemProgressWrapper = (props) => {
+function FileItemProgressWrapper (props) {
   if (props.hideRetryButton && props.error) {
   if (props.hideRetryButton && props.error) {
     return
     return
   }
   }
@@ -58,7 +58,7 @@ module.exports = function fileItem (props) {
   const fileName = getFileNameAndExtension(file.meta.name).name
   const fileName = getFileNameAndExtension(file.meta.name).name
   const truncatedFileName = props.isWide ? truncateString(fileName, 30) : fileName
   const truncatedFileName = props.isWide ? truncateString(fileName, 30) : fileName
 
 
-  const onPauseResumeCancelRetry = (ev) => {
+  function onPauseResumeCancelRetry (ev) {
     if (isUploaded) return
     if (isUploaded) return
 
 
     if (error && !props.hideRetryButton) {
     if (error && !props.hideRetryButton) {
@@ -77,6 +77,26 @@ module.exports = function fileItem (props) {
     }
     }
   }
   }
 
 
+  function progressIndicatorTitle (props) {
+    if (isUploaded) {
+      return props.i18n('uploadComplete')
+    }
+
+    if (error) {
+      return props.i18n('retryUpload')
+    }
+
+    if (props.resumableUploads) {
+      if (file.isPaused) {
+        return props.i18n('resumeUpload')
+      }
+      return props.i18n('pauseUpload')
+    } else {
+      console.log('ЗДЕСЬ Я')
+      return props.i18n('cancelUpload')
+    }
+  }
+
   const dashboardItemClass = classNames(
   const dashboardItemClass = classNames(
     'uppy-DashboardItem',
     'uppy-DashboardItem',
     { 'is-inprogress': uploadInProgress },
     { 'is-inprogress': uploadInProgress },
@@ -88,16 +108,6 @@ module.exports = function fileItem (props) {
     { 'is-bundled': props.bundledUpload }
     { 'is-bundled': props.bundledUpload }
   )
   )
 
 
-  const progressIndicatorTitle = isUploaded
-    ? props.i18n('uploadComplete')
-    : props.resumableUploads
-      ? file.isPaused
-        ? props.i18n('resumeUpload')
-        : props.i18n('pauseUpload')
-      : error
-        ? props.i18n('retryUpload')
-        : props.i18n('cancelUpload')
-
   return <li class={dashboardItemClass} id={`uppy_${file.id}`} title={file.meta.name}>
   return <li class={dashboardItemClass} id={`uppy_${file.id}`} title={file.meta.name}>
     <div class="uppy-DashboardItem-preview">
     <div class="uppy-DashboardItem-preview">
       <div class="uppy-DashboardItem-previewInnerWrap" style={{ backgroundColor: getFileTypeIcon(file.type).color }}>
       <div class="uppy-DashboardItem-previewInnerWrap" style={{ backgroundColor: getFileTypeIcon(file.type).color }}>
@@ -109,7 +119,7 @@ module.exports = function fileItem (props) {
       </div>
       </div>
       <div class="uppy-DashboardItem-progress">
       <div class="uppy-DashboardItem-progress">
         <FileItemProgressWrapper
         <FileItemProgressWrapper
-          progressIndicatorTitle={progressIndicatorTitle}
+          progressIndicatorTitle={progressIndicatorTitle(props)}
           onPauseResumeCancelRetry={onPauseResumeCancelRetry}
           onPauseResumeCancelRetry={onPauseResumeCancelRetry}
           file={file}
           file={file}
           error={error}
           error={error}

+ 1 - 0
packages/@uppy/dashboard/src/index.js

@@ -79,6 +79,7 @@ module.exports = class Dashboard extends Plugin {
         resumeUpload: 'Resume upload',
         resumeUpload: 'Resume upload',
         pauseUpload: 'Pause upload',
         pauseUpload: 'Pause upload',
         retryUpload: 'Retry upload',
         retryUpload: 'Retry upload',
+        cancelUpload: 'Cancel upload',
         xFilesSelected: {
         xFilesSelected: {
           0: '%{smart_count} file selected',
           0: '%{smart_count} file selected',
           1: '%{smart_count} files selected'
           1: '%{smart_count} files selected'