docs: feat components TS demo (ant-design#34742)

* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
smwhr · May 19, 2022 · 7fd093b · 7fd093b
1 parent e5b09aa
commit 7fd093b
Show file tree

Hide file tree

Showing 655 changed files with 7,545 additions and 5,719 deletions.
diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
@@ -17,7 +17,7 @@ The simplest usage.
 import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [top, setTop] = useState(10);
   const [bottom, setBottom] = useState(10);
 
@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/affix/demo/debug.md b/components/affix/demo/debug.md
@@ -18,8 +18,9 @@ DEBUG
 import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [top, setTop] = useState(10);
+
   return (
     <div style={{ height: 10000 }}>
       <div>Top</div>
@@ -35,5 +36,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md
@@ -14,11 +14,14 @@ title:
 Callback with affixed state.
 
 ```tsx
+import React from 'react';
 import { Affix, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
   </Affix>
 );
+
+export default App;
 ```
diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md
@@ -17,8 +17,9 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
 import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
   return (
     <div className="scrollable-container" ref={setContainer}>
       <div className="background">
@@ -30,7 +31,7 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 <style>

diff --git a/components/alert/demo/action.md b/components/alert/demo/action.md
@@ -17,7 +17,7 @@ Custom action.
 import React from 'react';
 import { Alert, Button, Space } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Success Tips"
@@ -71,6 +71,8 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
 
 <style>

diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
@@ -15,9 +15,10 @@ title:
 Display Alert as a banner at top of page.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Warning text" banner />
     <br />
@@ -32,4 +33,6 @@ export default () => (
     <Alert type="error" message="Error text" banner />
   </>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
@@ -14,9 +14,12 @@ title:
 The simplest usage for short messages.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => <Alert message="Success Text" type="success" />;
+const App: React.FC = () => <Alert message="Success Text" type="success" />;
+
+export default App;
 ```
 
 <style>

diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
@@ -14,13 +14,14 @@ title:
 To show close button.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -37,4 +38,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
@@ -14,7 +14,10 @@ title:
 Replace the default icon with customized text.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => <Alert message="Info Text" type="info" closeText="Close Now" />;
+const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
+
+export default App;
 ```
diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md
@@ -15,12 +15,13 @@ title:
 A relevant icon makes information clearer and more friendly.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
 const icon = <SmileOutlined />;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert icon={icon} message="showIcon = false" type="success" />
     <Alert icon={icon} message="Success Tips" type="success" showIcon />
@@ -57,4 +58,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
@@ -14,9 +14,10 @@ title:
 Additional description for alert message.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Success Text"
@@ -40,4 +41,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/error-boundary.md b/components/alert/demo/error-boundary.md
@@ -34,9 +34,11 @@ const ThrowError: React.FC = () => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <ErrorBoundary>
     <ThrowError />
   </ErrorBoundary>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
@@ -14,9 +14,10 @@ title:
 A relevant icon will make information clearer and more friendly.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Success Tips" type="success" showIcon />
     <Alert message="Informational Notes" type="info" showIcon />
@@ -49,4 +50,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/loop-banner.md b/components/alert/demo/loop-banner.md
@@ -14,11 +14,12 @@ title:
 Show a loop banner by using with [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) or [react-fast-marquee](https://npmjs.com/package/react-fast-marquee).
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 import { TextLoop } from 'react-text-loop-next';
 import Marquee from 'react-fast-marquee';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       banner
@@ -41,4 +42,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/alert/demo/smooth-closed.md b/components/alert/demo/smooth-closed.md
@@ -19,9 +19,11 @@ import { Alert } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(true);
+
   const handleClose = () => {
     setVisible(false);
   };
+
   return (
     <div>
       {visible ? (

diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
@@ -14,16 +14,19 @@ title:
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Success Text" type="success" />
     <Alert message="Info Text" type="info" />
     <Alert message="Warning Text" type="warning" />
     <Alert message="Error Text" type="error" />
   </>
 );
+
+export default App;
 ```
 
 <style>

diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md
@@ -14,11 +14,12 @@ title:
 The simplest usage.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-export default () => (
+const App: React.FC = () => (
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,6 +29,8 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```
 
 <style>

diff --git a/components/anchor/demo/customizeHighlight.md b/components/anchor/demo/customizeHighlight.md
@@ -14,13 +14,14 @@ title:
 Customize the anchor highlight.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
 const getCurrentAnchor = () => '#components-anchor-demo-static';
 
-export default () => (
+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" />
@@ -30,4 +31,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```
diff --git a/components/anchor/demo/onChange.md b/components/anchor/demo/onChange.md
@@ -14,6 +14,7 @@ title:
 Listening for anchor link change.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
@@ -22,7 +23,7 @@ const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 
-export default () => (
+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" />
@@ -32,4 +33,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```
diff --git a/components/anchor/demo/onClick.md b/components/anchor/demo/onClick.md
@@ -14,6 +14,7 @@ title:
 Clicking on an anchor does not record history.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
@@ -29,7 +30,7 @@ const handleClick = (
   console.log(link);
 };
 
-export default () => (
+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" />
@@ -39,4 +40,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```
diff --git a/components/anchor/demo/static.md b/components/anchor/demo/static.md
@@ -14,11 +14,12 @@ title:
 Do not change state when page is scrolling.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-export default () => (
+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" />
@@ -28,4 +29,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```