fix(upload): fix progress percent, support uploadPastedFiles (#2671)

* fix(Table): filter icon can not highlight with number 0 * feat(Upload): support uploadPastedFiles * feat(Upload): support hide file list with fileListDisplay * feat(Upload): 图片上传风格，补充禁用状态颜色变化 * feat(fileListDisplay): 补充完整的参数 * fix(upload): fix some bugs and support some features * fix(upload): import error * test: update snapshots * chore: update common --------- Co-authored-by: Uyarn <uyarnchen@gmail.com>
Tencent · Dec 28, 2023 · f0abbe7 · f0abbe7
1 parent c3052ef
commit f0abbe7
Show file tree

Hide file tree

Showing 21 changed files with 1,351 additions and 272 deletions.
diff --git a/src/_util/parseTNode.ts b/src/_util/parseTNode.ts
@@ -15,7 +15,7 @@ export default function parseTNode(
     node = renderNode(renderParams);
   } else if (renderNode === true) {
     node = defaultNode;
-  } else {
+  } else if (renderNode !== null) {
     node = renderNode ?? defaultNode;
   }
   return node as ReactNode;

diff --git a/src/image-viewer/ImageViewerModal.tsx b/src/image-viewer/ImageViewerModal.tsx
@@ -232,7 +232,7 @@ type ImageViewerHeaderProps = {
 
 function OneImagePreview({ image, classPrefix }: { image: ImageInfo; classPrefix: string }) {
   const { previewUrl } = useImagePreviewUrl(image.thumbnail || image.mainImage);
-  return <Image alt="" src={previewUrl} className={`${classPrefix}-image-viewer__header-img`} />;
+  return <Image alt="" error="" src={previewUrl} className={`${classPrefix}-image-viewer__header-img`} />;
 }
 
 const ImageViewerHeader = (props: ImageViewerHeaderProps) => {

diff --git a/src/space/Space.tsx b/src/space/Space.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, forwardRef, useMemo } from 'react';
+import React, { CSSProperties, ReactNode, forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 import { isFragment } from 'react-is';
 import useConfig from '../hooks/useConfig';
@@ -37,6 +37,8 @@ const toArray = (children: React.ReactNode): React.ReactElement[] => {
   return ret;
 };
 
+const EMPTY_NODE: ReactNode[] = ['', false, null, undefined];
+
 const Space = forwardRef((props: SpaceProps, ref: React.Ref<HTMLDivElement>) => {
   const { className, style, align, direction, size, breakLine, separator } = props;
   const { classPrefix } = useConfig();
@@ -78,7 +80,7 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref<HTMLDivElement>) =>
       const showSeparator = index + 1 !== childCount && separator;
       return (
         <>
-          <div className={`${classPrefix}-space-item`}>{child}</div>
+          {EMPTY_NODE.includes(child) ? null : <div className={`${classPrefix}-space-item`}>{child}</div>}
           {showSeparator && <div className={`${classPrefix}-space-item-separator`}>{separator}</div>}
         </>
       );

diff --git a/src/table/FilterController.tsx b/src/table/FilterController.tsx
@@ -133,9 +133,10 @@ export default function TableFilterController(props: TableFilterControllerProps)
   const defaultFilterIcon = t(locale.filterIcon) || <FilterIcon />;
   const filterValue = tFilterValue?.[column.colKey];
   const isObjectTrue = typeof filterValue === 'object' && !isEmpty(filterValue);
-  const isValueTrue = filterValue && typeof filterValue !== 'object';
+  // false is a valid filter value
+  const isValueExist = ![null, undefined, ''].includes(filterValue) && typeof filterValue !== 'object';
   return (
-    <div className={classNames([tableFilterClasses.icon, { [isFocusClass]: isObjectTrue || isValueTrue }])}>
+    <div className={classNames([tableFilterClasses.icon, { [isFocusClass]: isObjectTrue || isValueExist }])}>
       <Popup
         // attach={primaryTableElement ? () => primaryTableElement : undefined}
         visible={filterPopupVisible}

diff --git a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
@@ -906,9 +906,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
                         />
                       </svg>
                     </div>
-                    <div
-                      class="t-space-item"
-                    />
                   </div>
                 </div>
               </div>
@@ -934,8 +931,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               </div>
             </div>
             <p
-              class="t-upload__card-name"
+              class="t-upload__card-name t-upload__flow-status"
             >
+              <svg
+                class="t-icon t-icon-check-circle-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
               img.txt
             </p>
           </li>
@@ -976,9 +985,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
                         />
                       </svg>
                     </div>
-                    <div
-                      class="t-space-item"
-                    />
                   </div>
                 </div>
               </div>
@@ -1027,8 +1033,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               </div>
             </div>
             <p
-              class="t-upload__card-name"
+              class="t-upload__card-name t-upload__flow-status"
             >
+              <svg
+                class="t-icon t-icon-check-circle-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
               img1.txt
             </p>
           </li>
@@ -1069,9 +1087,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
                         />
                       </svg>
                     </div>
-                    <div
-                      class="t-space-item"
-                    />
                   </div>
                 </div>
               </div>
@@ -1120,9 +1135,21 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               </div>
             </div>
             <p
-              class="t-upload__card-name"
+              class="t-upload__card-name t-upload__flow-status"
             >
-              待上传
+              <svg
+                class="t-icon t-icon-time-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 23a11 11 0 110-22 11 11 0 010 22zm1-17.5h-2v6.91l4 4L16.41 15 13 11.59V5.5z"
+                  fill="currentColor"
+                />
+              </svg>
+              img2.txt
             </p>
           </li>
           <li
@@ -1153,29 +1180,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               <div
                 class="t-upload__card-mask"
               >
-                <span
-                  class="t-upload__card-mask-item"
-                >
-                  <svg
-                    class="t-icon t-icon-browse"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <g
-                      clip-path="url(#clip0_8726_7319)"
-                    >
-                      <path
-                        d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
-                        fill="currentColor"
-                      />
-                    </g>
-                  </svg>
-                  <span
-                    class="t-upload__card-mask-item-divider"
-                  />
-                </span>
                 <span
                   class="t-upload__card-mask-item t-upload__delete"
                 >
@@ -1195,7 +1199,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               </div>
             </div>
             <p
-              class="t-upload__card-name"
+              class="t-upload__card-name t-upload__flow-status"
             >
               img3.txt
             </p>
@@ -1239,29 +1243,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               <div
                 class="t-upload__card-mask"
               >
-                <span
-                  class="t-upload__card-mask-item"
-                >
-                  <svg
-                    class="t-icon t-icon-browse"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <g
-                      clip-path="url(#clip0_8726_7319)"
-                    >
-                      <path
-                        d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
-                        fill="currentColor"
-                      />
-                    </g>
-                  </svg>
-                  <span
-                    class="t-upload__card-mask-item-divider"
-                  />
-                </span>
                 <span
                   class="t-upload__card-mask-item t-upload__delete"
                 >
@@ -1281,7 +1262,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
               </div>
             </div>
             <p
-              class="t-upload__card-name"
+              class="t-upload__card-name t-upload__flow-status"
             >
               img4.txt
             </p>

diff --git a/src/upload/_example/base.jsx b/src/upload/_example/base.jsx
@@ -174,8 +174,8 @@ export default function UploadExample() {
         <Upload
           ref={uploadRef1}
           files={files1}
-          onChange={(val) => {
-            console.log(val);
+          onChange={(val, ctx) => {
+            console.log(val, ctx);
             setFiles1(val);
           }}
           action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"

diff --git a/src/upload/_example/file-flow-list.jsx b/src/upload/_example/file-flow-list.jsx
@@ -28,6 +28,13 @@ export default function FileFlowList() {
     }
   };
 
+  const formatResponse = (res) => {
+    if (!res) {
+      return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' };
+    }
+    return res;
+  };
+
   return (
     <Space direction="vertical">
       <Space breakLine>
@@ -63,6 +70,7 @@ export default function FileFlowList() {
         isBatchUpload={isBatchUpload}
         allowUploadDuplicateFile={allowUploadDuplicateFile}
         onValidate={onValidate}
+        formatResponse={formatResponse}
       />
     </Space>
   );

diff --git a/src/upload/_example/img-flow-list.jsx b/src/upload/_example/img-flow-list.jsx
@@ -1,17 +1,43 @@
 import React, { useState } from 'react';
-import { Upload, Space, MessagePlugin, Switch } from 'tdesign-react';
+import { Upload, Space, MessagePlugin, Switch, Checkbox, Divider } from 'tdesign-react';
 
 const ABRIDGE_NAME = [4, 6];
 
 export default function TUploadImageFlow() {
   const [autoUpload, setAutoUpload] = useState(false);
+  const [showImageFileName, setShowImageFileName] = useState(true);
+  const [showUploadButton, setShowUploadButton] = useState(true);
   const [files, setFiles] = useState([
     { url: 'https://tdesign.gtimg.com/demo/demo-image-1.png', status: 'success', name: 'demo-image-1.png' },
     { url: 'https://tdesign.gtimg.com/site/avatar.jpg', status: 'success', name: 'avatar.jpg' },
   ]);
    // eslint-disable-next-line
   const [files2, setFiles2] = useState([]);
 
+  const staticFiles = [
+    {
+      url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+      name: 'loading.svg',
+      status: 'success',
+    },
+    {
+      url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+      name: 'loading.svg',
+      status: 'waiting',
+    },
+    {
+      // url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+      name: 'loading.svg',
+      status: 'progress',
+      percent: 10,
+    },
+    {
+      url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+      name: 'loading.svg',
+      status: 'fail',
+    },
+  ];  
+
   // 示例代码：自定义上传方法，一个请求上传一个文件
   // eslint-disable-next-line
   const requestMethod1 = () => {
@@ -58,10 +84,18 @@ export default function TUploadImageFlow() {
   // 因接口返回的 url 是同一个，所以看到的图片都是一个
   return (
     <Space direction="vertical">
-      <div>
-        是否自动上传：
-        <Switch value={autoUpload} onChange={setAutoUpload} />
-      </div>
+      <Space>
+        <div>
+          AutoUpload
+          <Switch value={autoUpload} onChange={setAutoUpload} />
+        </div>
+        <Checkbox value={showImageFileName} onChange={setShowImageFileName}>
+          Show Image Name
+        </Checkbox>
+        <Checkbox value={showUploadButton} onChange={setShowUploadButton}>
+          Show UploadButton Or CancelUploadButton
+        </Checkbox>
+      </Space>
 
       <br />
 
@@ -79,6 +113,9 @@ export default function TUploadImageFlow() {
         autoUpload={autoUpload}
         max={8}
         abridgeName={ABRIDGE_NAME}
+        showImageFileName={showImageFileName}
+        uploadButton={showUploadButton ? {} : null}
+        cancelUploadButton={showUploadButton ? { theme: 'default', content: '取消上传' } : null}
         onValidate={onValidate}
       />
 
@@ -97,6 +134,16 @@ export default function TUploadImageFlow() {
         uploadAllFilesInOneRequest={true}
         onValidate={onValidate}
       /> */}
+
+      <br />
+      <Divider align="left">Different Status Images</Divider>
+
+      <Upload
+        files={staticFiles}
+        theme="image-flow"
+        showImageFileName={showImageFileName}
+        className="static-image-list"
+      ></Upload>
     </Space>
   );
 }
diff --git a/src/upload/defaultProps.ts b/src/upload/defaultProps.ts
@@ -14,11 +14,12 @@ export const uploadDefaultProps: TdUploadProps = {
   method: 'POST',
   multiple: false,
   name: 'file',
+  showImageFileName: true,
   showThumbnail: false,
   showUploadProgress: true,
   theme: 'file',
   uploadAllFilesInOneRequest: false,
-  uploadPastedFiles: false,
+  uploadPastedFiles: true,
   useMockProgress: true,
   withCredentials: false,
 };