docs: semantic block

ant-design · Oct 24, 2024 · dee7f77 · dee7f77
1 parent aa259dd
commit dee7f77
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 102 deletions.
diff --git a/components/attachments/FileList/Progress.tsx b/components/attachments/FileList/Progress.tsx
@@ -6,15 +6,10 @@ export interface ProgressProps {
   percent: number;
 }
 
-const SVG_SIZE = 100;
-const LINE_WIDTH = 10;
-
 export default function Progress(props: ProgressProps) {
-  const { percent, prefixCls } = props;
+  const { percent } = props;
   const { token } = theme.useToken();
 
-  const progressCls = `${prefixCls}-progress`;
-
   return (
     <AntdProgress
       type="circle"
@@ -24,32 +19,5 @@ export default function Progress(props: ProgressProps) {
       trailColor="rgba(255, 255, 255, 0.3)"
       format={(ptg) => <span style={{ color: '#FFF' }}>{(ptg || 0).toFixed(0)}%</span>}
     />
-    // <svg
-    //   className={progressCls}
-    //   viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`}
-    //   xmlns="http://www.w3.org/2000/svg"
-    // >
-    //   <circle
-    //     className={`${progressCls}-bg`}
-    //     cx="50"
-    //     cy="50"
-    //     r="45"
-    //     fill="none"
-    //     stroke="rgba(255, 255, 255, 0.3)"
-    //     strokeWidth={LINE_WIDTH}
-    //   />
-    //   <circle
-    //     className={`${progressCls}-line`}
-    //     cx="50"
-    //     cy="50"
-    //     r="45"
-    //     fill="none"
-    //     stroke="#FFF"
-    //     strokeWidth={LINE_WIDTH}
-    //     strokeDasharray={`${(percent * Math.PI * 2 * 45) / 100}, 9999`}
-    //     strokeLinecap="round"
-    //     rotate={-90}
-    //   />
-    // </svg>
   );
 }
diff --git a/components/attachments/FileList/index.tsx b/components/attachments/FileList/index.tsx
@@ -1,9 +1,9 @@
 import { LeftOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, type UploadProps } from 'antd';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import { CSSMotionList } from 'rc-motion';
 import React from 'react';
-import type { Attachment } from '..';
+import type { Attachment, AttachmentsProps } from '..';
 import SilentUploader from '../SilentUploader';
 import { AttachmentContext } from '../context';
 import FileListCard from './FileListCard';
@@ -14,10 +14,26 @@ export interface FileListProps {
   onRemove: (item: Attachment) => void;
   overflow?: 'scrollX' | 'scrollY' | 'wrap';
   upload: UploadProps;
+
+  // Semantic
+  listClassName?: string;
+  listStyle?: React.CSSProperties;
+  itemClassName?: string;
+  itemStyle?: React.CSSProperties;
 }
 
 export default function FileList(props: FileListProps) {
-  const { prefixCls, items, onRemove, overflow, upload } = props;
+  const {
+    prefixCls,
+    items,
+    onRemove,
+    overflow,
+    upload,
+    listClassName,
+    listStyle,
+    itemClassName,
+    itemStyle,
+  } = props;
 
   const listCls = `${prefixCls}-list`;
 
@@ -82,13 +98,18 @@ export default function FileList(props: FileListProps) {
   // ================================= Render =================================
   return (
     <div
-      className={classNames(listCls, {
-        [`${listCls}-overflow-${props.overflow}`]: overflow,
-        [`${listCls}-overflow-ping-start`]: pingStart,
-        [`${listCls}-overflow-ping-end`]: pingEnd,
-      })}
+      className={classnames(
+        listCls,
+        {
+          [`${listCls}-overflow-${props.overflow}`]: overflow,
+          [`${listCls}-overflow-ping-start`]: pingStart,
+          [`${listCls}-overflow-ping-end`]: pingEnd,
+        },
+        listClassName,
+      )}
       ref={containerRef}
       onScroll={checkPing}
+      style={listStyle}
     >
       <CSSMotionList
         keys={items.map((item) => ({
@@ -108,8 +129,11 @@ export default function FileList(props: FileListProps) {
               prefixCls={listCls}
               item={item}
               onRemove={onRemove}
-              className={motionCls}
-              style={motionStyle}
+              className={classnames(motionCls, itemClassName)}
+              style={{
+                ...motionStyle,
+                ...itemStyle,
+              }}
             />
           );
         }}

diff --git a/components/attachments/PlaceholderUploader.tsx b/components/attachments/PlaceholderUploader.tsx
@@ -15,10 +15,12 @@ export interface PlaceholderProps {
   prefixCls: string;
   placeholder?: PlaceholderType;
   upload?: UploadProps;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 function Placeholder(props: PlaceholderProps, ref: React.Ref<HTMLDivElement>) {
-  const { prefixCls, placeholder = {}, upload } = props;
+  const { prefixCls, placeholder = {}, upload, className, style } = props;
 
   const placeholderCls = `${prefixCls}-placeholder`;
 
@@ -63,15 +65,20 @@ function Placeholder(props: PlaceholderProps, ref: React.Ref<HTMLDivElement>) {
 
   return (
     <div
-      className={classNames(placeholderCls, {
-        [`${placeholderCls}-drag-in`]: dragIn,
-        [`${placeholderCls}-disabled`]: disabled,
-      })}
+      className={classNames(
+        placeholderCls,
+        {
+          [`${placeholderCls}-drag-in`]: dragIn,
+          [`${placeholderCls}-disabled`]: disabled,
+        },
+        className,
+      )}
       onDragEnter={onDragEnter}
       onDragLeave={onDragLeave}
       onDrop={onDrop}
       aria-hidden={disabled}
       ref={ref}
+      style={style}
     >
       <Upload.Dragger
         showUploadList={false}

diff --git a/components/attachments/__tests__/drag.test.tsx b/components/attachments/__tests__/drag.test.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import Attachments, { type AttachmentsProps } from '..';
-import mountTest from '../../../tests/shared/mountTest';
-import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { fireEvent, render } from '../../../tests/utils';
 
 describe('attachments.drag', () => {
   beforeAll(() => {

diff --git a/components/attachments/demo/_semantic.tsx b/components/attachments/demo/_semantic.tsx
@@ -1,56 +1,57 @@
-import { BulbOutlined, InfoCircleOutlined, RocketOutlined } from '@ant-design/icons';
-import { Prompts, type PromptsProps } from '@ant-design/x';
+import { CloudUploadOutlined } from '@ant-design/icons';
+import { Attachments, type AttachmentsProps } from '@ant-design/x';
+import { Divider, Flex } from 'antd';
 import React from 'react';
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
 
-const locales = {
-  cn: { title: '标题容器', list: '列表容器', item: '列表项', itemContent: '列表项内容' },
+const placeholderLocales = {
+  cn: { placeholder: '占位符' },
+  en: {
+    placeholder: 'Placeholder',
+  },
+};
+const withItemLocales = {
+  cn: { list: '列表容器', item: '列表项' },
   en: {
-    title: 'Title container',
     list: 'List container',
     item: 'List item',
-    itemContent: 'List item content',
   },
 };
 
-const items: PromptsProps['items'] = [
-  {
-    key: '1',
-    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
-    label: 'Ignite Your Creativity',
-    description: 'Got any sparks for a new project?',
-    disabled: false,
-  },
-  {
-    key: '2',
-    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
-    label: 'Uncover Background Info',
-    description: 'Help me understand the background of this topic.',
-    disabled: false,
-  },
-  {
-    key: '3',
-    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
-    label: 'Efficiency Boost Battle',
-    description: 'How can I work faster and better?',
-    disabled: false,
-  },
-];
+const items: AttachmentsProps['items'] = Array.from({ length: 3 }).map((_, index) => ({
+  uid: String(index),
+  name: `file-${index}.jpg`,
+  status: 'done',
+  thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+}));
 
 const App: React.FC = () => {
-  const [locale] = useLocale(locales);
+  const [placeholderLocale] = useLocale(placeholderLocales);
+  const [withItemLocale] = useLocale(withItemLocales);
+
   return (
-    <SemanticPreview
-      semantics={[
-        { name: 'title', desc: locale.title },
-        { name: 'list', desc: locale.list },
-        { name: 'item', desc: locale.item },
-        { name: 'itemContent', desc: locale.itemContent },
-      ]}
-    >
-      <Prompts title="✨ Inspirational Sparks and Marvelous Tips" items={items} />
-    </SemanticPreview>
+    <Flex vertical>
+      <SemanticPreview semantics={[{ name: 'placeholder', desc: placeholderLocale.placeholder }]}>
+        <Attachments
+          placeholder={{
+            icon: <CloudUploadOutlined />,
+            title: 'Upload File',
+            description: 'Drag or click to upload file.',
+          }}
+        />
+      </SemanticPreview>
+      <Divider style={{ margin: 0, padding: 0 }} />
+      <SemanticPreview
+        semantics={[
+          { name: 'list', desc: withItemLocale.list },
+          { name: 'item', desc: withItemLocale.item },
+        ]}
+      >
+        <Attachments items={items} />
+      </SemanticPreview>
+    </Flex>
   );
 };
 

diff --git a/components/attachments/demo/placeholder.tsx b/components/attachments/demo/placeholder.tsx
@@ -1,6 +1,6 @@
 import { CloudUploadOutlined } from '@ant-design/icons';
 import { Attachments, type AttachmentsProps } from '@ant-design/x';
-import { App, Button, Flex, GetProp, Result, theme } from 'antd';
+import { Button, Flex, GetProp, Result, theme } from 'antd';
 import React from 'react';
 
 const presetFiles: AttachmentsProps['items'] = [
@@ -65,8 +65,6 @@ const getPlaceholderFn = (
 };
 
 const Demo = () => {
-  const { message } = App.useApp();
-
   const { token } = theme.useToken();
 
   const [items, setItems] = React.useState<GetProp<AttachmentsProps, 'items'>>(presetFiles);
@@ -137,8 +135,4 @@ const Demo = () => {
   );
 };
 
-export default () => (
-  <App>
-    <Demo />
-  </App>
-);
+export default Demo;
diff --git a/components/attachments/index.tsx b/components/attachments/index.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
 
-import classNames from 'classnames';
 import { useEvent, useMergedState } from 'rc-util';
 import DropArea from './DropArea';
 import FileList, { type FileListProps } from './FileList';
@@ -14,7 +13,7 @@ import SilentUploader from './SilentUploader';
 import { AttachmentContext } from './context';
 import useStyle from './style';
 
-export type SemanticType = 'list' | 'item' | 'itemContent' | 'title';
+export type SemanticType = 'list' | 'item' | 'placeholder';
 
 export type Attachment = GetProp<UploadProps, 'fileList'>[number];
 
@@ -23,9 +22,13 @@ export interface AttachmentsProps extends Omit<UploadProps, 'fileList'> {
 
   rootClassName?: string;
   rootStyle?: React.CSSProperties;
+
   style?: React.CSSProperties;
   className?: string;
 
+  classNames?: Partial<Record<SemanticType, string>>;
+  styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+
   children?: React.ReactElement;
 
   disabled?: boolean;
@@ -53,6 +56,8 @@ const Attachments: React.FC<AttachmentsProps> = (props) => {
     onChange,
     overflow,
     disabled,
+    classNames = {},
+    styles = {},
     ...uploadProps
   } = props;
 
@@ -64,6 +69,8 @@ const Attachments: React.FC<AttachmentsProps> = (props) => {
   // ===================== Component Config =========================
   const contextConfig = useXComponentConfig('attachments');
 
+  const { classNames: contextClassNames, styles: contextStyles } = contextConfig;
+
   // ============================= Ref =============================
   const containerRef = React.useRef<HTMLDivElement>(null);
 
@@ -107,6 +114,11 @@ const Attachments: React.FC<AttachmentsProps> = (props) => {
         placeholder={placeholderContent}
         upload={mergedUploadProps}
         prefixCls={prefixCls}
+        className={classnames(contextClassNames.placeholder, classNames.placeholder)}
+        style={{
+          ...contextStyles.placeholder,
+          ...styles.placeholder,
+        }}
       />
     );
   };
@@ -120,7 +132,7 @@ const Attachments: React.FC<AttachmentsProps> = (props) => {
         <DropArea
           getDropContainer={getDropContainer}
           prefixCls={prefixCls}
-          className={classNames(cssinjsCls, rootClassName)}
+          className={classnames(cssinjsCls, rootClassName)}
         >
           {getPlaceholderNode('drop')}
         </DropArea>
@@ -154,6 +166,16 @@ const Attachments: React.FC<AttachmentsProps> = (props) => {
             onRemove={onItemRemove}
             overflow={overflow}
             upload={mergedUploadProps}
+            listClassName={classnames(contextClassNames.list, classNames.list)}
+            listStyle={{
+              ...contextStyles.list,
+              ...styles.list,
+            }}
+            itemClassName={classnames(contextClassNames.item, classNames.item)}
+            itemStyle={{
+              ...contextStyles.item,
+              ...styles.item,
+            }}
           />
         ) : (
           getPlaceholderNode('inline')