Skip to content

Commit

Permalink
docs: replace class component with hooks (#35461)
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
  • Loading branch information
@poyiding
poyiding committed May 10, 2022
1 parent 1d3fd70 commit f5831f1
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 205 deletions.
86 changes: 40 additions & 46 deletions components/badge/demo/change.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,65 +14,59 @@ title:
The count will be animated as it changes.

```jsx
import React, { useState } from 'react';
import { Badge, Button, Switch, Divider, Avatar } from 'antd';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';

const ButtonGroup = Button.Group;

class Demo extends React.Component {
state = {
count: 5,
show: true,
};
export default () => {
const [count, setCount] = useState(5);
const [show, setShow] = useState(true);

increase = () => {
const count = this.state.count + 1;
this.setState({ count });
const increase = () => {
setCount(count + 1);
};

decline = () => {
let count = this.state.count - 1;
if (count < 0) {
count = 0;
const decline = () => {
let countValue = count - 1;
if (countValue < 0) {
countValue = 0;
}
this.setState({ count });
setCount(countValue);
};

random = () => {
const count = Math.floor(Math.random() * 100);
this.setState({ count });
const random = () => {
const countValue = Math.floor(Math.random() * 100);
setCount(countValue);
};

onChange = show => {
this.setState({ show });
const onChange = isShow => {
setShow(isShow);
};

render() {
return (
<>
<Badge count={this.state.count}>
<Avatar shape="square" size="large" />
</Badge>
<ButtonGroup>
<Button onClick={this.decline}>
<MinusOutlined />
</Button>
<Button onClick={this.increase}>
<PlusOutlined />
</Button>
<Button onClick={this.random}>
<QuestionOutlined />
</Button>
</ButtonGroup>
<Divider />
<Badge dot={this.state.show}>
<Avatar shape="square" size="large" />
</Badge>
<Switch onChange={this.onChange} checked={this.state.show} />
</>
);
}
}

export default Demo;
return (
<>
<Badge count={count}>
<Avatar shape="square" size="large" />
</Badge>
<ButtonGroup>
<Button onClick={decline}>
<MinusOutlined />
</Button>
<Button onClick={increase}>
<PlusOutlined />
</Button>
<Button onClick={random}>
<QuestionOutlined />
</Button>
</ButtonGroup>
<Divider />
<Badge dot={show}>
<Avatar shape="square" size="large" />
</Badge>
<Switch onChange={onChange} checked={show} />
</>
);
};
```
99 changes: 44 additions & 55 deletions components/button/demo/loading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,72 +14,61 @@ title:
A loading indicator can be added to a button by setting the `loading` property on the `Button`.

```jsx
import React, { useEffect, useState, useRef } from 'react';
import { Button, Space } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';

class App extends React.Component {
state = {
loadings: [],
};
export default () => {
const [loadings, setLoadings] = useState([]);

enterLoading = index => {
this.setState(({ loadings }) => {
const newLoadings = [...loadings];
const enterLoading = index => {
setLoadings(prevLoadings => {
const newLoadings = [...prevLoadings];
newLoadings[index] = true;

return {
loadings: newLoadings,
};
return newLoadings;
});

setTimeout(() => {
this.setState(({ loadings }) => {
const newLoadings = [...loadings];
setLoadings(prevLoadings => {
const newLoadings = [...prevLoadings];
newLoadings[index] = false;

return {
loadings: newLoadings,
};
return newLoadings;
});
}, 6000);
};

render() {
const { loadings } = this.state;
return (
<>
<Space style={{ width: '100%' }}>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
<Button type="primary" icon={<PoweroffOutlined />} loading />
</Space>

<Space style={{ width: '100%' }}>
<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[1]}
onClick={() => this.enterLoading(1)}
>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[2]}
onClick={() => this.enterLoading(2)}
/>
</Space>
</>
);
}
}
return (
<>
<Space style={{ width: '100%' }}>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
<Button type="primary" icon={<PoweroffOutlined />} loading />
</Space>

export default App;
<Space style={{ width: '100%' }}>
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[1]}
onClick={() => enterLoading(1)}
>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[2]}
onClick={() => enterLoading(2)}
/>
</Space>
</>
);
};
```
83 changes: 38 additions & 45 deletions components/button/demo/size.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,54 +18,47 @@ Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.

```jsx
import React, { useState } from 'react';
import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';

class ButtonSize extends React.Component {
state = {
size: 'large',
export default () => {
const [size, setSize] = useState('large');
const handleSizeChange = e => {
setSize(e.target.value);
};

handleSizeChange = e => {
this.setState({ size: e.target.value });
};

render() {
const { size } = this.state;
return (
<>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Default</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<br />
<Button type="link" size={size}>
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size}>
Download
</Button>
</>
);
}
}

export default () => <ButtonSize />;
return (
<>
<Radio.Group value={size} onChange={handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Default</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<br />
<Button type="link" size={size}>
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size}>
Download
</Button>
</>
);
};
```
43 changes: 22 additions & 21 deletions components/calendar/demo/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,39 @@ title:
A basic calendar component with Year/Month switch.

```jsx
import React, { useState } from 'react';
import { Calendar, Alert } from 'antd';
import moment from 'moment';

class App extends React.Component {
state = {
export default () => {
const [calendar, setCalendar] = useState({
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
};
});

onSelect = value => {
this.setState({
const onSelect = value => {
setCalendar({
value,
selectedValue: value,
});
};

onPanelChange = value => {
this.setState({ value });
const onPanelChange = value => {
setCalendar({
...calendar,
value,
});
};

render() {
const { value, selectedValue } = this.state;
return (
<>
<Alert
message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
/>
<Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
</>
);
}
}

export default App;
return (
<>
<Alert
message={`You selected date: ${
calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
}`}
/>
<Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
</>
);
};
```

0 comments on commit f5831f1

Please sign in to comment.