tdesign-react 0.17.0 → 0.18.2

package/es/upload/style/index.css

@@ -18,58 +18,58 @@
 }
 :root,
 :root[theme-mode="light"] {
-  --td-brand-color-1: #ECF2FE;
-  --td-brand-color-2: #D4E3FC;
-  --td-brand-color-3: #BBD3FB;
-  --td-brand-color-4: #96BBF8;
-  --td-brand-color-5: #699EF5;
-  --td-brand-color-6: #4787F0;
-  --td-brand-color-7: #266FE8;
-  --td-brand-color-8: #0052D9;
-  --td-brand-color-9: #0034B5;
-  --td-brand-color-10: #001F97;
-  --td-warning-color-1: #FEF3E6;
-  --td-warning-color-2: #F9E0C7;
-  --td-warning-color-3: #F7C797;
-  --td-warning-color-4: #F2995F;
-  --td-warning-color-5: #ED7B2F;
-  --td-warning-color-6: #D35A21;
-  --td-warning-color-7: #BA431B;
-  --td-warning-color-8: #9E3610;
-  --td-warning-color-9: #842B0B;
-  --td-warning-color-10: #5A1907;
-  --td-error-color-1: #FDECEE;
-  --td-error-color-2: #F9D7D9;
-  --td-error-color-3: #F8B9BE;
-  --td-error-color-4: #F78D94;
-  --td-error-color-5: #F36D78;
-  --td-error-color-6: #E34D59;
-  --td-error-color-7: #C9353F;
-  --td-error-color-8: #B11F26;
+  --td-brand-color-1: #ecf2fe;
+  --td-brand-color-2: #d4e3fc;
+  --td-brand-color-3: #bbd3fb;
+  --td-brand-color-4: #96bbf8;
+  --td-brand-color-5: #699ef5;
+  --td-brand-color-6: #4787f0;
+  --td-brand-color-7: #266fe8;
+  --td-brand-color-8: #0052d9;
+  --td-brand-color-9: #0034b5;
+  --td-brand-color-10: #001f97;
+  --td-warning-color-1: #fef3e6;
+  --td-warning-color-2: #f9e0c7;
+  --td-warning-color-3: #f7c797;
+  --td-warning-color-4: #f2995f;
+  --td-warning-color-5: #ed7b2f;
+  --td-warning-color-6: #d35a21;
+  --td-warning-color-7: #ba431b;
+  --td-warning-color-8: #9e3610;
+  --td-warning-color-9: #842b0b;
+  --td-warning-color-10: #5a1907;
+  --td-error-color-1: #fdecee;
+  --td-error-color-2: #f9d7d9;
+  --td-error-color-3: #f8b9be;
+  --td-error-color-4: #f78d94;
+  --td-error-color-5: #f36d78;
+  --td-error-color-6: #e34d59;
+  --td-error-color-7: #c9353f;
+  --td-error-color-8: #b11f26;
   --td-error-color-9: #951114;
   --td-error-color-10: #680506;
-  --td-success-color-1: #E8F8F2;
-  --td-success-color-2: #BCEBDC;
-  --td-success-color-3: #85DBBE;
-  --td-success-color-4: #48C79C;
-  --td-success-color-5: #00A870;
-  --td-success-color-6: #078D5C;
+  --td-success-color-1: #e8f8f2;
+  --td-success-color-2: #bcebdc;
+  --td-success-color-3: #85dbbe;
+  --td-success-color-4: #48c79c;
+  --td-success-color-5: #00a870;
+  --td-success-color-6: #078d5c;
   --td-success-color-7: #067945;
   --td-success-color-8: #056334;
-  --td-success-color-9: #044F2A;
+  --td-success-color-9: #044f2a;
   --td-success-color-10: #033017;
-  --td-gray-color-1: #F3F3F3;
-  --td-gray-color-2: #EEEEEE;
-  --td-gray-color-3: #E7E7E7;
-  --td-gray-color-4: #DCDCDC;
-  --td-gray-color-5: #C5C5C5;
-  --td-gray-color-6: #A6A6A6;
-  --td-gray-color-7: #8B8B8B;
-  --td-gray-color-8: #777777;
-  --td-gray-color-9: #5E5E5E;
-  --td-gray-color-10: #4B4B4B;
+  --td-gray-color-1: #f3f3f3;
+  --td-gray-color-2: #eee;
+  --td-gray-color-3: #e7e7e7;
+  --td-gray-color-4: #dcdcdc;
+  --td-gray-color-5: #c5c5c5;
+  --td-gray-color-6: #a6a6a6;
+  --td-gray-color-7: #8b8b8b;
+  --td-gray-color-8: #777;
+  --td-gray-color-9: #5e5e5e;
+  --td-gray-color-10: #4b4b4b;
   --td-gray-color-11: #383838;
-  --td-gray-color-12: #2C2C2C;
+  --td-gray-color-12: #2c2c2c;
   --td-gray-color-13: #242424;
   --td-gray-color-14: #181818;
   --td-font-white-1: #ffffff;
@@ -130,69 +130,69 @@
   --td-component-stroke: var(--td-gray-color-3);
   --td-border-level-2-color: var(--td-gray-color-4);
   --td-component-border: var(--td-gray-color-4);
-  --td-shadow-1: 0px 1px 10px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, .08), 0px 2px 4px -1px rgba(0, 0, 0, .12);
-  --td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, .06), 0px 5px 5px -3px rgba(0, 0, 0, .1);
-  --td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, .04), 0px 8px 10px -5px rgba(0, 0, 0, .08);
-  --td-shadow-inset-top: inset 0px 0.5px 0px #DCDCDC;
-  --td-shadow-inset-right: inset 0.5px 0px 0px #DCDCDC;
-  --td-shadow-inset-bottom: inset 0px -0.5px 0px #DCDCDC;
-  --td-shadow-inset-left: inset -0.5px 0px 0px #DCDCDC;
+  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
+  --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
+  --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
+  --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
+  --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
+  --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
+  --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
   --td-table-shadow-color: rgba(0, 0, 0, 0.08);
   --td-scrollbar-color: rgba(0, 0, 0, 0.1);
 }
 :root[theme-mode="dark"] {
-  --td-brand-color-1: #1B2F51;
+  --td-brand-color-1: #1b2f51;
   --td-brand-color-2: #173463;
   --td-brand-color-3: #143975;
-  --td-brand-color-4: #103D88;
-  --td-brand-color-5: #0D429A;
-  --td-brand-color-6: #054BBE;
-  --td-brand-color-7: #2667D4;
-  --td-brand-color-8: #4582E6;
-  --td-brand-color-9: #699EF5;
-  --td-brand-color-10: #96BBF8;
-  --td-warning-color-1: #4F2A1D;
-  --td-warning-color-2: #582F21;
-  --td-warning-color-3: #733C23;
-  --td-warning-color-4: #A75D2B;
-  --td-warning-color-5: #CF6E2D;
-  --td-warning-color-6: #DC7633;
-  --td-warning-color-7: #E8935C;
-  --td-warning-color-8: #ECBF91;
-  --td-warning-color-9: #EED7BF;
-  --td-warning-color-10: #F3E9DC;
+  --td-brand-color-4: #103d88;
+  --td-brand-color-5: #0d429a;
+  --td-brand-color-6: #054bbe;
+  --td-brand-color-7: #2667d4;
+  --td-brand-color-8: #4582e6;
+  --td-brand-color-9: #699ef5;
+  --td-brand-color-10: #96bbf8;
+  --td-warning-color-1: #4f2a1d;
+  --td-warning-color-2: #582f21;
+  --td-warning-color-3: #733c23;
+  --td-warning-color-4: #a75d2b;
+  --td-warning-color-5: #cf6e2d;
+  --td-warning-color-6: #dc7633;
+  --td-warning-color-7: #e8935c;
+  --td-warning-color-8: #ecbf91;
+  --td-warning-color-9: #eed7bf;
+  --td-warning-color-10: #f3e9dc;
   --td-error-color-1: #472324;
-  --td-error-color-2: #5E2A2D;
+  --td-error-color-2: #5e2a2d;
   --td-error-color-3: #703439;
-  --td-error-color-4: #83383E;
-  --td-error-color-5: #A03F46;
-  --td-error-color-6: #C64751;
-  --td-error-color-7: #DE6670;
-  --td-error-color-8: #EC888E;
-  --td-error-color-9: #EDB1B6;
-  --td-error-color-10: #EECED0;
-  --td-success-color-1: #193A2A;
-  --td-success-color-2: #1A4230;
-  --td-success-color-3: #17533D;
-  --td-success-color-4: #0D7A55;
+  --td-error-color-4: #83383e;
+  --td-error-color-5: #a03f46;
+  --td-error-color-6: #c64751;
+  --td-error-color-7: #de6670;
+  --td-error-color-8: #ec888e;
+  --td-error-color-9: #edb1b6;
+  --td-error-color-10: #eeced0;
+  --td-success-color-1: #193a2a;
+  --td-success-color-2: #1a4230;
+  --td-success-color-3: #17533d;
+  --td-success-color-4: #0d7a55;
   --td-success-color-5: #059465;
-  --td-success-color-6: #43AF8A;
-  --td-success-color-7: #46BF96;
-  --td-success-color-8: #80D2B6;
-  --td-success-color-9: #B4E1D3;
-  --td-success-color-10: #DEEDE8;
-  --td-gray-color-1: #F3F3F3;
-  --td-gray-color-2: #EEEEEE;
-  --td-gray-color-3: #E7E7E7;
-  --td-gray-color-4: #DCDCDC;
-  --td-gray-color-5: #C5C5C5;
-  --td-gray-color-6: #A6A6A6;
-  --td-gray-color-7: #8B8B8B;
-  --td-gray-color-8: #777777;
-  --td-gray-color-9: #5E5E5E;
-  --td-gray-color-10: #4B4B4B;
+  --td-success-color-6: #43af8a;
+  --td-success-color-7: #46bf96;
+  --td-success-color-8: #80d2b6;
+  --td-success-color-9: #b4e1d3;
+  --td-success-color-10: #deede8;
+  --td-gray-color-1: #f3f3f3;
+  --td-gray-color-2: #eee;
+  --td-gray-color-3: #e7e7e7;
+  --td-gray-color-4: #dcdcdc;
+  --td-gray-color-5: #c5c5c5;
+  --td-gray-color-6: #a6a6a6;
+  --td-gray-color-7: #8b8b8b;
+  --td-gray-color-8: #777;
+  --td-gray-color-9: #5e5e5e;
+  --td-gray-color-10: #4b4b4b;
   --td-gray-color-11: #383838;
-  --td-gray-color-12: #2C2C2C;
+  --td-gray-color-12: #2c2c2c;
   --td-gray-color-13: #242424;
   --td-gray-color-14: #181818;
   --td-font-white-1: rgba(255, 255, 255, 0.9);
@@ -253,13 +253,13 @@
   --td-component-stroke: var(--td-gray-color-11);
   --td-border-level-2-color: var(--td-gray-color-9);
   --td-component-border: var(--td-gray-color-9);
-  --td-shadow-1: 0px 4px 6px rgba(0, 0, 0, 0.06), 0px 1px 10px rgba(0, 0, 0, .08), 0px 2px 4px rgba(0, 0, 0, .12);
-  --td-shadow-2: 0px 8px 10px rgba(0, 0, 0, 0.12), 0px 3px 14px rgba(0, 0, 0, .1), 0px 5px 5px rgba(0, 0, 0, .16);
-  --td-shadow-3: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, .12), 0px 8px 10px rgba(0, 0, 0, .2);
-  --td-shadow-inset-top: inset 0px 0.5px 0px #5E5E5E;
-  --td-shadow-inset-right: inset 0.5px 0px 0px #5E5E5E;
-  --td-shadow-inset-bottom: inset 0px -0.5px 0px #5E5E5E;
-  --td-shadow-inset-left: inset -0.5px 0px 0px #5E5E5E;
+  --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
+  --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
+  --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
+  --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
+  --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
+  --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
+  --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
   --td-table-shadow-color: rgba(0, 0, 0, 0.55);
   --td-scrollbar-color: rgba(255, 255, 255, 0.1);
 }
@@ -438,6 +438,11 @@
 .t-input .t-input__prefix .t-icon,
 .t-input .t-input__suffix .t-icon {
   font-size: inherit;
+}
+.t-input .t-input__prefix .t-icon {
+  color: var(--td-text-color-placeholder);
+}
+.t-input .t-input__suffix .t-icon {
   color: var(--td-text-color-placeholder);
 }
 .t-input.t-is-focused .t-input__prefix .t-icon,
@@ -690,9 +695,9 @@
   display: block;
 }
 .t-upload-card__item:hover .t-upload-card__mask {
+  opacity: 1;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
-  opacity: 1;
 }
 .t-upload-card__item.t-is--error .t-icon-warning_fill {
   color: var(--td-error-color);
@@ -759,7 +764,8 @@
   background-color: var(--td-bg-color-secondarycontainer);
   border: 1px dashed var(--td-component-border);
 }
-.t-upload-card-container > .t-icon {
+.t-upload-card-container > .t-icon,
+.t-upload-card-container .t-loading {
   font-size: 24px;
   margin-bottom: 8px;
 }
@@ -772,6 +778,10 @@
 .t-upload-card__status-wrap > svg {
   margin-bottom: 6px;
 }
+.t-upload-card__status-wrap .t-icon,
+.t-upload-card__status-wrap .t-loading {
+  font-size: 20px;
+}
 .t-upload-card__content-border {
   border: 1px solid var(--td-component-border);
 }
@@ -784,6 +794,12 @@
   font-size: 12px;
 }
 .t-upload-card__mask {
+  background-color: var(--td-text-color-secondary);
+  color: var(--td-bg-color-container);
+  -webkit-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  will-change: transform;
+  opacity: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -798,12 +814,6 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: var(--td-text-color-secondary);
-  color: var(--td-bg-color-container);
-  -webkit-transition: opacity 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  will-change: transform;
-  opacity: 0;
 }
 .t-upload-card__mask--disabled {
   opacity: 0.3;
@@ -941,6 +951,11 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.t-upload__single-progress .t-loading {
+  font-size: 16px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
 .t-upload__single-input-delete {
   margin-left: 16px;
   font-size: 14px;
@@ -998,7 +1013,8 @@
   display: -ms-flexbox;
   display: flex;
 }
-.t-upload__dragger-progress .t-icon {
+.t-upload__dragger-progress .t-icon,
+.t-upload__dragger-progress .t-loading {
   font-size: 16px;
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -1024,8 +1040,8 @@
   max-height: 100%;
 }
 .t-upload__dragger-img-wrap + .t-upload__dragger-progress-info {
-  max-width: 176px;
   margin-left: 16px;
+  max-width: 176px;
 }
 .t-upload__dragger-progress-info {
   -webkit-box-flex: 1;
@@ -1126,7 +1142,8 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.t-upload__flow-status .t-icon {
+.t-upload__flow-status .t-icon,
+.t-upload__flow-status .t-loading {
   margin-right: 8px;
   font-size: 16px;
 }

package/es/upload/style/index.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.17.0
+ * tdesign v0.18.2
  * (c) 2021 tdesign
  * @license MIT
  */

package/es/upload/themes/dragger-progress.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.17.0
+ * tdesign v0.18.2
  * (c) 2021 tdesign
  * @license MIT
  */
@@ -11,8 +11,8 @@ import { Loading } from '../../loading/index.js';
 import useConfig from '../../_util/useConfig.js';
 import { abridgeName, returnFileSize, getCurrentDate } from '../util.js';
 import '../../button/Button.js';
-import '../../_chunks/dep-308ea020.js';
-import '../../_chunks/dep-34727236.js';
+import '../../_chunks/dep-efe7433b.js';
+import '../../_chunks/dep-016d27a7.js';
 import 'classnames';
 import '../../_util/noop.js';
 import '../../_util/useRipple.js';
@@ -20,23 +20,25 @@ import '../../_util/setStyle.js';
 import '../../config-provider/ConfigContext.js';
 import '../../locale/zh_CN.js';
 import '../../loading/loading.js';
-import '../../_chunks/dep-01d52b00.js';
-import '../../_chunks/dep-65d3c0dc.js';
+import '../../_chunks/dep-2f008905.js';
+import '../../_chunks/dep-6a5b1968.js';
 import 'react-dom';
 import '../../_util/dom.js';
 import 'raf';
-import '../../_chunks/dep-8ce9524a.js';
-import '../../_chunks/dep-d77e1dab.js';
-import '../../_chunks/dep-72e49bf9.js';
-import '../../_chunks/dep-4f8d4a92.js';
-import '../../_chunks/dep-50d67a9e.js';
-import '../../_chunks/dep-6d4ba42b.js';
-import '../../_chunks/dep-0bebd973.js';
+import '../../_chunks/dep-e507e9db.js';
+import '../../_chunks/dep-cb80da27.js';
+import '../../_chunks/dep-b6ff8559.js';
+import '../../_chunks/dep-1189939f.js';
+import '../../_chunks/dep-9ad4f4b7.js';
+import '../../_chunks/dep-4e491803.js';
+import '../../_chunks/dep-f3eac264.js';
 import '../../_util/easing.js';
 import '../../common/Portal.js';
-import '../../_chunks/dep-edc09aef.js';
+import '../../_chunks/dep-65c183dc.js';
 import './style/css.js';
-import '../../_chunks/dep-983e6e8d.js';
+import '../../_type/components/loading/index.js';
+import '../../_type/components/button/index.js';
+import '../../_chunks/dep-2eeaa58b.js';
 
 var DraggerProgress = function DraggerProgress(props) {
   var file = props.file,

package/es/upload/themes/dragger-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"dragger-progress.js","sources":["../../../src/upload/themes/dragger-progress.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport { CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';\nimport Button from '../../button';\nimport Loading from '../../loading';\nimport useConfig from '../../_util/useConfig';\nimport { UploadFile, UploadRemoveContext } from '../../_type/components/upload';\nimport { returnFileSize, abridgeName, getCurrentDate } from '../util';\n\nexport interface DraggerProgressProps {\n  display?: string;\n  file: UploadFile;\n  onTrigger?: () => void;\n  onRemove?: (context: UploadRemoveContext) => void;\n  onUpload?: () => void;\n}\n\nconst DraggerProgress: FC<DraggerProgressProps> = (props) => {\n  const { file, onUpload, onRemove, display, onTrigger } = props;\n  const { classPrefix } = useConfig();\n\n  const reUpload = (e) => {\n    onRemove?.({ e, file, index: 0 });\n    onTrigger?.();\n  };\n\n  const showResultOperate = React.useMemo(() => ['success', 'fail'].includes(file?.status), [file]);\n\n  const handleRemove = (e) => {\n    onRemove?.({ e, file, index: 0 });\n  };\n\n  const renderUploading = useCallback(() => {\n    if (file?.status === 'fail') {\n      return <ErrorCircleFilledIcon />;\n    }\n    if (file?.status === 'progress') {\n      return (\n        <div className=\"t-upload__single-progress\">\n          <Loading loading={true} size=\"small\" />\n          <span className=\"t-upload__single-percent\">{Math.min(file?.percent || 0, 99)}%</span>\n        </div>\n      );\n    }\n  }, [file]);\n\n  return (\n    <div className={`${classPrefix}-upload__dragger-progress`}>\n      {display === 'image' && (\n        <div className=\"t-upload__dragger-img-wrap\">{file && <img src={file.url || 'default.png'} />}</div>\n      )}\n      <div className={`${classPrefix}-upload__dragger-progress-info`}>\n        <div className={`${classPrefix}-upload__dragger-text`}>\n          <span className={`${classPrefix}-upload__single-name`}>{abridgeName(file?.name)}</span>\n          {file?.status !== 'success' && renderUploading()}\n          {file?.status === 'success' && <CheckCircleFilledIcon />}\n        </div>\n        <small className={`${classPrefix}-upload__small`}>文件大小：{returnFileSize(file?.size)}</small>\n        <small className={`${classPrefix}-upload__small`}>上传日期：{getCurrentDate()}</small>\n        {!['success', 'fail'].includes(file?.status) && (\n          <div className={`${classPrefix}-upload__dragger-btns`}>\n            <Button\n              theme=\"primary\"\n              variant=\"text\"\n              className={`${classPrefix}-upload__dragger-progress-cancel`}\n              onClick={handleRemove}\n            >\n              取消上传\n            </Button>\n            <Button theme=\"primary\" variant=\"text\" onClick={onUpload}>\n              点击上传\n            </Button>\n          </div>\n        )}\n        {showResultOperate && (\n          <div className=\"t-upload__dragger-btns\">\n            <Button theme=\"primary\" variant=\"text\" className=\"t-upload__dragger-progress-cancel\" onClick={reUpload}>\n              重新上传\n            </Button>\n            <Button theme=\"primary\" variant=\"text\" onClick={handleRemove}>\n              删除\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default DraggerProgress;\n"],"names":["DraggerProgress","props","file","onUpload","onRemove","display","onTrigger","useConfig","classPrefix","reUpload","e","index","showResultOperate","React","useMemo","includes","status","handleRemove","renderUploading","useCallback","ErrorCircleFilledIcon","className","Loading","loading","size","Math","min","percent","src","url","abridgeName","name","CheckCircleFilledIcon","returnFileSize","getCurrentDate","Button","theme","variant","onClick"],"mappings":"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"}
+{"version":3,"file":"dragger-progress.js","sources":["../../../src/upload/themes/dragger-progress.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport { CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';\nimport Button from '../../button';\nimport Loading from '../../loading';\nimport useConfig from '../../_util/useConfig';\nimport { UploadFile, UploadRemoveContext } from '../../_type/components/upload';\nimport { returnFileSize, abridgeName, getCurrentDate } from '../util';\n\nexport interface DraggerProgressProps {\n  display?: string;\n  file: UploadFile;\n  onTrigger?: () => void;\n  onRemove?: (context: UploadRemoveContext) => void;\n  onUpload?: () => void;\n}\n\nconst DraggerProgress: FC<DraggerProgressProps> = (props) => {\n  const { file, onUpload, onRemove, display, onTrigger } = props;\n  const { classPrefix } = useConfig();\n\n  const reUpload = (e) => {\n    onRemove?.({ e, file, index: 0 });\n    onTrigger?.();\n  };\n\n  const showResultOperate = React.useMemo(() => ['success', 'fail'].includes(file?.status), [file]);\n\n  const handleRemove = (e) => {\n    onRemove?.({ e, file, index: 0 });\n  };\n\n  const renderUploading = useCallback(() => {\n    if (file?.status === 'fail') {\n      return <ErrorCircleFilledIcon />;\n    }\n    if (file?.status === 'progress') {\n      return (\n        <div className=\"t-upload__single-progress\">\n          <Loading loading={true} size=\"small\" />\n          <span className=\"t-upload__single-percent\">{Math.min(file?.percent || 0, 99)}%</span>\n        </div>\n      );\n    }\n  }, [file]);\n\n  return (\n    <div className={`${classPrefix}-upload__dragger-progress`}>\n      {display === 'image' && (\n        <div className=\"t-upload__dragger-img-wrap\">{file && <img src={file.url || 'default.png'} />}</div>\n      )}\n      <div className={`${classPrefix}-upload__dragger-progress-info`}>\n        <div className={`${classPrefix}-upload__dragger-text`}>\n          <span className={`${classPrefix}-upload__single-name`}>{abridgeName(file?.name)}</span>\n          {file?.status !== 'success' && renderUploading()}\n          {file?.status === 'success' && <CheckCircleFilledIcon />}\n        </div>\n        <small className={`${classPrefix}-upload__small`}>文件大小：{returnFileSize(file?.size)}</small>\n        <small className={`${classPrefix}-upload__small`}>上传日期：{getCurrentDate()}</small>\n        {!['success', 'fail'].includes(file?.status) && (\n          <div className={`${classPrefix}-upload__dragger-btns`}>\n            <Button\n              theme=\"primary\"\n              variant=\"text\"\n              className={`${classPrefix}-upload__dragger-progress-cancel`}\n              onClick={handleRemove}\n            >\n              取消上传\n            </Button>\n            <Button theme=\"primary\" variant=\"text\" onClick={onUpload}>\n              点击上传\n            </Button>\n          </div>\n        )}\n        {showResultOperate && (\n          <div className=\"t-upload__dragger-btns\">\n            <Button theme=\"primary\" variant=\"text\" className=\"t-upload__dragger-progress-cancel\" onClick={reUpload}>\n              重新上传\n            </Button>\n            <Button theme=\"primary\" variant=\"text\" onClick={handleRemove}>\n              删除\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default DraggerProgress;\n"],"names":["DraggerProgress","props","file","onUpload","onRemove","display","onTrigger","useConfig","classPrefix","reUpload","e","index","showResultOperate","React","useMemo","includes","status","handleRemove","renderUploading","useCallback","ErrorCircleFilledIcon","className","Loading","loading","size","Math","min","percent","src","url","abridgeName","name","CheckCircleFilledIcon","returnFileSize","getCurrentDate","Button","theme","variant","onClick"],"mappings":"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"}

package/es/upload/themes/image-card.js

@@ -1,38 +1,39 @@
 /**
- * tdesign v0.17.0
+ * tdesign v0.18.2
  * (c) 2021 tdesign
  * @license MIT
  */
 
-import { _ as _slicedToArray } from '../../_chunks/dep-01d52b00.js';
+import { _ as _slicedToArray } from '../../_chunks/dep-2f008905.js';
 import React__default, { useState, Fragment } from 'react';
 import { BrowseIcon, DeleteIcon, AddIcon } from 'tdesign-icons-react';
 import { Loading } from '../../loading/index.js';
 import { Dialog } from '../../dialog/index.js';
 import useConfig from '../../_util/useConfig.js';
 import { finishUpload } from '../util.js';
-import '../../_chunks/dep-65d3c0dc.js';
+import '../../_chunks/dep-6a5b1968.js';
 import '../../loading/loading.js';
-import '../../_chunks/dep-308ea020.js';
+import '../../_chunks/dep-efe7433b.js';
 import 'react-dom';
 import 'classnames';
 import '../../_util/dom.js';
 import 'raf';
-import '../../_chunks/dep-8ce9524a.js';
-import '../../_chunks/dep-d77e1dab.js';
-import '../../_chunks/dep-72e49bf9.js';
-import '../../_chunks/dep-4f8d4a92.js';
-import '../../_chunks/dep-50d67a9e.js';
-import '../../_chunks/dep-6d4ba42b.js';
-import '../../_chunks/dep-0bebd973.js';
+import '../../_chunks/dep-e507e9db.js';
+import '../../_chunks/dep-cb80da27.js';
+import '../../_chunks/dep-b6ff8559.js';
+import '../../_chunks/dep-1189939f.js';
+import '../../_chunks/dep-9ad4f4b7.js';
+import '../../_chunks/dep-4e491803.js';
+import '../../_chunks/dep-f3eac264.js';
 import '../../_util/easing.js';
 import '../../common/Portal.js';
-import '../../_chunks/dep-edc09aef.js';
+import '../../_chunks/dep-65c183dc.js';
 import '../../config-provider/ConfigContext.js';
 import '../../locale/zh_CN.js';
 import './style/css.js';
+import '../../_type/components/loading/index.js';
 import '../../dialog/Dialog.js';
-import '../../_chunks/dep-34727236.js';
+import '../../_chunks/dep-016d27a7.js';
 import '../../locale/LocalReceiver.js';
 import '../../config-provider/index.js';
 import '../../config-provider/ConfigProvider.js';
@@ -41,11 +42,13 @@ import '../../button/Button.js';
 import '../../_util/noop.js';
 import '../../_util/useRipple.js';
 import '../../_util/setStyle.js';
+import '../../_type/components/button/index.js';
 import '../../dialog/RenderDialog.js';
 import 'react-transition-group';
 import '../../_util/useSetState.js';
+import '../../_type/components/dialog/index.js';
 import '../../dialog/plugin.js';
-import '../../_chunks/dep-983e6e8d.js';
+import '../../_chunks/dep-2eeaa58b.js';
 
 var ImageCard = function ImageCard(props) {
   var files = props.files,

package/es/upload/themes/image-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-card.js","sources":["../../../src/upload/themes/image-card.tsx"],"sourcesContent":["import React, { FC, Fragment, useState } from 'react';\nimport { BrowseIcon, DeleteIcon, AddIcon } from 'tdesign-icons-react';\nimport Loading from '../../loading';\nimport Dialog from '../../dialog';\nimport useConfig from '../../_util/useConfig';\nimport { UploadRemoveContext } from '../../_type/components/upload';\nimport { finishUpload } from '../util';\nimport { TdUploadFile } from '../types';\n\nexport interface ImageCardProps {\n  files?: TdUploadFile[];\n  multiple?: boolean;\n  max?: number;\n  onTrigger: () => void;\n  onRemove?: (options: UploadRemoveContext) => void;\n}\n\nconst ImageCard: FC<ImageCardProps> = (props) => {\n  const { files, multiple = false, max = 0, onRemove } = props;\n  const { classPrefix } = useConfig();\n  const [showImg, setShowImg] = useState(false);\n  const [imgURL, setImgURL] = useState();\n\n  const preview = (file) => {\n    setShowImg(true);\n    setImgURL(file.url);\n  };\n\n  const showTrigger = React.useMemo(() => {\n    if (multiple) {\n      return !max || files.length < max;\n    }\n\n    return !(files && files[0]);\n  }, [files, max, multiple]);\n\n  return (\n    <Fragment>\n      <Dialog\n        visible={showImg}\n        showOverlay\n        width=\"auto\"\n        top=\"10%\"\n        className={`${classPrefix}-upload-dialog`}\n        footer={false}\n        header={false}\n        onClose={() => {\n          setShowImg(false);\n          setImgURL(null);\n        }}\n      >\n        <p className={`${classPrefix}-dialog__body-img-box`}>\n          <img src={imgURL} alt=\"\" />\n        </p>\n      </Dialog>\n      <ul className={`${classPrefix}-upload-card`}>\n        {files &&\n          files.map((file, index) => (\n            <li className={`${classPrefix}-upload-card__item ${classPrefix}-is--background`} key={index}>\n              {!finishUpload(file.status) ? (\n                <div className={`${classPrefix}-upload-card-container ${classPrefix}-upload-card__box`}>\n                  <Loading loading={true} size=\"medium\" />\n                  <p>上传中 {Math.min(files[0].percent, 99)}%</p>\n                </div>\n              ) : (\n                <div className={`${classPrefix}-upload-card__content ${classPrefix}-upload-card__box`}>\n                  <img className={`${classPrefix}-upload-card__image`} src={file.url} />\n                  <div className={`${classPrefix}-upload-card__mask`}>\n                    <span className={`${classPrefix}-upload-card__mask__item`} onClick={(e) => e.stopPropagation()}>\n                      <BrowseIcon\n                        onClick={() => {\n                          preview(file);\n                        }}\n                      />\n                    </span>\n                    <span className={`${classPrefix}-upload-card__mask__item-divider`} />\n                    <span className={`${classPrefix}-upload-card__mask__item`} onClick={(e) => e.stopPropagation()}>\n                      <DeleteIcon\n                        onClick={(e) => {\n                          onRemove?.({ e, file, index });\n                        }}\n                      />\n                    </span>\n                  </div>\n                </div>\n              )}\n            </li>\n          ))}\n        {showTrigger && (\n          <li className={`${classPrefix}-upload-card__item ${classPrefix}-is--background`} onClick={props.onTrigger}>\n            <div className={`${classPrefix}-upload-card-container ${classPrefix}-upload-card__box`}>\n              <AddIcon />\n              <p className={`${classPrefix}-upload__small`}>点击上传图片</p>\n            </div>\n          </li>\n        )}\n      </ul>\n    </Fragment>\n  );\n};\n\nexport default ImageCard;\n"],"names":["ImageCard","props","files","multiple","max","onRemove","useConfig","classPrefix","useState","showImg","setShowImg","imgURL","setImgURL","preview","file","url","showTrigger","React","useMemo","length","Fragment","Dialog","visible","showOverlay","width","top","className","footer","header","onClose","src","alt","map","index","key","finishUpload","status","Loading","loading","size","Math","min","percent","onClick","e","stopPropagation","BrowseIcon","DeleteIcon","onTrigger","AddIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiBMA,YAAgC,SAAhCA,SAAgC,CAACC,KAAD,EAAW;MACvCC,QAA+CD,MAA/CC;wBAA+CD,MAAxCE;MAAAA,wCAAW;mBAA6BF,MAAtBG;MAAAA,8BAAM;MAAGC,WAAaJ,MAAbI;;mBAClBC;MAAhBC,yBAAAA;;kBACsBC,SAAS;;MAAhCC;MAASC;;mBACYF;;MAArBG;MAAQC;;MAETC,UAAU,SAAVA,OAAU,CAACC,IAAD,EAAU;eACb;cACDA,KAAKC;;;MAGXC,cAAcC,eAAMC,OAAN,CAAc,YAAM;QAClCf,UAAU;aACL,CAACC,GAAD,IAAQF,MAAMiB,MAAN,GAAef;;;WAGzB,WAAWF,MAAM,EAAjB;GALW,EAMjB,CAACA,KAAD,EAAQE,GAAR,EAAaD,QAAb,CANiB;qDASjBiB,UAAD,kDACGC,QAAD;AACEC,IAAAA,SAASb,OADX;AAEEc,IAAAA,aAAW,IAFb;AAGEC,IAAAA,OAAM,MAHR;AAIEC,IAAAA,KAAI,KAJN;AAKEC,IAAAA,qBAAcnB,8BALhB;AAMEoB,IAAAA,QAAQ,KANV;AAOEC,IAAAA,QAAQ,KAPV;AAQEC,IAAAA,SAAS,mBAAM;iBACF;gBACD;;AAVd,iDAaG,KAAD;AAAGH,IAAAA,qBAAcnB;AAAjB,iDACG,OAAD;AAAKuB,IAAAA,KAAKnB,MAAV;AAAkBoB,IAAAA,KAAI;AAAtB,oDAGH,MAAD;AAAIL,IAAAA,qBAAcnB;AAAlB,KACGL,SACCA,MAAM8B,GAAN,CAAU,UAAClB,IAAD,EAAOmB,KAAP;AAAA,uDACP,MAAD;AAAIP,MAAAA,qBAAcnB,2CAAiCA,+BAAnD;AAAiF2B,MAAAA,KAAKD;AAAtF,OACG,CAACE,aAAarB,KAAKsB,OAAnB,+CACE,OAAD;AAAKV,MAAAA,qBAAcnB,+CAAqCA;AAAxD,mDACG8B,SAAD;AAASC,MAAAA,SAAS,IAAlB;AAAwBC,MAAAA,MAAK;AAA7B,oDACC,KAAD,MAAG,uBAAKC,KAAKC,GAAL,CAASvC,MAAM,EAAN,CAASwC,OAAlB,EAA2B,EAA3B,GAA+B,KAH1C,+CAME,OAAD;AAAKhB,MAAAA,qBAAcnB,8CAAoCA;AAAvD,mDACG,OAAD;AAAKmB,MAAAA,qBAAcnB,mCAAnB;AAAqDuB,MAAAA,KAAKhB,KAAKC;AAA/D,oDACC,OAAD;AAAKW,MAAAA,qBAAcnB;AAAnB,mDACG,QAAD;AAAMmB,MAAAA,qBAAcnB,wCAApB;AAA2DoC,MAAAA,SAAS,iBAACC,CAAD;AAAA,eAAOA,EAAEC,eAAF,EAAP;AAAA;AAApE,mDACGC,YAAD;AACEH,MAAAA,SAAS,mBAAM;gBACL7B;;AAFZ,qDAMD,QAAD;AAAMY,MAAAA,qBAAcnB;AAApB,oDACC,QAAD;AAAMmB,MAAAA,qBAAcnB,wCAApB;AAA2DoC,MAAAA,SAAS,iBAACC,CAAD;AAAA,eAAOA,EAAEC,eAAF,EAAP;AAAA;AAApE,mDACGE,YAAD;AACEJ,MAAAA,SAAS,iBAACC,CAAD,EAAO;qEACH;AAAEA,UAAAA,GAAAA,CAAF;AAAK9B,UAAAA,MAAAA,IAAL;AAAWmB,UAAAA,OAAAA;AAAX;;AAFf,UApBF;AAAA,GAAV,GA+BDjB,2DACE,MAAD;AAAIU,IAAAA,qBAAcnB,2CAAiCA,+BAAnD;AAAiFoC,IAAAA,SAAS1C,MAAM+C;AAAhG,iDACG,OAAD;AAAKtB,IAAAA,qBAAcnB,+CAAqCA;AAAxD,iDACG0C,SAAD,mDACC,KAAD;AAAGvB,IAAAA,qBAAcnB;AAAjB,KAA8C;;;;;"}
+{"version":3,"file":"image-card.js","sources":["../../../src/upload/themes/image-card.tsx"],"sourcesContent":["import React, { FC, Fragment, useState } from 'react';\nimport { BrowseIcon, DeleteIcon, AddIcon } from 'tdesign-icons-react';\nimport Loading from '../../loading';\nimport Dialog from '../../dialog';\nimport useConfig from '../../_util/useConfig';\nimport { UploadRemoveContext } from '../../_type/components/upload';\nimport { finishUpload } from '../util';\nimport { TdUploadFile } from '../types';\n\nexport interface ImageCardProps {\n  files?: TdUploadFile[];\n  multiple?: boolean;\n  max?: number;\n  onTrigger: () => void;\n  onRemove?: (options: UploadRemoveContext) => void;\n}\n\nconst ImageCard: FC<ImageCardProps> = (props) => {\n  const { files, multiple = false, max = 0, onRemove } = props;\n  const { classPrefix } = useConfig();\n  const [showImg, setShowImg] = useState(false);\n  const [imgURL, setImgURL] = useState();\n\n  const preview = (file) => {\n    setShowImg(true);\n    setImgURL(file.url);\n  };\n\n  const showTrigger = React.useMemo(() => {\n    if (multiple) {\n      return !max || files.length < max;\n    }\n\n    return !(files && files[0]);\n  }, [files, max, multiple]);\n\n  return (\n    <Fragment>\n      <Dialog\n        visible={showImg}\n        showOverlay\n        width=\"auto\"\n        top=\"10%\"\n        className={`${classPrefix}-upload-dialog`}\n        footer={false}\n        header={false}\n        onClose={() => {\n          setShowImg(false);\n          setImgURL(null);\n        }}\n      >\n        <p className={`${classPrefix}-dialog__body-img-box`}>\n          <img src={imgURL} alt=\"\" />\n        </p>\n      </Dialog>\n      <ul className={`${classPrefix}-upload-card`}>\n        {files &&\n          files.map((file, index) => (\n            <li className={`${classPrefix}-upload-card__item ${classPrefix}-is--background`} key={index}>\n              {!finishUpload(file.status) ? (\n                <div className={`${classPrefix}-upload-card-container ${classPrefix}-upload-card__box`}>\n                  <Loading loading={true} size=\"medium\" />\n                  <p>上传中 {Math.min(files[0].percent, 99)}%</p>\n                </div>\n              ) : (\n                <div className={`${classPrefix}-upload-card__content ${classPrefix}-upload-card__box`}>\n                  <img className={`${classPrefix}-upload-card__image`} src={file.url} />\n                  <div className={`${classPrefix}-upload-card__mask`}>\n                    <span className={`${classPrefix}-upload-card__mask__item`} onClick={(e) => e.stopPropagation()}>\n                      <BrowseIcon\n                        onClick={() => {\n                          preview(file);\n                        }}\n                      />\n                    </span>\n                    <span className={`${classPrefix}-upload-card__mask__item-divider`} />\n                    <span className={`${classPrefix}-upload-card__mask__item`} onClick={(e) => e.stopPropagation()}>\n                      <DeleteIcon\n                        onClick={(e) => {\n                          onRemove?.({ e, file, index });\n                        }}\n                      />\n                    </span>\n                  </div>\n                </div>\n              )}\n            </li>\n          ))}\n        {showTrigger && (\n          <li className={`${classPrefix}-upload-card__item ${classPrefix}-is--background`} onClick={props.onTrigger}>\n            <div className={`${classPrefix}-upload-card-container ${classPrefix}-upload-card__box`}>\n              <AddIcon />\n              <p className={`${classPrefix}-upload__small`}>点击上传图片</p>\n            </div>\n          </li>\n        )}\n      </ul>\n    </Fragment>\n  );\n};\n\nexport default ImageCard;\n"],"names":["ImageCard","props","files","multiple","max","onRemove","useConfig","classPrefix","useState","showImg","setShowImg","imgURL","setImgURL","preview","file","url","showTrigger","React","useMemo","length","Fragment","Dialog","visible","showOverlay","width","top","className","footer","header","onClose","src","alt","map","index","key","finishUpload","status","Loading","loading","size","Math","min","percent","onClick","e","stopPropagation","BrowseIcon","DeleteIcon","onTrigger","AddIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiBMA,YAAgC,SAAhCA,SAAgC,CAACC,KAAD,EAAW;MACvCC,QAA+CD,MAA/CC;wBAA+CD,MAAxCE;MAAAA,wCAAW;mBAA6BF,MAAtBG;MAAAA,8BAAM;MAAGC,WAAaJ,MAAbI;;mBAClBC;MAAhBC,yBAAAA;;kBACsBC,SAAS;;MAAhCC;MAASC;;mBACYF;;MAArBG;MAAQC;;MAETC,UAAU,SAAVA,OAAU,CAACC,IAAD,EAAU;eACb;cACDA,KAAKC;;;MAGXC,cAAcC,eAAMC,OAAN,CAAc,YAAM;QAClCf,UAAU;aACL,CAACC,GAAD,IAAQF,MAAMiB,MAAN,GAAef;;;WAGzB,WAAWF,MAAM,EAAjB;GALW,EAMjB,CAACA,KAAD,EAAQE,GAAR,EAAaD,QAAb,CANiB;qDASjBiB,UAAD,kDACGC,QAAD;AACEC,IAAAA,SAASb,OADX;AAEEc,IAAAA,aAAW,IAFb;AAGEC,IAAAA,OAAM,MAHR;AAIEC,IAAAA,KAAI,KAJN;AAKEC,IAAAA,qBAAcnB,8BALhB;AAMEoB,IAAAA,QAAQ,KANV;AAOEC,IAAAA,QAAQ,KAPV;AAQEC,IAAAA,SAAS,mBAAM;iBACF;gBACD;;AAVd,iDAaG,KAAD;AAAGH,IAAAA,qBAAcnB;AAAjB,iDACG,OAAD;AAAKuB,IAAAA,KAAKnB,MAAV;AAAkBoB,IAAAA,KAAI;AAAtB,oDAGH,MAAD;AAAIL,IAAAA,qBAAcnB;AAAlB,KACGL,SACCA,MAAM8B,GAAN,CAAU,UAAClB,IAAD,EAAOmB,KAAP;AAAA,uDACP,MAAD;AAAIP,MAAAA,qBAAcnB,2CAAiCA,+BAAnD;AAAiF2B,MAAAA,KAAKD;AAAtF,OACG,CAACE,aAAarB,KAAKsB,OAAnB,+CACE,OAAD;AAAKV,MAAAA,qBAAcnB,+CAAqCA;AAAxD,mDACG8B,SAAD;AAASC,MAAAA,SAAS,IAAlB;AAAwBC,MAAAA,MAAK;AAA7B,oDACC,KAAD,MAAG,uBAAKC,KAAKC,GAAL,CAASvC,MAAM,EAAN,CAASwC,OAAlB,EAA2B,EAA3B,GAA+B,KAH1C,+CAME,OAAD;AAAKhB,MAAAA,qBAAcnB,8CAAoCA;AAAvD,mDACG,OAAD;AAAKmB,MAAAA,qBAAcnB,mCAAnB;AAAqDuB,MAAAA,KAAKhB,KAAKC;AAA/D,oDACC,OAAD;AAAKW,MAAAA,qBAAcnB;AAAnB,mDACG,QAAD;AAAMmB,MAAAA,qBAAcnB,wCAApB;AAA2DoC,MAAAA,SAAS,iBAACC,CAAD;AAAA,eAAOA,EAAEC,eAAF,EAAP;AAAA;AAApE,mDACGC,YAAD;AACEH,MAAAA,SAAS,mBAAM;gBACL7B;;AAFZ,qDAMD,QAAD;AAAMY,MAAAA,qBAAcnB;AAApB,oDACC,QAAD;AAAMmB,MAAAA,qBAAcnB,wCAApB;AAA2DoC,MAAAA,SAAS,iBAACC,CAAD;AAAA,eAAOA,EAAEC,eAAF,EAAP;AAAA;AAApE,mDACGE,YAAD;AACEJ,MAAAA,SAAS,iBAACC,CAAD,EAAO;qEACH;AAAEA,UAAAA,GAAAA,CAAF;AAAK9B,UAAAA,MAAAA,IAAL;AAAWmB,UAAAA,OAAAA;AAAX;;AAFf,UApBF;AAAA,GAAV,GA+BDjB,2DACE,MAAD;AAAIU,IAAAA,qBAAcnB,2CAAiCA,+BAAnD;AAAiFoC,IAAAA,SAAS1C,MAAM+C;AAAhG,iDACG,OAAD;AAAKtB,IAAAA,qBAAcnB,+CAAqCA;AAAxD,iDACG0C,SAAD,mDACC,KAAD;AAAGvB,IAAAA,qBAAcnB;AAAjB,KAA8C;;;;;"}

package/es/upload/themes/single-file.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.17.0
+ * tdesign v0.18.2
  * (c) 2021 tdesign
  * @license MIT
  */
@@ -10,25 +10,26 @@ import { ErrorCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-reac
 import { Loading } from '../../loading/index.js';
 import useConfig from '../../_util/useConfig.js';
 import '../../loading/loading.js';
-import '../../_chunks/dep-308ea020.js';
-import '../../_chunks/dep-01d52b00.js';
-import '../../_chunks/dep-65d3c0dc.js';
+import '../../_chunks/dep-efe7433b.js';
+import '../../_chunks/dep-2f008905.js';
+import '../../_chunks/dep-6a5b1968.js';
 import 'react-dom';
 import '../../_util/dom.js';
 import 'raf';
-import '../../_chunks/dep-8ce9524a.js';
-import '../../_chunks/dep-d77e1dab.js';
-import '../../_chunks/dep-72e49bf9.js';
-import '../../_chunks/dep-4f8d4a92.js';
-import '../../_chunks/dep-50d67a9e.js';
-import '../../_chunks/dep-6d4ba42b.js';
-import '../../_chunks/dep-0bebd973.js';
+import '../../_chunks/dep-e507e9db.js';
+import '../../_chunks/dep-cb80da27.js';
+import '../../_chunks/dep-b6ff8559.js';
+import '../../_chunks/dep-1189939f.js';
+import '../../_chunks/dep-9ad4f4b7.js';
+import '../../_chunks/dep-4e491803.js';
+import '../../_chunks/dep-f3eac264.js';
 import '../../_util/easing.js';
 import '../../common/Portal.js';
-import '../../_chunks/dep-edc09aef.js';
+import '../../_chunks/dep-65c183dc.js';
 import '../../config-provider/ConfigContext.js';
 import '../../locale/zh_CN.js';
 import './style/css.js';
+import '../../_type/components/loading/index.js';
 
 var SingleFile = function SingleFile(props) {
   var _props$display = props.display,

package/es/upload/themes/single-file.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-file.js","sources":["../../../src/upload/themes/single-file.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';\nimport Loading from '../../loading';\nimport { UploadFile, UploadRemoveContext } from '../../_type/components/upload';\nimport useConfig from '../../_util/useConfig';\n\nexport interface SingleFileProps {\n  file?: UploadFile;\n  display?: string;\n  placeholder?: string;\n  onRemove?: (context: UploadRemoveContext) => void;\n}\n\nconst SingleFile: FC<SingleFileProps> = (props) => {\n  const { display = 'file', onRemove, file } = props;\n  const { classPrefix } = useConfig();\n\n  const fileClass = classNames(`${classPrefix}-upload__single`, `${classPrefix}-upload__single-${display}`);\n\n  const showProgress = file && file.status !== 'success';\n\n  const inputName = file?.name;\n\n  const handleRemove = useCallback(\n    (e) => {\n      onRemove?.({\n        e,\n        file,\n        index: 0,\n      });\n    },\n    [file, onRemove],\n  );\n\n  const renderProgress = useCallback(() => {\n    if (file?.status === 'fail') {\n      return <ErrorCircleFilledIcon />;\n    }\n\n    return (\n      <div className={`${classPrefix}-upload__single-progress`}>\n        <Loading loading={true} size=\"small\" />\n        <span className={`${classPrefix}-upload__single-percent`}>{Math.min(file?.percent || 0, 99)}%</span>\n      </div>\n    );\n  }, [classPrefix, file]);\n\n  // 文本型预览\n  const renderFilePreviewAsText = useCallback(() => {\n    if (!inputName) return;\n    return (\n      <div className={`${classPrefix}-upload__single-display-text ${classPrefix}-display-text--margin`}>\n        <span className={`${classPrefix}-upload__single-name`}>{inputName}</span>\n        {showProgress ? (\n          renderProgress()\n        ) : (\n          <CloseCircleFilledIcon className={`${classPrefix}-upload-icon-delete`} onClick={handleRemove} />\n        )}\n      </div>\n    );\n  }, [classPrefix, inputName, renderProgress, showProgress, handleRemove]);\n\n  return (\n    <div className={fileClass}>\n      {props.children}\n      {display === 'file' && renderFilePreviewAsText()}\n    </div>\n  );\n};\n\nexport default SingleFile;\n"],"names":["SingleFile","props","display","onRemove","file","useConfig","classPrefix","fileClass","classNames","showProgress","status","inputName","name","handleRemove","useCallback","e","index","renderProgress","ErrorCircleFilledIcon","className","Loading","loading","size","Math","min","percent","renderFilePreviewAsText","CloseCircleFilledIcon","onClick","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcMA,aAAkC,SAAlCA,UAAkC,CAACC,KAAD,EAAW;uBACJA,MAArCC;MAAAA,sCAAU;MAAQC,WAAmBF,MAAnBE;MAAUC,OAASH,MAATG;;mBACZC;MAAhBC,yBAAAA;;MAEFC,YAAYC,qBAAcF,2CAAiCA,wCAA8BJ;MAEzFO,eAAeL,QAAQA,KAAKM,MAAL,KAAgB;MAEvCC,YAAYP,iBAAAA,2BAAAA,KAAMQ;MAElBC,eAAeC,YACnB,UAACC,CAAD,EAAO;iEACM;AACTA,MAAAA,GAAAA,CADS;AAETX,MAAAA,MAAAA,IAFS;AAGTY,MAAAA,OAAO;AAHE;KAMb,CAACZ,IAAD,EAAOD,QAAP;MAGIc,iBAAiBH,YAAY,YAAM;QACnC,CAAAV,aAAA,IAAAA,eAAA,YAAAA,KAAMM,MAAN,MAAiB,QAAQ;yDACnBQ,uBAAD;;;uDAIN,OAAD;AAAKC,MAAAA,qBAAcb;AAAnB,mDACGc,SAAD;AAASC,MAAAA,SAAS,IAAlB;AAAwBC,MAAAA,MAAK;AAA7B,oDACC,QAAD;AAAMH,MAAAA,qBAAcb;AAApB,OAA2DiB,KAAKC,GAAL,CAAS,CAAApB,aAAA,IAAAA,eAAA,YAAAA,KAAMqB,OAAN,KAAiB,CAA1B,EAA6B,EAA7B,GAAiC;KAG/F,CAACnB,WAAD,EAAcF,IAAd;MAGGsB,0BAA0BZ,YAAY,YAAM;QAC5C,CAACH;uDAEF,OAAD;AAAKQ,MAAAA,qBAAcb,qDAA2CA;AAA9D,mDACG,QAAD;AAAMa,MAAAA,qBAAcb;AAApB,OAAwDK,YACvDF,eACCQ,+DAECU,uBAAD;AAAuBR,MAAAA,qBAAcb,mCAArC;AAAuEsB,MAAAA,SAASf;AAAhF;KAIL,CAACP,WAAD,EAAcK,SAAd,EAAyBM,cAAzB,EAAyCR,YAAzC,EAAuDI,YAAvD;qDAGA,OAAD;AAAKM,IAAAA,WAAWZ;AAAhB,KACGN,MAAM4B,UACN3B,YAAY,MAAZ,IAAsBwB;;;;;"}
+{"version":3,"file":"single-file.js","sources":["../../../src/upload/themes/single-file.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';\nimport Loading from '../../loading';\nimport { UploadFile, UploadRemoveContext } from '../../_type/components/upload';\nimport useConfig from '../../_util/useConfig';\n\nexport interface SingleFileProps {\n  file?: UploadFile;\n  display?: string;\n  placeholder?: string;\n  onRemove?: (context: UploadRemoveContext) => void;\n}\n\nconst SingleFile: FC<SingleFileProps> = (props) => {\n  const { display = 'file', onRemove, file } = props;\n  const { classPrefix } = useConfig();\n\n  const fileClass = classNames(`${classPrefix}-upload__single`, `${classPrefix}-upload__single-${display}`);\n\n  const showProgress = file && file.status !== 'success';\n\n  const inputName = file?.name;\n\n  const handleRemove = useCallback(\n    (e) => {\n      onRemove?.({\n        e,\n        file,\n        index: 0,\n      });\n    },\n    [file, onRemove],\n  );\n\n  const renderProgress = useCallback(() => {\n    if (file?.status === 'fail') {\n      return <ErrorCircleFilledIcon />;\n    }\n\n    return (\n      <div className={`${classPrefix}-upload__single-progress`}>\n        <Loading loading={true} size=\"small\" />\n        <span className={`${classPrefix}-upload__single-percent`}>{Math.min(file?.percent || 0, 99)}%</span>\n      </div>\n    );\n  }, [classPrefix, file]);\n\n  // 文本型预览\n  const renderFilePreviewAsText = useCallback(() => {\n    if (!inputName) return;\n    return (\n      <div className={`${classPrefix}-upload__single-display-text ${classPrefix}-display-text--margin`}>\n        <span className={`${classPrefix}-upload__single-name`}>{inputName}</span>\n        {showProgress ? (\n          renderProgress()\n        ) : (\n          <CloseCircleFilledIcon className={`${classPrefix}-upload-icon-delete`} onClick={handleRemove} />\n        )}\n      </div>\n    );\n  }, [classPrefix, inputName, renderProgress, showProgress, handleRemove]);\n\n  return (\n    <div className={fileClass}>\n      {props.children}\n      {display === 'file' && renderFilePreviewAsText()}\n    </div>\n  );\n};\n\nexport default SingleFile;\n"],"names":["SingleFile","props","display","onRemove","file","useConfig","classPrefix","fileClass","classNames","showProgress","status","inputName","name","handleRemove","useCallback","e","index","renderProgress","ErrorCircleFilledIcon","className","Loading","loading","size","Math","min","percent","renderFilePreviewAsText","CloseCircleFilledIcon","onClick","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcMA,aAAkC,SAAlCA,UAAkC,CAACC,KAAD,EAAW;uBACJA,MAArCC;MAAAA,sCAAU;MAAQC,WAAmBF,MAAnBE;MAAUC,OAASH,MAATG;;mBACZC;MAAhBC,yBAAAA;;MAEFC,YAAYC,qBAAcF,2CAAiCA,wCAA8BJ;MAEzFO,eAAeL,QAAQA,KAAKM,MAAL,KAAgB;MAEvCC,YAAYP,iBAAAA,2BAAAA,KAAMQ;MAElBC,eAAeC,YACnB,UAACC,CAAD,EAAO;iEACM;AACTA,MAAAA,GAAAA,CADS;AAETX,MAAAA,MAAAA,IAFS;AAGTY,MAAAA,OAAO;AAHE;KAMb,CAACZ,IAAD,EAAOD,QAAP;MAGIc,iBAAiBH,YAAY,YAAM;QACnC,CAAAV,aAAA,IAAAA,eAAA,YAAAA,KAAMM,MAAN,MAAiB,QAAQ;yDACnBQ,uBAAD;;;uDAIN,OAAD;AAAKC,MAAAA,qBAAcb;AAAnB,mDACGc,SAAD;AAASC,MAAAA,SAAS,IAAlB;AAAwBC,MAAAA,MAAK;AAA7B,oDACC,QAAD;AAAMH,MAAAA,qBAAcb;AAApB,OAA2DiB,KAAKC,GAAL,CAAS,CAAApB,aAAA,IAAAA,eAAA,YAAAA,KAAMqB,OAAN,KAAiB,CAA1B,EAA6B,EAA7B,GAAiC;KAG/F,CAACnB,WAAD,EAAcF,IAAd;MAGGsB,0BAA0BZ,YAAY,YAAM;QAC5C,CAACH;uDAEF,OAAD;AAAKQ,MAAAA,qBAAcb,qDAA2CA;AAA9D,mDACG,QAAD;AAAMa,MAAAA,qBAAcb;AAApB,OAAwDK,YACvDF,eACCQ,+DAECU,uBAAD;AAAuBR,MAAAA,qBAAcb,mCAArC;AAAuEsB,MAAAA,SAASf;AAAhF;KAIL,CAACP,WAAD,EAAcK,SAAd,EAAyBM,cAAzB,EAAyCR,YAAzC,EAAuDI,YAAvD;qDAGA,OAAD;AAAKM,IAAAA,WAAWZ;AAAhB,KACGN,MAAM4B,UACN3B,YAAY,MAAZ,IAAsBwB;;;;;"}

package/es/upload/themes/style/index.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.17.0
+ * tdesign v0.18.2
  * (c) 2021 tdesign
  * @license MIT
  */

package/es/upload/tips.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.17.0
+ * tdesign v0.18.2
  * (c) 2021 tdesign
  * @license MIT
  */