update demo (#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);
   };

components/form/demo/without-form-create.md

@@ -14,6 +14,7 @@ title:
 `Form` will collect and validate form data automatically. But if you don't need this feature or the default behavior cannot satisfy your business, you can handle form data manually.
 
 ```tsx
+import React, { useState } from 'react';
 import { Form, InputNumber } from 'antd';
 
 function validatePrimeNumber(number) {
@@ -35,7 +36,7 @@ const formItemLayout = {
 };
 
 const RawForm = () => {
-  const [number, setNumber] = React.useState({
+  const [number, setNumber] = useState({
     value: 11,
   });
 

components/table/demo/edit-cell.md

@@ -14,6 +14,7 @@ title:
 Table with editable cells.
 
 ```tsx
+import React, { useContext, useState, useEffect, useRef } from 'react';
 import { Table, Input, Button, Popconfirm, Form } from 'antd';
 
 const EditableContext = React.createContext<any>();
@@ -58,11 +59,11 @@ const EditableCell: React.FC<EditableCellProps> = ({
   handleSave,
   ...restProps
 }) => {
-  const [editing, setEditing] = React.useState(false);
-  const inputRef = React.useRef();
-  const form = React.useContext(EditableContext);
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef();
+  const form = useContext(EditableContext);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (editing) {
       inputRef.current.focus();
     }

components/table/demo/edit-row.md

@@ -14,6 +14,7 @@ title:
 Table with editable rows.
 
 ```tsx
+import React, { useState } from 'react';
 import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
 
 interface Item {
@@ -78,8 +79,8 @@ const EditableCell: React.FC<EditableCellProps> = ({
 
 const EditableTable = () => {
   const [form] = Form.useForm();
-  const [data, setData] = React.useState(originData);
-  const [editingKey, setEditingKey] = React.useState('');
+  const [data, setData] = useState(originData);
+  const [editingKey, setEditingKey] = useState('');
 
   const isEditing = record => record.key === editingKey;
 

components/table/demo/row-selection.md

@@ -18,6 +18,7 @@ Rows can be selectable by making first column as a selectable column. You can us
 > selection happens when clicking checkbox by default. You can see <https://codesandbox.io/s/000vqw38rl> if you need row-click selection behavior.
 
 ```tsx
+import React, { useState } from 'react';
 import { Table, Radio, Divider } from 'antd';
 
 const columns = [
@@ -74,7 +75,7 @@ const rowSelection = {
 };
 
 const Demo = () => {
-  const [selectionType, setSelectionType] = React.useState('checkbox');
+  const [selectionType, setSelectionType] = useState('checkbox');
 
   return (
     <div>

components/table/demo/virtual-list.md

@@ -14,6 +14,7 @@ title:
 Integrate virtual scroll with `react-window` to achieve a high performance table of 100,000 data.
 
 ```tsx
+import React, { useState, useEffect, useRef } from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
 import ResizeObserver from 'rc-resize-observer';
 import classNames from 'classnames';
@@ -21,7 +22,7 @@ import { Table } from 'antd';
 
 function VirtualTable(props) {
   const { columns, scroll, className } = props;
-  const [tableWidth, setTableWidth] = React.useState(0);
+  const [tableWidth, setTableWidth] = useState(0);
 
   const widthColumnCount = columns.filter(({ width }) => !width).length;
   const mergedColumns = columns.map(column => {
@@ -35,8 +36,8 @@ function VirtualTable(props) {
     };
   });
 
-  const gridRef = React.useRef<any>();
-  const [connectObject] = React.useState<any>(() => {
+  const gridRef = useRef<any>();
+  const [connectObject] = useState<any>(() => {
     const obj = {};
     Object.defineProperty(obj, 'scrollLeft', {
       get: () => null,
@@ -57,8 +58,8 @@ function VirtualTable(props) {
     });
   };
 
-  React.useEffect(() => resetVirtualGrid, []);
-  React.useEffect(() => resetVirtualGrid, [tableWidth]);
+  useEffect(() => resetVirtualGrid, []);
+  useEffect(() => resetVirtualGrid, [tableWidth]);
 
   const renderVirtualList = (rawData: object[], { scrollbarSize, ref, onScroll }: any) => {
     ref.current = connectObject;

components/tree/demo/basic-controlled.md

@@ -14,6 +14,7 @@ title:
 Controlled mode lets parent nodes reflect the status of child nodes more intelligently.
 
 ```tsx
+import React, { useState } from 'react';
 import { Tree } from 'antd';
 
 const { TreeNode } = Tree;
@@ -63,10 +64,10 @@ const treeData = [
 ];
 
 const Demo = () => {
-  const [expandedKeys, setExpandedKeys] = React.useState<string[]>(['0-0-0', '0-0-1']);
-  const [checkedKeys, setCheckedKeys] = React.useState<string[]>(['0-0-0']);
-  const [selectedKeys, setSelectedKeys] = React.useState<string[]>([]);
-  const [autoExpandParent, setAutoExpandParent] = React.useState<boolean>(true);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>(['0-0-0', '0-0-1']);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>(['0-0-0']);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
 
   const onExpand = expandedKeys => {
     console.log('onExpand', expandedKeys);

components/tree/demo/dynamic.md

@@ -14,6 +14,7 @@ title:
 To load data asynchronously when click to expand a treeNode.
 
 ```tsx
+import React, { useState } from 'react';
 import { Tree } from 'antd';
 
 const { TreeNode } = Tree;
@@ -25,7 +26,7 @@ const initTreeDate = [
 ];
 
 const Demo: React.FC<{}> = () => {
-  const [treeData, setTreeData] = React.useState(initTreeDate);
+  const [treeData, setTreeData] = useState(initTreeDate);
 
   function onLoadData({ props: { data } }) {
     return new Promise(resolve => {

components/tree/demo/line.md

@@ -14,6 +14,7 @@ title:
 Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`.
 
 ```tsx
+import React, { useState } from 'react';
 import { Tree, Switch } from 'antd';
 import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
 
@@ -58,8 +59,8 @@ const treeData = [
 ];
 
 const Demo: React.FC<{}> = () => {
-  const [showLine, setShowLine] = React.useState(true);
-  const [showIcon, setShowIcon] = React.useState(false);
+  const [showLine, setShowLine] = useState(true);
+  const [showIcon, setShowIcon] = useState(false);
 
   const onSelect = (selectedKeys, info) => {
     console.log('selected', selectedKeys, info);

site/theme/template/Content/Demo/index.jsx

@@ -214,15 +214,25 @@ class Demo extends React.Component {
       // eslint-disable-next-line no-undef
       { react: 'latest', 'react-dom': 'latest', antd: antdReproduceVersion },
     );
-    const importReactReg = /import(\D*)from 'react'/;
-    const importReactContent = importReactReg.test(sourceCode) ? '' : "import React from 'react';";
+
+    // Reorder source code
+    let parsedSourceCode = sourceCode;
+    let importReactContent = "import React from 'react';";
+
+    const importReactReg = /import(\D*)from 'react';/;
+    const matchImportReact = parsedSourceCode.match(importReactReg);
+    if (matchImportReact) {
+      importReactContent = matchImportReact[0];
+      parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
+    }
+
     const indexJsContent = `
 ${importReactContent}
 import ReactDOM from 'react-dom';
 import 'antd/dist/antd.css';
 import './index.css';
-${sourceCode.replace('mountNode', "document.getElementById('container')")}
-`;
+${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
+`.trim();
     const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
     const codesanboxPrefillConfig = {
       files: {