docs: a demo use typescript

components/affix/demo/basic.md

@@ -14,12 +14,11 @@ title:
 The simplest usage.
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: FC = () => {
-  const [top, setTop] = useState(10);
-  const [bottom, setBottom] = useState(10);
+const Demo: React.FC = () => {
+  const [top, setTop] = React.useState(10);
+  const [bottom, setBottom] = React.useState(10);
 
   return (
     <div>

components/affix/demo/debug.md

@@ -15,11 +15,10 @@ DEBUG
 DEBUG
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: FC = () => {
-  const [top, setTop] = useState(10);
+const Demo: React.FC = () => {
+  const [top, setTop] = React.useState(10);
   return (
     <div style={{ height: 10000 }}>
       <div>Top</div>

components/affix/demo/on-change.md

@@ -13,7 +13,7 @@ title:
 
 Callback with affixed state.
 
-```jsx
+```tsx
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(

components/affix/demo/target.md

@@ -14,11 +14,10 @@ title:
 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: FC = () => {
-  const [container, setContainer] = useState(null);
+const Demo: React.FC = () => {
+  const [container, setContainer] = React.useState(null);
   return (
     <div className="scrollable-container" ref={setContainer}>
       <div className="background">

components/alert/demo/banner.md

@@ -14,7 +14,7 @@ title:
 
 Display Alert as a banner at top of page.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
 ReactDOM.render(

components/alert/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The simplest usage for short messages.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
 ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);

components/alert/demo/closable.md

@@ -13,10 +13,10 @@ title:
 
 To show close button.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
-const onClose = e => {
+const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 

components/alert/demo/close-text.md

@@ -13,7 +13,7 @@ title:
 
 Replace the default icon with customized text.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
 ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);

components/alert/demo/custom-icon.md

@@ -14,7 +14,7 @@ title:
 
 A relevant icon makes information clearer and more friendly.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 

components/alert/demo/description.md

@@ -13,7 +13,7 @@ title:
 
 Additional description for alert message.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
 ReactDOM.render(

components/alert/demo/error-boundary.md

@@ -13,34 +13,25 @@ title:
 
 ErrorBoundary Component for making error handling easier in [React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
 
-```jsx
+```tsx
 import { Button, Alert } from 'antd';
 
 const { ErrorBoundary } = Alert;
-
-class ThrowError extends React.Component {
-  state = {
-    error: null,
-  };
-
-  onClick = () => {
-    this.setState({
-      error: new Error('An Uncaught Error'),
-    });
+const ThrowError: React.FC = () => {
+  const [error, setError] = React.useState<Error>();
+  const onClick = () => {
+    setError(new Error('An Uncaught Error'));
   };
 
-  render() {
-    const { error } = this.state;
-    if (error) {
-      throw error;
-    }
-    return (
-      <Button type="danger" onClick={this.onClick}>
-        Click me to throw a error
-      </Button>
-    );
+  if (error) {
+    throw error;
   }
-}
+  return (
+    <Button type="danger" onClick={onClick}>
+      Click me to throw a error
+    </Button>
+  );
+};
 
 ReactDOM.render(
   <ErrorBoundary>

components/alert/demo/icon.md

@@ -13,7 +13,7 @@ title:
 
 A relevant icon will make information clearer and more friendly.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
 ReactDOM.render(

components/alert/demo/smooth-closed.md

@@ -13,34 +13,23 @@ title:
 
 Smoothly unmount Alert upon close.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
-class App extends React.Component {
-  state = {
-    visible: true,
+const App: React.FC = () => {
+  const [visible, setVisible] = React.useState(true);
+  const handleClose = () => {
+    setVisible(false);
   };
-
-  handleClose = () => {
-    this.setState({ visible: false });
-  };
-
-  render() {
-    return (
-      <div>
-        {this.state.visible ? (
-          <Alert
-            message="Alert Message Text"
-            type="success"
-            closable
-            afterClose={this.handleClose}
-          />
-        ) : null}
-        <p>placeholder text here</p>
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      {visible ? (
+        <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
+      ) : null}
+      <p>placeholder text here</p>
+    </div>
+  );
+};
 
 ReactDOM.render(<App />, mountNode);
 ```

components/alert/demo/style.md

@@ -13,7 +13,7 @@ title:
 
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 
-```jsx
+```tsx
 import { Alert } from 'antd';
 
 ReactDOM.render(

components/anchor/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-```jsx
+```tsx
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;

components/anchor/demo/customizeHighlight.md

@@ -13,7 +13,7 @@ title:
 
 Customize the anchor highlight.
 
-```jsx
+```tsx
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;

components/anchor/demo/onChange.md

@@ -13,12 +13,12 @@ title:
 
 Listening for anchor link change.
 
-```jsx
+```tsx
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-const onChange = link => {
+const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 

components/anchor/demo/onClick.md

@@ -13,14 +13,20 @@ title:
 
 Clicking on an anchor does not record history.
 
-```jsx
+```tsx
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-const handleClick = (e, link) => {
-  e.preventDefault();
-  console.log(link);
+const handleClick = (
+    e: React.MouseEvent<HTMLElement>,
+    link: {
+      title: React.ReactNode;
+      href: string;
+    },
+  ) => {
+    e.preventDefault();
+    console.log(link);
 };
 
 ReactDOM.render(

components/anchor/demo/static.md

@@ -13,7 +13,7 @@ title:
 
 Do not change state when page is scrolling.
 
-```jsx
+```tsx
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;

components/anchor/demo/targetOffset.md

@@ -13,35 +13,27 @@ title:
 
 Anchor target scroll to screen center.
 
-```jsx
+```tsx
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-class AnchorExample extends React.Component {
-  state = {
-    targetOffset: undefined,
-  };
-
-  componentDidMount() {
-    this.setState({
-      targetOffset: window.innerHeight / 2,
-    });
-  }
-
-  render() {
-    return (
-      <Anchor targetOffset={this.state.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>
-    );
-  }
-}
+const AnchorExample: React.FC = () => {
+  const [targetOffset, setTargetOffset] = React.useState<number | undefined>(undefined);
+  React.useEffect(() => {
+    setTargetOffset(window.innerHeight / 2);
+  }, []);
+  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>
+  );
+};
 
 ReactDOM.render(<AnchorExample />, mountNode);
 ```