update demo (ant-design#21069)

components/affix/demo/basic.md

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

components/affix/demo/debug.md

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

components/affix/demo/target.md

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

components/alert/demo/error-boundary.md

@@ -14,11 +14,12 @@ 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 } from 'react';
 import { Button, Alert } from 'antd';
 
 const { ErrorBoundary } = Alert;
 const ThrowError: React.FC = () => {
-  const [error, setError] = React.useState<Error>();
+  const [error, setError] = useState<Error>();
   const onClick = () => {
     setError(new Error('An Uncaught Error'));
   };

components/alert/demo/smooth-closed.md

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

components/anchor/demo/targetOffset.md

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

components/auto-complete/demo/basic.md

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

components/auto-complete/demo/custom.md

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

components/auto-complete/demo/options.md

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

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

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

components/avatar/demo/dynamic.md

@@ -14,14 +14,15 @@ 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 } from 'react';
 import { Avatar, Button } from 'antd';
 
 const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
 const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 
 const Autoset: React.FC = () => {
-  const [user, setUser] = React.useState(UserList[0]);
-  const [color, setColor] = React.useState(ColorList[0]);
+  const [user, setUser] = useState(UserList[0]);
+  const [color, setColor] = 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,13 +15,14 @@ debug: true
 Text inside Avatar should be set a proper font size when toggle it's visibility.
 
 ```tsx
+import React, { useState } from 'react';
 import { Avatar, Button } from 'antd';
 
 type SizeType = 'large' | 'small' | 'default' | number;
 const App: React.FC = () => {
-  const [hide, setHide] = React.useState(true);
-  const [size, setSize] = React.useState<SizeType>('large');
-  const [scale, setScale] = React.useState(1);
+  const [hide, setHide] = useState(true);
+  const [size, setSize] = useState<SizeType>('large');
+  const [scale, setScale] = useState(1);
   const toggle = () => {
     setHide(!hide);
   };

components/config-provider/demo/size.md

@@ -14,6 +14,7 @@ title:
 Config component default size.
 
 ```jsx
+import React, { useState } from 'react';
 import {
   ConfigProvider,
   Radio,
@@ -27,7 +28,7 @@ import {
 } from 'antd';
 
 const FormSizeDemo = () => {
-  const [componentSize, setComponentSize] = React.useState('small');
+  const [componentSize, setComponentSize] = useState('small');
   return (
     <div>
       <Radio.Group

components/form/demo/advanced-search.md

@@ -18,11 +18,12 @@ Three columns layout is often used for advanced searching of data table.
 Because the width of label is not fixed, you may need to adjust it by customizing its style.
 
 ```tsx
+import React, { useState } from 'react';
 import { Form, Row, Col, Input, Button } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 
 const AdvancedSearchForm = () => {
-  const [expand, setExpand] = React.useState(false);
+  const [expand, setExpand] = useState(false);
   const [form] = Form.useForm();
 
   const getFields = () => {

components/form/demo/customized-form-controls.md

@@ -20,6 +20,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
 > - It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
 
 ```tsx
+import React, { useState } from 'react';
 import { Form, Input, Select, Button } from 'antd';
 
 const { Option } = Select;
@@ -35,8 +36,8 @@ interface PriceInputProps {
 }
 
 const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
-  const [number, setNumber] = React.useState(0);
-  const [currency, setCurrency] = React.useState('rmb');
+  const [number, setNumber] = useState(0);
+  const [currency, setCurrency] = useState('rmb');
 
   const triggerChange = changedValue => {
     if (onChange) {

components/form/demo/dynamic-rule.md

@@ -14,6 +14,7 @@ title:
 Perform different check rules according to different situations.
 
 ```tsx
+import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Checkbox } from 'antd';
 
 const formItemLayout = {
@@ -27,9 +28,9 @@ const formTailLayout = {
 
 const DynamicRule = () => {
   const [form] = Form.useForm();
-  const [checkNick, setCheckNick] = React.useState(false);
+  const [checkNick, setCheckNick] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     form.validateFields(['nickname']);
   }, [checkNick]);
 

components/form/demo/form-context.md

@@ -14,6 +14,7 @@ title:
 Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
 
 ```tsx
+import React, { useState, useEffect } from 'react';
 import { Form, Input, InputNumber, Modal, Button, Avatar, Typography } from 'antd';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
 
@@ -33,7 +34,7 @@ interface ModalFormProps {
 const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
   const [form] = Form.useForm();
 
-  React.useEffect(() => {
+  useEffect(() => {
     form.resetFields();
   }, [visible]);
 
@@ -56,7 +57,7 @@ const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
 };
 
 const Demo = () => {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
 
   const showUserModal = () => {
     setVisible(true);

components/form/demo/form-in-modal.md

@@ -14,6 +14,7 @@ title:
 When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
 
 ```tsx
+import React, { useState } from 'react';
 import { Button, Modal, Form, Input, Radio } from 'antd';
 
 interface Values {
@@ -81,7 +82,7 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
 };
 
 const CollectionsPage = () => {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
 
   const onCreate = values => {
     console.log('Received values of form: ', values);

components/form/demo/global-state.md

@@ -18,6 +18,7 @@ We can store form data into upper component or [Redux](https://github.com/reactj
 **Note:** Save Form data globally [is not a good practice](https://github.com/reduxjs/redux/issues/1287#issuecomment-175351978). You should avoid this if not necessary.
 
 ```tsx
+import React, { useState } from 'react';
 import { Form, Input } from 'antd';
 
 interface FieldData {
@@ -55,7 +56,7 @@ const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) =>
 };
 
 const Demo = () => {
-  const [fields, setFields] = React.useState([{ name: ['username'], value: 'Ant Design' }]);
+  const [fields, setFields] = useState([{ name: ['username'], value: 'Ant Design' }]);
 
   return (
     <div>

components/form/demo/inline-login.md

@@ -14,15 +14,16 @@ title:
 Inline login form is often used in navigation bar.
 
 ```tsx
+import React, { useState, useEffect } from 'react';
 import { Form, Input, Button } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 
 const HorizontalLoginForm = () => {
   const [form] = Form.useForm();
-  const [, forceUpdate] = React.useState();
+  const [, forceUpdate] = useState();
 
   // To disable submit button at the beginning.
-  React.useEffect(() => {
+  useEffect(() => {
     forceUpdate({});
   }, []);
 

components/form/demo/layout.md

@@ -14,11 +14,12 @@ title:
 There are three layout for form: `horizontal`, `vertical`, `inline`.
 
 ```tsx
+import React, { useState } from 'react';
 import { Form, Input, Button, Radio } from 'antd';
 
 const FormLayoutDemo = () => {
   const [form] = Form.useForm();
-  const [formLayout, setFormLayout] = React.useState('horizontal');
+  const [formLayout, setFormLayout] = useState('horizontal');
 
   const onFormLayoutChange = ({ layout }) => {
     setFormLayout(layout);

components/form/demo/register.md

@@ -14,6 +14,7 @@ title:
 Fill in this form to create a new account for you.
 
 ```tsx
+import React, { useState } from 'react';
 import {
   Form,
   Input,
@@ -109,7 +110,7 @@ const RegistrationForm = () => {
     </Form.Item>
   );
 
-  const [autoCompleteResult, setAutoCompleteResult] = React.useState([]);
+  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
 
   const onWebsiteChange = value => {
     if (!value) {

components/form/demo/size.md

@@ -14,6 +14,7 @@ title:
 Set component size, only works for antd components.
 
 ```tsx
+import React, { useState } from 'react';
 import {
   Form,
   Input,
@@ -27,7 +28,7 @@ import {
   Switch,
 } from 'antd';
 const FormSizeDemo = () => {
-  const [componentSize, setComponentSize] = React.useState('small');
+  const [componentSize, setComponentSize] = useState('small');
   const onFormLayoutChange = ({ size }) => {
     setComponentSize(size);
   };