docs: demos changed to data-driven

ant-design · Nov 30, 2022 · 28f07f2 · 28f07f2
1 parent 4879919
commit 28f07f2
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 82 deletions.
diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -25,9 +25,9 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
           <a
             class="ant-anchor-link-title"
             href="#components-anchor-demo-basic"
-            title="item Basic demo"
+            title="Basic demo"
           >
-            item Basic demo
+            Basic demo
           </a>
         </div>
         <div
@@ -61,17 +61,17 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
             >
               Anchor Props
             </a>
-            <div
-              class="ant-anchor-link"
+          </div>
+          <div
+            class="ant-anchor-link"
+          >
+            <a
+              class="ant-anchor-link-title"
+              href="#link-props"
+              title="Link Props"
             >
-              <a
-                class="ant-anchor-link-title"
-                href="#link-props"
-                title="Link Props"
-              >
-                Link Props
-              </a>
-            </div>
+              Link Props
+            </a>
           </div>
         </div>
       </div>

diff --git a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
@@ -25,9 +25,9 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
           <a
             class="ant-anchor-link-title"
             href="#components-anchor-demo-basic"
-            title="item Basic demo"
+            title="Basic demo"
           >
-            item Basic demo
+            Basic demo
           </a>
         </div>
         <div
@@ -61,17 +61,17 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
             >
               Anchor Props
             </a>
-            <div
-              class="ant-anchor-link"
+          </div>
+          <div
+            class="ant-anchor-link"
+          >
+            <a
+              class="ant-anchor-link-title"
+              href="#link-props"
+              title="Link Props"
             >
-              <a
-                class="ant-anchor-link-title"
-                href="#link-props"
-                title="Link Props"
-              >
-                Link Props
-              </a>
-            </div>
+              Link Props
+            </a>
           </div>
         </div>
       </div>

diff --git a/components/anchor/demo/basic.tsx b/components/anchor/demo/basic.tsx
@@ -7,7 +7,7 @@ const App: React.FC = () => (
       {
         key: '1',
         href: '#components-anchor-demo-basic',
-        title: 'item Basic demo',
+        title: 'Basic demo',
       },
       {
         key: '2',
@@ -23,13 +23,11 @@ const App: React.FC = () => (
             key: '4',
             href: '#anchor-props',
             title: 'Anchor Props',
-            children: [
-              {
-                key: '5',
-                href: '#link-props',
-                title: 'Link Props',
-              },
-            ],
+          },
+          {
+            key: '5',
+            href: '#link-props',
+            title: 'Link Props',
           },
         ],
       },

diff --git a/components/anchor/demo/customizeHighlight.tsx b/components/anchor/demo/customizeHighlight.tsx
@@ -1,19 +1,42 @@
 import React from 'react';
 import { Anchor } from 'antd';
 
-const { Link } = Anchor;
-
 const getCurrentAnchor = () => '#components-anchor-demo-static';
 
 const App: React.FC = () => (
-  <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#api" title="API">
-      <Link href="#anchor-props" title="Anchor Props" />
-      <Link href="#link-props" title="Link Props" />
-    </Link>
-  </Anchor>
+  <Anchor
+    affix={false}
+    getCurrentAnchor={getCurrentAnchor}
+    items={[
+      {
+        key: '1',
+        href: '#components-anchor-demo-basic',
+        title: 'Basic demo',
+      },
+      {
+        key: '2',
+        href: '#components-anchor-demo-static',
+        title: 'Static demo',
+      },
+      {
+        key: '3',
+        href: '#api',
+        title: 'API',
+        children: [
+          {
+            key: '4',
+            href: '#anchor-props',
+            title: 'Anchor Props',
+          },
+          {
+            key: '5',
+            href: '#link-props',
+            title: 'Link Props',
+          },
+        ],
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/anchor/demo/onChange.tsx b/components/anchor/demo/onChange.tsx
@@ -1,21 +1,44 @@
 import React from 'react';
 import { Anchor } from 'antd';
 
-const { Link } = Anchor;
-
 const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 
 const App: React.FC = () => (
-  <Anchor affix={false} onChange={onChange}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#api" title="API">
-      <Link href="#anchor-props" title="Anchor Props" />
-      <Link href="#link-props" title="Link Props" />
-    </Link>
-  </Anchor>
+  <Anchor
+    affix={false}
+    onChange={onChange}
+    items={[
+      {
+        key: '1',
+        href: '#components-anchor-demo-basic',
+        title: 'Basic demo',
+      },
+      {
+        key: '2',
+        href: '#components-anchor-demo-static',
+        title: 'Static demo',
+      },
+      {
+        key: '3',
+        href: '#api',
+        title: 'API',
+        children: [
+          {
+            key: '4',
+            href: '#anchor-props',
+            title: 'Anchor Props',
+          },
+          {
+            key: '5',
+            href: '#link-props',
+            title: 'Link Props',
+          },
+        ],
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/anchor/demo/onClick.tsx b/components/anchor/demo/onClick.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Anchor } from 'antd';
 
-const { Link } = Anchor;
-
 const handleClick = (
   e: React.MouseEvent<HTMLElement>,
   link: {
@@ -15,14 +13,39 @@ const handleClick = (
 };
 
 const App: React.FC = () => (
-  <Anchor affix={false} onClick={handleClick}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#api" title="API">
-      <Link href="#anchor-props" title="Anchor Props" />
-      <Link href="#link-props" title="Link Props" />
-    </Link>
-  </Anchor>
+  <Anchor
+    affix={false}
+    onClick={handleClick}
+    items={[
+      {
+        key: '1',
+        href: '#components-anchor-demo-basic',
+        title: 'Basic demo',
+      },
+      {
+        key: '2',
+        href: '#components-anchor-demo-static',
+        title: 'Static demo',
+      },
+      {
+        key: '3',
+        href: '#api',
+        title: 'API',
+        children: [
+          {
+            key: '4',
+            href: '#anchor-props',
+            title: 'Anchor Props',
+          },
+          {
+            key: '5',
+            href: '#link-props',
+            title: 'Link Props',
+          },
+        ],
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/anchor/demo/static.tsx b/components/anchor/demo/static.tsx
@@ -1,17 +1,39 @@
 import React from 'react';
 import { Anchor } from 'antd';
 
-const { Link } = Anchor;
-
 const App: React.FC = () => (
-  <Anchor affix={false}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#api" title="API">
-      <Link href="#anchor-props" title="Anchor Props" />
-      <Link href="#link-props" title="Link Props" />
-    </Link>
-  </Anchor>
+  <Anchor
+    affix={false}
+    items={[
+      {
+        key: '1',
+        href: '#components-anchor-demo-basic',
+        title: 'Basic demo',
+      },
+      {
+        key: '2',
+        href: '#components-anchor-demo-static',
+        title: 'Static demo',
+      },
+      {
+        key: '3',
+        href: '#api',
+        title: 'API',
+        children: [
+          {
+            key: '4',
+            href: '#anchor-props',
+            title: 'Anchor Props',
+          },
+          {
+            key: '5',
+            href: '#link-props',
+            title: 'Link Props',
+          },
+        ],
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/anchor/demo/targetOffset.tsx b/components/anchor/demo/targetOffset.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Anchor } from 'antd';
 
-const { Link } = Anchor;
-
 const App: React.FC = () => {
   const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
 
@@ -11,14 +9,38 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <Anchor targetOffset={targetOffset}>
-      <Link href="#components-anchor-demo-basic" title="Basic demo" />
-      <Link href="#components-anchor-demo-static" title="Static demo" />
-      <Link href="#api" title="API">
-        <Link href="#anchor-props" title="Anchor Props" />
-        <Link href="#link-props" title="Link Props" />
-      </Link>
-    </Anchor>
+    <Anchor
+      targetOffset={targetOffset}
+      items={[
+        {
+          key: '1',
+          href: '#components-anchor-demo-basic',
+          title: 'Basic demo',
+        },
+        {
+          key: '2',
+          href: '#components-anchor-demo-static',
+          title: 'Static demo',
+        },
+        {
+          key: '3',
+          href: '#api',
+          title: 'API',
+          children: [
+            {
+              key: '4',
+              href: '#anchor-props',
+              title: 'Anchor Props',
+            },
+            {
+              key: '5',
+              href: '#link-props',
+              title: 'Link Props',
+            },
+          ],
+        },
+      ]}
+    />
   );
 };