docs: replace class component with hooks (#35472)

* 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

components/cascader/demo/custom-trigger.md

@@ -39,29 +39,22 @@ const options = [
   },
 ];
 
-class CitySwitcher extends React.Component {
-  state = {
-    text: 'Unselect',
+export default () => {
+  const [text, setText] = React.useState('Unselect');
+
+  const onChange = (value, selectedOptions) => {
+    const labeText = selectedOptions.map(o => o.label).join(', ');
+    setText(labeText);
   };
 
-  onChange = (value, selectedOptions) => {
-    this.setState({
-      text: selectedOptions.map(o => o.label).join(', '),
-    });
-  };
-
-  render() {
-    return (
-      <span>
-        {this.state.text}
-        &nbsp;
-        <Cascader options={options} onChange={this.onChange}>
-          <a href="#">Change city</a>
-        </Cascader>
-      </span>
-    );
-  }
-}
-
-export default () => <CitySwitcher />;
+  return (
+    <span>
+      {text}
+      &nbsp;
+      <Cascader options={options} onChange={onChange}>
+        <a href="#">Change city</a>
+      </Cascader>
+    </span>
+  );
+};
 ```

components/checkbox/demo/controller.md

@@ -14,61 +14,44 @@ title:
 Communicated with other components.
 
 ```jsx
+import React, { useState } from 'react';
 import { Checkbox, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    checked: true,
-    disabled: false,
+export default () => {
+  const [checked, setChecked] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+
+  const toggleChecked = () => {
+    setChecked(!checked);
   };
 
-  toggleChecked = () => {
-    this.setState({ checked: !this.state.checked });
+  const toggleDisable = () => {
+    setDisabled(!disabled);
   };
 
-  toggleDisable = () => {
-    this.setState({ disabled: !this.state.disabled });
-  };
-
-  onChange = e => {
+  const onChange = e => {
     console.log('checked = ', e.target.checked);
-    this.setState({
-      checked: e.target.checked,
-    });
+    setChecked(e.target.checked);
   };
 
-  render() {
-    const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${
-      this.state.disabled ? 'Disabled' : 'Enabled'
-    }`;
-    return (
-      <>
-        <p style={{ marginBottom: '20px' }}>
-          <Checkbox
-            checked={this.state.checked}
-            disabled={this.state.disabled}
-            onChange={this.onChange}
-          >
-            {label}
-          </Checkbox>
-        </p>
-        <p>
-          <Button type="primary" size="small" onClick={this.toggleChecked}>
-            {!this.state.checked ? 'Check' : 'Uncheck'}
-          </Button>
-          <Button
-            style={{ margin: '0 10px' }}
-            type="primary"
-            size="small"
-            onClick={this.toggleDisable}
-          >
-            {!this.state.disabled ? 'Disable' : 'Enable'}
-          </Button>
-        </p>
-      </>
-    );
-  }
-}
+  const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
 
-export default App;
+  return (
+    <>
+      <p style={{ marginBottom: '20px' }}>
+        <Checkbox checked={checked} disabled={disabled} onChange={onChange}>
+          {label}
+        </Checkbox>
+      </p>
+      <p>
+        <Button type="primary" size="small" onClick={toggleChecked}>
+          {!checked ? 'Check' : 'Uncheck'}
+        </Button>
+        <Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}>
+          {!disabled ? 'Disable' : 'Enable'}
+        </Button>
+      </p>
+    </>
+  );
+};
 ```

components/collapse/demo/extra.md

@@ -39,48 +39,36 @@ const genExtra = () => (
   />
 );
 
-class Demo extends React.Component {
-  state = {
-    expandIconPosition: 'left',
+export default () => {
+  const [expandIconPosition, setExpandIconPosition] = React.useState('left');
+
+  const onPositionChange = position => {
+    setExpandIconPosition(position);
   };
-
-  onPositionChange = expandIconPosition => {
-    this.setState({ expandIconPosition });
-  };
-
-  render() {
-    const { expandIconPosition } = this.state;
-    return (
-      <>
-        <Collapse
-          defaultActiveKey={['1']}
-          onChange={callback}
-          expandIconPosition={expandIconPosition}
-        >
-          <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-            <div>{text}</div>
-          </Panel>
-          <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-            <div>{text}</div>
-          </Panel>
-          <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-            <div>{text}</div>
-          </Panel>
-        </Collapse>
-        <br />
-        <span>Expand Icon Position: </span>
-        <Select
-          value={expandIconPosition}
-          style={{ margin: '0 8px' }}
-          onChange={this.onPositionChange}
-        >
-          <Option value="left">left</Option>
-          <Option value="right">right</Option>
-        </Select>
-      </>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <>
+      <Collapse
+        defaultActiveKey={['1']}
+        onChange={callback}
+        expandIconPosition={expandIconPosition}
+      >
+        <Panel header="This is panel header 1" key="1" extra={genExtra()}>
+          <div>{text}</div>
+        </Panel>
+        <Panel header="This is panel header 2" key="2" extra={genExtra()}>
+          <div>{text}</div>
+        </Panel>
+        <Panel header="This is panel header 3" key="3" extra={genExtra()}>
+          <div>{text}</div>
+        </Panel>
+      </Collapse>
+      <br />
+      <span>Expand Icon Position: </span>
+      <Select value={expandIconPosition} style={{ margin: '0 8px' }} onChange={onPositionChange}>
+        <Option value="left">left</Option>
+        <Option value="right">right</Option>
+      </Select>
+    </>
+  );
+};
 ```

components/comment/demo/editor.md

@@ -41,32 +41,33 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
   </>
 );
 
-class App extends React.Component {
-  state = {
+export default () => {
+  const [state, setState] = React.useState({
     comments: [],
     submitting: false,
     value: '',
-  };
+  });
 
-  handleSubmit = () => {
-    if (!this.state.value) {
+  const handleSubmit = () => {
+    if (!state.value) {
       return;
     }
 
-    this.setState({
+    setState({
+      ...state,
       submitting: true,
     });
 
     setTimeout(() => {
-      this.setState({
+      setState({
         submitting: false,
         value: '',
         comments: [
-          ...this.state.comments,
+          ...state.comments,
           {
             author: 'Han Solo',
             avatar: 'https://joeschmoe.io/api/v1/random',
-            content: <p>{this.state.value}</p>,
+            content: <p>{state.value}</p>,
             datetime: moment().fromNow(),
           },
         ],
@@ -74,33 +75,28 @@ class App extends React.Component {
     }, 1000);
   };
 
-  handleChange = e => {
-    this.setState({
+  const handleChange = e => {
+    setState({
+      ...state,
       value: e.target.value,
     });
   };
 
-  render() {
-    const { comments, submitting, value } = this.state;
-
-    return (
-      <>
-        {comments.length > 0 && <CommentList comments={comments} />}
-        <Comment
-          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
-          content={
-            <Editor
-              onChange={this.handleChange}
-              onSubmit={this.handleSubmit}
-              submitting={submitting}
-              value={value}
-            />
-          }
-        />
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      {state.comments.length > 0 && <CommentList comments={state.comments} />}
+      <Comment
+        avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
+        content={
+          <Editor
+            onChange={handleChange}
+            onSubmit={handleSubmit}
+            submitting={state.submitting}
+            value={state.value}
+          />
+        }
+      />
+    </>
+  );
+};
 ```

components/descriptions/demo/size.md

@@ -16,72 +16,60 @@ Custom sizes to fit in a variety of containers.
 ```jsx
 import { Descriptions, Radio, Button } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    size: 'default',
-  };
+export default () => {
+  const [size, setSize] = React.useState('default');
 
-  onChange = e => {
+  const onChange = e => {
     console.log('size checked', e.target.value);
-    this.setState({
-      size: e.target.value,
-    });
+    setSize(e.target.value);
   };
 
-  render() {
-    return (
-      <div>
-        <Radio.Group onChange={this.onChange} value={this.state.size}>
-          <Radio value="default">default</Radio>
-          <Radio value="middle">middle</Radio>
-          <Radio value="small">small</Radio>
-        </Radio.Group>
-        <br />
-        <br />
-        <Descriptions
-          bordered
-          title="Custom Size"
-          size={this.state.size}
-          extra={<Button type="primary">Edit</Button>}
-        >
-          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-          <Descriptions.Item label="Config Info">
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1<br />
-          </Descriptions.Item>
-        </Descriptions>
-        <br />
-        <br />
-        <Descriptions
-          title="Custom Size"
-          size={this.state.size}
-          extra={<Button type="primary">Edit</Button>}
-        >
-          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-        </Descriptions>
-      </div>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <div>
+      <Radio.Group onChange={onChange} value={size}>
+        <Radio value="default">default</Radio>
+        <Radio value="middle">middle</Radio>
+        <Radio value="small">small</Radio>
+      </Radio.Group>
+      <br />
+      <br />
+      <Descriptions
+        bordered
+        title="Custom Size"
+        size={size}
+        extra={<Button type="primary">Edit</Button>}
+      >
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+        <Descriptions.Item label="Config Info">
+          Data disk type: MongoDB
+          <br />
+          Database version: 3.4
+          <br />
+          Package: dds.mongo.mid
+          <br />
+          Storage space: 10 GB
+          <br />
+          Replication factor: 3
+          <br />
+          Region: East China 1<br />
+        </Descriptions.Item>
+      </Descriptions>
+      <br />
+      <br />
+      <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+};
 ```