docs: replace class component with hooks (#35519)

* docs(badge): replace class component with hooks

* docs(button): replace class component with hooks

* docs(calendar): replace class component with hooks

* docs(card): replace class component with hooks

* docs(button): replace class component with hooks

* chore(deps): remove webpack devDependencies

* docs(cascader): replace class component with hooks

* docs(checkbox): replace class component with hooks

* docs(collapse): replace class component with hooks

* docs(comment): replace class component with hooks

* docs(descriptions): replace class component with hooks

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks

* docs(drawer): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(empty): replace class component with hooks

* docs(grid): replace class component with hooks

* docs(input): replace class component with hooks

* docs(input-number): replace class component with hooks

* docs(demo): fix lint error

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

@@ -19,37 +19,32 @@ import { PlusOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
-class DrawerForm extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  render() {
   return (
     <>
-        <Button type="primary" onClick={this.showDrawer} icon={<PlusOutlined />}>
+      <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
         New account
       </Button>
       <Drawer
         title="Create a new account"
         width={720}
-          onClose={this.onClose}
-          visible={this.state.visible}
+        onClose={onClose}
+        visible={visible}
         bodyStyle={{ paddingBottom: 80 }}
         extra={
           <Space>
-              <Button onClick={this.onClose}>Cancel</Button>
-              <Button onClick={this.onClose} type="primary">
+            <Button onClick={onClose}>Cancel</Button>
+            <Button onClick={onClose} type="primary">
               Submit
             </Button>
           </Space>
@@ -153,10 +148,7 @@ class DrawerForm extends React.Component {
       </Drawer>
     </>
   );
-  }
-}
-
-export default () => <DrawerForm />;
+};
 ```
 
 ```css

components/drawer/demo/multi-level-drawer.md

@@ -16,65 +16,54 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
 ```jsx
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false, childrenDrawer: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
+  const [childrenDrawer, setChildrenDrawer] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  showChildrenDrawer = () => {
-    this.setState({
-      childrenDrawer: true,
-    });
+  const showChildrenDrawer = () => {
+    setChildrenDrawer(true);
   };
 
-  onChildrenDrawerClose = () => {
-    this.setState({
-      childrenDrawer: false,
-    });
+  const onChildrenDrawerClose = () => {
+    setChildrenDrawer(false);
   };
 
-  render() {
   return (
     <>
-        <Button type="primary" onClick={this.showDrawer}>
+      <Button type="primary" onClick={showDrawer}>
         Open drawer
       </Button>
       <Drawer
         title="Multi-level drawer"
         width={520}
         closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
+        onClose={onClose}
+        visible={visible}
       >
-          <Button type="primary" onClick={this.showChildrenDrawer}>
+        <Button type="primary" onClick={showChildrenDrawer}>
           Two-level drawer
         </Button>
         <Drawer
           title="Two-level Drawer"
           width={320}
           closable={false}
-            onClose={this.onChildrenDrawerClose}
-            visible={this.state.childrenDrawer}
+          onClose={onChildrenDrawerClose}
+          visible={childrenDrawer}
         >
           This is two-level drawer
         </Drawer>
       </Drawer>
     </>
   );
-  }
-}
-
-export default App;
+};
 ```
 
 <style>

components/drawer/demo/placement.md

@@ -16,39 +16,32 @@ The Drawer can appear from any edge of the screen.
 ```jsx
 import { Drawer, Button, Radio, Space } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false, placement: 'left' };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
+  const [placement, setPlacement] = React.useState('left');
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  onChange = e => {
-    this.setState({
-      placement: e.target.value,
-    });
+  const onChange = e => {
+    setPlacement(e.target.value);
   };
 
-  render() {
-    const { placement, visible } = this.state;
   return (
     <>
       <Space>
-          <Radio.Group value={placement} onChange={this.onChange}>
+        <Radio.Group value={placement} onChange={onChange}>
           <Radio value="top">top</Radio>
           <Radio value="right">right</Radio>
           <Radio value="bottom">bottom</Radio>
           <Radio value="left">left</Radio>
         </Radio.Group>
-          <Button type="primary" onClick={this.showDrawer}>
+        <Button type="primary" onClick={showDrawer}>
           Open
         </Button>
       </Space>
@@ -56,7 +49,7 @@ class App extends React.Component {
         title="Basic Drawer"
         placement={placement}
         closable={false}
-          onClose={this.onClose}
+        onClose={onClose}
         visible={visible}
         key={placement}
       >
@@ -66,8 +59,5 @@ class App extends React.Component {
       </Drawer>
     </>
   );
-  }
-}
-
-export default App;
+};
 ```

components/drawer/demo/render-in-current.md

@@ -16,27 +16,22 @@ Render in current dom. custom container, check `getContainer`.
 ```jsx
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  render() {
   return (
     <div className="site-drawer-render-in-current-wrapper">
       Render in this
       <div style={{ marginTop: 16 }}>
-          <Button type="primary" onClick={this.showDrawer}>
+        <Button type="primary" onClick={showDrawer}>
           Open
         </Button>
       </div>
@@ -44,8 +39,8 @@ class App extends React.Component {
         title="Basic Drawer"
         placement="right"
         closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
+        onClose={onClose}
+        visible={visible}
         getContainer={false}
         style={{ position: 'absolute' }}
       >
@@ -53,10 +48,7 @@ class App extends React.Component {
       </Drawer>
     </div>
   );
-  }
-}
-
-export default App;
+};
 ```
 
 ```css

components/drawer/demo/user-profile.md

@@ -23,22 +23,17 @@ const DescriptionItem = ({ title, content }) => (
   </div>
 );
 
-class App extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  render() {
   return (
     <>
       <List
@@ -55,7 +50,7 @@ class App extends React.Component {
           <List.Item
             key={item.id}
             actions={[
-                <a onClick={this.showDrawer} key={`a-${item.id}`}>
+              <a onClick={showDrawer} key={`a-${item.id}`}>
                 View Profile
               </a>,
             ]}
@@ -70,13 +65,7 @@ class App extends React.Component {
           </List.Item>
         )}
       />
-        <Drawer
-          width={640}
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
+      <Drawer width={640} placement="right" closable={false} onClose={onClose} visible={visible}>
         <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
           User Profile
         </p>
@@ -164,10 +153,7 @@ class App extends React.Component {
       </Drawer>
     </>
   );
-  }
-}
-
-export default App;
+};
 ```
 
 ```css

components/dropdown/demo/loading.md

@@ -27,25 +27,23 @@ const menu = (
     ]}
   />
 );
-class App extends React.Component {
-  state = {
-    loadings: [],
-  };
+export default () => {
+  const [loadings, setLodings] = React.useState([]);
 
-  enterLoading = index => {
-    const newLoadings = [...this.state.loadings];
+  const enterLoading = index => {
+    const newLoadings = [...loadings];
     newLoadings[index] = true;
-    this.setState({
-      loadings: newLoadings,
-    });
+    setLodings(newLoadings);
+
     setTimeout(() => {
-      newLoadings[index] = false;
-      this.setState({ loadings: newLoadings });
+      setLodings(prevLoadings => {
+        const temLoadings = [...prevLoadings];
+        temLoadings[index] = false;
+        return temLoadings;
+      });
     }, 6000);
   };
 
-  render() {
-    const { loadings } = this.state;
   return (
     <Space direction="vertical">
       <Dropdown.Button type="primary" loading overlay={menu}>
@@ -58,7 +56,7 @@ class App extends React.Component {
         type="primary"
         loading={loadings[0]}
         overlay={menu}
-          onClick={() => this.enterLoading(0)}
+        onClick={() => enterLoading(0)}
       >
         Submit
       </Dropdown.Button>
@@ -66,13 +64,11 @@ class App extends React.Component {
         icon={<DownOutlined />}
         loading={loadings[1]}
         overlay={menu}
-          onClick={() => this.enterLoading(1)}
+        onClick={() => enterLoading(1)}
       >
         Submit
       </Dropdown.Button>
     </Space>
   );
-  }
-}
-export default App;
+};
 ```

components/dropdown/demo/overlay-visible.md

@@ -17,25 +17,22 @@ The default is to close the menu when you click on menu items, this feature can
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
-class OverlayVisible extends React.Component {
-  state = {
-    visible: false,
-  };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  handleMenuClick = e => {
+  const handleMenuClick = e => {
     if (e.key === '3') {
-      this.setState({ visible: false });
+      setVisible(false);
     }
   };
 
-  handleVisibleChange = flag => {
-    this.setState({ visible: flag });
+  const handleVisibleChange = flag => {
+    setVisible(flag);
   };
 
-  render() {
   const menu = (
     <Menu
-        onClick={this.handleMenuClick}
+      onClick={handleMenuClick}
       items={[
         {
           label: 'Clicking me will not close the menu.',
@@ -52,12 +49,9 @@ class OverlayVisible extends React.Component {
       ]}
     />
   );
+
   return (
-      <Dropdown
-        overlay={menu}
-        onVisibleChange={this.handleVisibleChange}
-        visible={this.state.visible}
-      >
+    <Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
       <a onClick={e => e.preventDefault()}>
         <Space>
           Hover me
@@ -66,8 +60,5 @@ class OverlayVisible extends React.Component {
       </a>
     </Dropdown>
   );
-  }
-}
-
-export default () => <OverlayVisible />;
+};
 ```

components/empty/demo/config-provider.md

@@ -36,21 +36,17 @@ const customizeRenderEmpty = () => (
 
 const style = { width: 200 };
 
-class Demo extends React.Component {
-  state = {
-    customize: false,
-  };
+export default () => {
+  const [customize, setCustomize] = React.useState(false);
 
-  render() {
-    const { customize } = this.state;
   return (
     <div>
       <Switch
         unCheckedChildren="default"
         checkedChildren="customize"
         checked={customize}
-          onChange={val => {
-            this.setState({ customize: val });
+        onChange={value => {
+          setCustomize(value);
         }}
       />
 
@@ -93,10 +89,7 @@ class Demo extends React.Component {
       </ConfigProvider>
     </div>
   );
-  }
-}
-
-export default Demo;
+};
 ```
 
 <style>

components/grid/demo/playground.md

@@ -30,27 +30,26 @@ const colCounts = {};
   colCounts[i] = value;
 });
 
-class App extends React.Component {
-  state = {
+export default () => {
+  const [state, setState] = React.useState({
     gutterKey: 1,
     vgutterKey: 1,
     colCountKey: 2,
+  });
+
+  const onGutterChange = gutterKey => {
+    setState({ ...state, gutterKey });
   };
 
-  onGutterChange = gutterKey => {
-    this.setState({ gutterKey });
+  const onVGutterChange = vgutterKey => {
+    setState({ ...state, vgutterKey });
   };
 
-  onVGutterChange = vgutterKey => {
-    this.setState({ vgutterKey });
+  const onColCountChange = colCountKey => {
+    setState({ ...state, colCountKey });
   };
 
-  onColCountChange = colCountKey => {
-    this.setState({ colCountKey });
-  };
-
-  render() {
-    const { gutterKey, vgutterKey, colCountKey } = this.state;
+  const { gutterKey, vgutterKey, colCountKey } = state;
   const cols = [];
   const colCount = colCounts[colCountKey];
   let colCode = '';
@@ -62,6 +61,7 @@ class App extends React.Component {
     );
     colCode += `  <Col span={${24 / colCount}} />\n`;
   }
+
   return (
     <>
       <span>Horizontal Gutter (px): </span>
@@ -70,7 +70,7 @@ class App extends React.Component {
           min={0}
           max={Object.keys(gutters).length - 1}
           value={gutterKey}
-            onChange={this.onGutterChange}
+          onChange={onGutterChange}
           marks={gutters}
           step={null}
           tipFormatter={value => gutters[value]}
@@ -82,7 +82,7 @@ class App extends React.Component {
           min={0}
           max={Object.keys(vgutters).length - 1}
           value={vgutterKey}
-            onChange={this.onVGutterChange}
+          onChange={onVGutterChange}
           marks={vgutters}
           step={null}
           tipFormatter={value => vgutters[value]}
@@ -94,7 +94,7 @@ class App extends React.Component {
           min={0}
           max={Object.keys(colCounts).length - 1}
           value={colCountKey}
-            onChange={this.onColCountChange}
+          onChange={onColCountChange}
           marks={colCounts}
           step={null}
           tipFormatter={value => colCounts[value]}
@@ -110,10 +110,7 @@ class App extends React.Component {
       <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
     </>
   );
-  }
-}
-
-export default App;
+};
 ```
 
 ```css

components/input-number/demo/disabled.md

@@ -16,30 +16,22 @@ Click the button to toggle between available and disabled states.
 ```jsx
 import { InputNumber, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    disabled: true,
+export default () => {
+  const [disabled, setDisabled] = React.useState(true);
+
+  const toggle = () => {
+    setDisabled(!disabled);
   };
 
-  toggle = () => {
-    this.setState({
-      disabled: !this.state.disabled,
-    });
-  };
-
-  render() {
   return (
     <>
-        <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
+      <InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />
       <div style={{ marginTop: 20 }}>
-          <Button onClick={this.toggle} type="primary">
+        <Button onClick={toggle} type="primary">
           Toggle disabled
         </Button>
       </div>
     </>
   );
-  }
-}
-
-export default App;
+};
 ```

components/input/demo/autosize-textarea.md

@@ -18,18 +18,14 @@ import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-class Demo extends React.Component {
-  state = {
-    value: '',
-  };
+export default () => {
+  const [value, setValue] = React.useState();
 
-  onChange = ({ target: { value } }) => {
-    this.setState({ value });
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const onChange = ({ target: { value } }) => {
+    setValue(value);
   };
 
-  render() {
-    const { value } = this.state;
-
   return (
     <>
       <TextArea placeholder="Autosize height based on content lines" autoSize />
@@ -41,14 +37,11 @@ class Demo extends React.Component {
       <div style={{ margin: '24px 0' }} />
       <TextArea
         value={value}
-          onChange={this.onChange}
+        onChange={onChange}
         placeholder="Controlled autosize"
         autoSize={{ minRows: 3, maxRows: 5 }}
       />
     </>
   );
-  }
-}
-
-export default Demo;
+};
 ```

components/input/demo/textarea-resize.md

@@ -22,28 +22,17 @@ const { TextArea } = Input;
 const defaultValue =
   'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';
 
-class Demo extends React.Component {
-  state = {
-    autoResize: false,
-  };
-
-  render() {
-    const { autoResize } = this.state;
+export default () => {
+  const [autoResize, setAutoResize] = React.useState(false);
 
   return (
     <>
-        <Button
-          onClick={() => this.setState({ autoResize: !autoResize })}
-          style={{ marginBottom: 16 }}
-        >
+      <Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>
         Auto Resize: {String(autoResize)}
       </Button>
       <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
       <TextArea allowClear style={{ width: 93 }} />
     </>
   );
-  }
-}
-
-export default Demo;
+};
 ```

components/input/demo/tooltip.md

@@ -20,18 +20,19 @@ function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
 
-class NumericInput extends React.Component {
-  onChange = e => {
-    const { value } = e.target;
+const NumericInput = props => {
+  const { value, onBlur, onChange } = props;
+
+  const handleChange = e => {
+    const inputValue = e.target.value;
     const reg = /^-?\d*(\.\d*)?$/;
-    if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
-      this.props.onChange(value);
+    if ((!isNaN(inputValue) && reg.test(inputValue)) || inputValue === '' || inputValue === '-') {
+      onChange(inputValue);
     }
   };
 
   // '.' at the end or only '-' in the input box.
-  onBlur = () => {
-    const { value, onBlur, onChange } = this.props;
+  const handleBlur = () => {
     let valueTemp = value;
     if (value.charAt(value.length - 1) === '.' || value === '-') {
       valueTemp = value.slice(0, -1);
@@ -42,50 +43,33 @@ class NumericInput extends React.Component {
     }
   };
 
-  render() {
-    const { value } = this.props;
   const title = value ? (
     <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
   ) : (
     'Input a number'
   );
   return (
-      <Tooltip
-        trigger={['focus']}
-        title={title}
-        placement="topLeft"
-        overlayClassName="numeric-input"
-      >
+    <Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
       <Input
-          {...this.props}
-          onChange={this.onChange}
-          onBlur={this.onBlur}
+        {...props}
+        onChange={handleChange}
+        onBlur={handleBlur}
         placeholder="Input a number"
         maxLength={25}
       />
     </Tooltip>
   );
-  }
-}
+};
 
-class NumericInputDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '' };
-  }
+export default () => {
+  const [value, setValue] = React.useState();
 
-  onChange = value => {
-    this.setState({ value });
+  const onChange = val => {
+    setValue(val);
   };
 
-  render() {
-    return (
-      <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />
-    );
-  }
-}
-
-export default () => <NumericInputDemo />;
+  return <NumericInput style={{ width: 120 }} value={value} onChange={onChange} />;
+};
 ```
 
 ```css