Attachments: Support Attachements.FileCard component & customize desc…

…ription (#182) * feat: bach of update * test: update snapshot * chore: fix lint * chore: replace icon * chore: fix lint
ant-design · Nov 6, 2024 · 82e361c · 82e361c
1 parent c1a217c
commit 82e361c
Show file tree

Hide file tree

Showing 18 changed files with 1,768 additions and 199 deletions.
diff --git a/components/attachments/FileList/AudioIcon.tsx b/components/attachments/FileList/AudioIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function AudioIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>audio</title>
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M10.7315824,7.11216117 C10.7428131,7.15148751 10.7485063,7.19218979 10.7485063,7.23309113 L10.7485063,8.07742614 C10.7484199,8.27364959 10.6183424,8.44607275 10.4296853,8.50003683 L8.32984514,9.09986306 L8.32984514,11.7071803 C8.32986605,12.5367078 7.67249692,13.217028 6.84345686,13.2454634 L6.79068592,13.2463395 C6.12766108,13.2463395 5.53916361,12.8217001 5.33010655,12.1924966 C5.1210495,11.563293 5.33842118,10.8709227 5.86959669,10.4741173 C6.40077221,10.0773119 7.12636292,10.0652587 7.67042486,10.4442027 L7.67020842,7.74937024 L7.68449368,7.74937024 C7.72405122,7.59919041 7.83988806,7.48101083 7.98924584,7.4384546 L10.1880418,6.81004755 C10.42156,6.74340323 10.6648954,6.87865515 10.7315824,7.11216117 Z M9.60714286,1.31785714 L12.9678571,4.67857143 L9.60714286,4.67857143 L9.60714286,1.31785714 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/components/attachments/FileList/FileListCard.tsx b/components/attachments/FileList/FileListCard.tsx
@@ -9,17 +9,21 @@ import {
   FileWordFilled,
   FileZipFilled,
 } from '@ant-design/icons';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import React from 'react';
 import type { Attachment } from '..';
+import { useXProviderContext } from '../../x-provider';
 import { AttachmentContext } from '../context';
+import useStyle from '../style';
 import { previewImage } from '../util';
+import AudioIcon from './AudioIcon';
 import Progress from './Progress';
+import VideoIcon from './VideoIcon';
 
 export interface FileListCardProps {
-  prefixCls: string;
+  prefixCls?: string;
   item: Attachment;
-  onRemove: (item: Attachment) => void;
+  onRemove?: (item: Attachment) => void;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -70,6 +74,16 @@ const PRESET_FILE_ICONS: {
     color: '#fab714',
     ext: ['zip', 'rar', '7z', 'tar', 'gz'],
   },
+  {
+    icon: <VideoIcon />,
+    color: '#ff4d4f',
+    ext: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'],
+  },
+  {
+    icon: <AudioIcon />,
+    color: '#8c8c8c',
+    ext: ['mp3', 'wav', 'flac', 'ape', 'aac', 'ogg'],
+  },
 ];
 
 function matchExt(suffix: string, ext: string[]) {
@@ -90,11 +104,20 @@ function getSize(size: number) {
 }
 
 function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>) {
-  const { prefixCls, item, onRemove, className, style } = props;
-  const { disabled } = React.useContext(AttachmentContext);
+  const { prefixCls: customizePrefixCls, item, onRemove, className, style } = props;
+  const context = React.useContext(AttachmentContext);
+  const { disabled } = context || {};
 
-  const { name, size, percent, status = 'done' } = item;
-  const cardCls = `${prefixCls}-card`;
+  const { name, size, percent, status = 'done', description } = item;
+
+  // ============================= Prefix =============================
+  const { getPrefixCls } = useXProviderContext();
+
+  const prefixCls = getPrefixCls('attachment', customizePrefixCls);
+  const cardCls = `${prefixCls}-list-card`;
+
+  // ============================= Style ==============================
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   // ============================== Name ==============================
   const [namePrefix, nameSuffix] = React.useMemo(() => {
@@ -107,6 +130,10 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
 
   // ============================== Desc ==============================
   const desc = React.useMemo(() => {
+    if (description) {
+      return description;
+    }
+
     if (status === 'uploading') {
       return `${percent || 0}%`;
     }
@@ -150,8 +177,10 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
 
   // ============================= Render =============================
   let content: React.ReactNode = null;
+  const previewUrl = item.thumbUrl || item.url || previewImg;
+  const isImgPreview = isImg && previewUrl;
 
-  if (isImg) {
+  if (isImgPreview) {
     // Preview Image style
     content = (
       <>
@@ -191,24 +220,26 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
     );
   }
 
-  return (
+  return wrapCSSVar(
     <div
-      className={classNames(
+      className={classnames(
         cardCls,
         {
           [`${cardCls}-status-${status}`]: status,
-          [`${cardCls}-type-preview`]: isImg,
-          [`${cardCls}-type-overview`]: !isImg,
+          [`${cardCls}-type-preview`]: isImgPreview,
+          [`${cardCls}-type-overview`]: !isImgPreview,
         },
         className,
+        hashId,
+        cssVarCls,
       )}
       style={style}
       ref={ref}
     >
       {content}
 
       {/* Remove Icon */}
-      {!disabled && (
+      {!disabled && onRemove && (
         <button
           type="button"
           className={`${cardCls}-remove`}
@@ -219,7 +250,7 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
           <CloseCircleFilled />
         </button>
       )}
-    </div>
+    </div>,
   );
 }
 

diff --git a/components/attachments/FileList/VideoIcon.tsx b/components/attachments/FileList/VideoIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function VideoIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>video</title>
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M12.9678571,4.67857143 L9.60714286,1.31785714 L9.60714286,4.67857143 L12.9678571,4.67857143 Z M10.5379461,10.3101106 L6.68957555,13.0059749 C6.59910784,13.0693494 6.47439406,13.0473861 6.41101953,12.9569184 C6.3874624,12.9232903 6.37482581,12.8832269 6.37482581,12.8421686 L6.37482581,7.45043999 C6.37482581,7.33998304 6.46436886,7.25043999 6.57482581,7.25043999 C6.61588409,7.25043999 6.65594753,7.26307658 6.68957555,7.28663371 L10.5379461,9.98249803 C10.6284138,10.0458726 10.6503772,10.1705863 10.5870027,10.2610541 C10.5736331,10.2801392 10.5570312,10.2967411 10.5379461,10.3101106 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/components/attachments/FileList/index.tsx b/components/attachments/FileList/index.tsx
@@ -126,7 +126,7 @@ export default function FileList(props: FileListProps) {
           return (
             <FileListCard
               key={key}
-              prefixCls={listCls}
+              prefixCls={prefixCls}
               item={item}
               onRemove={onRemove}
               className={classnames(motionCls, itemClassName)}