chore: code style

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

@@ -14,7 +14,6 @@ title:
 Callback with affixed state.
 
 ```tsx
-import React from 'react';
 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

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

components/alert/demo/basic.md

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

components/alert/demo/closable.md

@@ -14,7 +14,6 @@ title:
 To show close button.
 
 ```tsx
-import React from 'react';
 import { Alert } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {

components/alert/demo/close-text.md

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

components/alert/demo/custom-icon.md

@@ -15,7 +15,6 @@ 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';
 

components/alert/demo/description.md

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

components/alert/demo/error-boundary.md

@@ -14,12 +14,11 @@ title:
 ErrorBoundary Component for making error handling easier in [React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Button, Alert } from 'antd';
 
 const { ErrorBoundary } = Alert;
-const ThrowError: FC = () => {
-  const [error, setError] = useState<Error>();
+const ThrowError: React.FC = () => {
+  const [error, setError] = React.useState<Error>();
   const onClick = () => {
     setError(new Error('An Uncaught Error'));
   };

components/alert/demo/icon.md

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

components/alert/demo/smooth-closed.md

@@ -14,11 +14,10 @@ title:
 Smoothly unmount Alert upon close.
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Alert } from 'antd';
 
-const App: FC = () => {
-  const [visible, setVisible] = useState(true);
+const App: React.FC = () => {
+  const [visible, setVisible] = React.useState(true);
   const handleClose = () => {
     setVisible(false);
   };

components/alert/demo/style.md

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

components/anchor/demo/basic.md

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

components/anchor/demo/customizeHighlight.md

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

components/anchor/demo/onChange.md

@@ -14,7 +14,6 @@ title:
 Listening for anchor link change.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;

components/anchor/demo/onClick.md

@@ -14,7 +14,6 @@ title:
 Clicking on an anchor does not record history.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;

components/anchor/demo/static.md

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

components/anchor/demo/targetOffset.md

@@ -14,14 +14,13 @@ title:
 Anchor target scroll to screen center.
 
 ```tsx
-import React, { useState, useEffect, FC } from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-const AnchorExample: FC = () => {
-  const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
-  useEffect(() => {
+const AnchorExample: React.FC = () => {
+  const [targetOffset, setTargetOffset] = React.useState<number | undefined>(undefined);
+  React.useEffect(() => {
     setTargetOffset(window.innerHeight / 2);
   }, []);
   return (

components/auto-complete/demo/basic.md

@@ -14,17 +14,16 @@ title:
 Basic Usage, set data source of autocomplete with `options` property.
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { AutoComplete } from 'antd';
 
 const mockVal = (str: string, repeat: number = 1) => {
   return {
     value: str.repeat(repeat),
   };
 };
-const Complete: FC = () => {
-  const [value, setValue] = useState('');
-  const [options, setOptions] = useState<{ value: string }[]>([]);
+const Complete: React.FC = () => {
+  const [value, setValue] = React.useState('');
+  const [options, setOptions] = React.useState<{ value: string }[]>([]);
   const onSearch = (searchText: string) => {
     setOptions(
       !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],

components/auto-complete/demo/certain-category.md

@@ -14,7 +14,6 @@ title:
 Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
 
 ```tsx
-import React, { FC } from 'react';
 import { Input, AutoComplete } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
@@ -68,7 +67,7 @@ const options = [
   },
 ];
 
-const Complete: FC = () => {
+const Complete: React.FC = () => {
   return (
     <AutoComplete
       dropdownClassName="certain-category-search-dropdown"

components/auto-complete/demo/custom.md

@@ -14,14 +14,12 @@ title:
 Customize Input Component
 
 ```tsx
-import React, { useState, FC } from 'react';
-
 import { AutoComplete, Input } from 'antd';
 
 const { TextArea } = Input;
 
-const Complete: FC = () => {
-  const [options, setOptions] = useState<{ value: string }[]>([]);
+const Complete: React.FC = () => {
+  const [options, setOptions] = React.useState<{ value: string }[]>([]);
   const handleSearch = (value: string) => {
     setOptions(
       !value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],

components/auto-complete/demo/form-debug.md

@@ -7,8 +7,6 @@ debug: true
 ---
 
 ```tsx
-import React from 'react';
-
 import { Input, AutoComplete, Form, TreeSelect, Button } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 

components/auto-complete/demo/non-case-sensitive.md

@@ -14,7 +14,6 @@ title:
 A non-case-sensitive AutoComplete
 
 ```tsx
-import React, { FC } from 'react';
 import { AutoComplete } from 'antd';
 
 const options = [
@@ -23,7 +22,7 @@ const options = [
   { value: 'Wall Street' },
 ];
 
-const Complete: FC = () => {
+const Complete: React.FC = () => {
   return (
     <AutoComplete
       style={{ width: 200 }}

components/auto-complete/demo/options.md

@@ -14,13 +14,12 @@ title:
 You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { AutoComplete } from 'antd';
 
 const { Option } = AutoComplete;
 
-const Complete: FC = () => {
-  const [result, setResult] = useState<string[]>([]);
+const Complete: React.FC = () => {
+  const [result, setResult] = React.useState<string[]>([]);
   const handleSearch = (value: string) => {
     let res: string[] = [];
     if (!value || value.indexOf('@') >= 0) {

components/auto-complete/demo/uncertain-category.md

@@ -14,7 +14,6 @@ title:
 Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Input, AutoComplete } from 'antd';
 import { SelectProps } from 'antd/es/select';
 
@@ -54,8 +53,8 @@ const searchResult = (query: string) => {
     });
 };
 
-const Complete: FC = () => {
-  const [options, setOptions] = useState<SelectProps<object>['options']>([]);
+const Complete: React.FC = () => {
+  const [options, setOptions] = React.useState<SelectProps<object>['options']>([]);
 
   const handleSearch = (value: string) => {
     setOptions(value ? searchResult(value) : []);

components/avatar/demo/badge.md

@@ -14,7 +14,6 @@ title:
 Usually used for reminders and notifications.
 
 ```tsx
-import React from 'react';
 import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 

components/avatar/demo/basic.md

@@ -14,7 +14,6 @@ title:
 Three sizes and two shapes are available.
 
 ```tsx
-import React from 'react';
 import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 

components/avatar/demo/dynamic.md

@@ -14,15 +14,14 @@ title:
 For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Avatar, Button } from 'antd';
 
 const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
 const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 
-const Autoset: FC = () => {
-  const [user, setUser] = useState(UserList[0]);
-  const [color, setColor] = useState(ColorList[0]);
+const Autoset: React.FC = () => {
+  const [user, setUser] = React.useState(UserList[0]);
+  const [color, setColor] = React.useState(ColorList[0]);
   const changeUser = () => {
     const index = UserList.indexOf(user);
     setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);

components/avatar/demo/toggle-debug.md

@@ -15,14 +15,13 @@ debug: true
 Text inside Avatar should be set a proper font size when toggle it's visibility.
 
 ```tsx
-import React, { useState, FC } from 'react';
 import { Avatar, Button } from 'antd';
 
 type SizeType = 'large' | 'small' | 'default' | number;
-const App: FC = () => {
-  const [hide, setHide] = useState(true);
-  const [size, setSize] = useState<SizeType>('large');
-  const [scale, setScale] = useState(1);
+const App: React.FC = () => {
+  const [hide, setHide] = React.useState(true);
+  const [size, setSize] = React.useState<SizeType>('large');
+  const [scale, setScale] = React.useState(1);
   const toggle = () => {
     setHide(!hide);
   };

components/avatar/demo/type.md

@@ -14,7 +14,6 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
 
 ```tsx
-import React from 'react';
 import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';