Skip to content

Commit

Permalink
docs: replace class component with hooks (#35472)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@poyiding
poyiding committed May 10, 2022
1 parent 338ec7d commit 5cf579c
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 209 deletions.
37 changes: 15 additions & 22 deletions components/cascader/demo/custom-trigger.md
View file
Expand Up @@ -39,29 +39,22 @@ const options = [
},
];

class CitySwitcher extends React.Component {
state = {
text: 'Unselect',
};
export default () => {
const [text, setText] = React.useState('Unselect');

onChange = (value, selectedOptions) => {
this.setState({
text: selectedOptions.map(o => o.label).join(', '),
});
const onChange = (value, selectedOptions) => {
const labeText = selectedOptions.map(o => o.label).join(', ');
setText(labeText);
};

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>
);
};
```
77 changes: 30 additions & 47 deletions components/checkbox/demo/controller.md
View file
Expand Up @@ -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);

toggleChecked = () => {
this.setState({ checked: !this.state.checked });
const toggleChecked = () => {
setChecked(!checked);
};

toggleDisable = () => {
this.setState({ disabled: !this.state.disabled });
const toggleDisable = () => {
setDisabled(!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>
</>
);
}
}

export default App;
const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;

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>
</>
);
};
```
72 changes: 30 additions & 42 deletions components/collapse/demo/extra.md
View file
Expand Up @@ -39,48 +39,36 @@ const genExtra = () => (
/>
);

class Demo extends React.Component {
state = {
expandIconPosition: 'left',
};
export default () => {
const [expandIconPosition, setExpandIconPosition] = React.useState('left');

onPositionChange = expandIconPosition => {
this.setState({ expandIconPosition });
const onPositionChange = position => {
setExpandIconPosition(position);
};

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>
</>
);
};
```
64 changes: 30 additions & 34 deletions components/comment/demo/editor.md
View file
Expand Up @@ -41,66 +41,62 @@ 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(),
},
],
});
}, 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}
/>
}
/>
</>
);
};
```

0 comments on commit 5cf579c

Please sign in to comment.