docs: items semantic

.dumi/components/SemanticPreview/index.tsx

@@ -54,20 +54,24 @@ function getSemanticCells(semanticPath: string) {
   return semanticPath.split('.');
 }
 
-function HighlightExample(props: { componentName: string; semanticName: string }) {
+function HighlightExample(props: {
-  const { componentName, semanticName } = props;
+  componentName: string;
+  semanticName: string;
+  itemsAPI?: string;
+}) {
+  const { componentName, semanticName, itemsAPI } = props;
 
   const highlightCode = React.useMemo(() => {
     const classNames = set({}, getSemanticCells(semanticName), `my-classname`);
     const styles = set({}, getSemanticCells(semanticName), { color: 'red' });
 
-    function format(obj: object) {
+    function format(obj: object, offset = 1) {
       const str = JSON.stringify(obj, null, 2);
       return (
         str
           // Add space
           .split('\n')
-          .map((line) => `  ${line}`)
+          .map((line) => `${'  '.repeat(offset)}${line}`)
           .join('\n')
           .trim()
           // Replace quotes
@@ -77,11 +81,25 @@ function HighlightExample(props: { componentName: string; semanticName: string }
       );
     }
 
-    const code = `
+    let code: string;
+
+    if (itemsAPI) {
+      // itemsAPI with array
+      code = `
+<${componentName}
+  ${itemsAPI}={[{
+    classNames: ${format(classNames, 2)},
+    styles: ${format(styles, 2)},
+  }]}
+/>`.trim();
+    } else {
+      // itemsAPI is not provided
+      code = `
 <${componentName}
   classNames={${format(classNames)}}
   styles={${format(styles)}}
 />`.trim();
+    }
 
     return Prism.highlight(code, Prism.languages.javascript, 'jsx');
   }, [componentName, semanticName]);
@@ -95,13 +113,21 @@ function HighlightExample(props: { componentName: string; semanticName: string }
 export interface SemanticPreviewProps {
   componentName: string;
   semantics: { name: string; desc: string; version?: string }[];
+  itemsAPI?: string;
   children: React.ReactElement<any>;
   height?: number;
   padding?: false;
 }
 
 const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
-  const { semantics = [], children, height, padding, componentName = 'Component' } = props;
+  const {
+    semantics = [],
+    children,
+    height,
+    padding,
+    componentName = 'Component',
+    itemsAPI,
+  } = props;
   const { token } = theme.useToken();
 
   // ======================= Semantic =======================
@@ -199,6 +225,7 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
                                 <HighlightExample
                                   componentName={componentName}
                                   semanticName={semantic.name}
+                                  itemsAPI={itemsAPI}
                                 />
                               </code>
                             </pre>

components/timeline/demo/_semantic.tsx

@@ -41,10 +41,10 @@ const App: React.FC = () => {
         { name: 'item', desc: locale.item },
         { name: 'itemWrapper', desc: locale.itemWrapper },
         { name: 'itemIcon', desc: locale.itemIcon },
+        { name: 'itemSection', desc: locale.itemSection },
         { name: 'itemHeader', desc: locale.itemHeader },
         { name: 'itemTitle', desc: locale.itemTitle },
         // { name: 'itemSubtitle', desc: locale.itemSubtitle },
-        { name: 'itemSection', desc: locale.itemSection },
         { name: 'itemContent', desc: locale.itemContent },
         { name: 'itemRail', desc: locale.itemRail },
       ]}

components/timeline/demo/_semantic_item.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Timeline } from 'antd';
+
+import SemanticPreview, {
+  SemanticPreviewInjectionProps,
+} from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根元素',
+    wrapper: '节点内裹元素',
+    icon: '节点图标元素',
+    header: '节点头部元素',
+    title: '节点标题元素',
+    section: '节点区域元素',
+    content: '节点内容元素',
+    rail: '节点连接线元素',
+  },
+  en: {
+    root: 'Root element',
+    wrapper: 'Item wrapper element',
+    icon: 'Item icon element',
+    header: 'Item header element',
+    title: 'Item title element',
+    section: 'Item section element',
+    content: 'Item content element',
+    rail: 'Item rail element',
+  },
+};
+
+const Block = ({ classNames }: SemanticPreviewInjectionProps) => {
+  return (
+    <Timeline
+      items={[
+        {
+          title: '2015-09-01 09:12:11',
+          content: 'Solve initial network problems',
+          classNames,
+        },
+        {
+          title: '2015-09-01 11:11:11',
+          content: 'Technical testing',
+        },
+      ]}
+    />
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      componentName="Timeline"
+      itemsAPI={`items`}
+      semantics={[
+        { name: 'root', desc: locale.root },
+        { name: 'wrapper', desc: locale.wrapper },
+        { name: 'icon', desc: locale.icon },
+        { name: 'section', desc: locale.section },
+        { name: 'header', desc: locale.header },
+        { name: 'title', desc: locale.title },
+        { name: 'content', desc: locale.content },
+        { name: 'rail', desc: locale.rail },
+      ]}
+    >
+      <Block />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/timeline/index.en-US.md

@@ -63,6 +63,10 @@ Node of timeline.
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
+## Semantic DOM - item
+
+<code src="./demo/_semantic_item.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Timeline"></ComponentTokenTable>

components/timeline/index.zh-CN.md

@@ -63,6 +63,10 @@ demo:
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
+## Semantic DOM - item
+
+<code src="./demo/_semantic_item.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Timeline"></ComponentTokenTable>