mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs: replace class component with hooks (#35461)

Browse Source 
* 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
This commit is contained in:
dingkang 2022-05-10 13:00:31 +08:00 committed by GitHub
parent 1d3fd70dbf
commit f5831f121d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 176 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/badge/demo/change.md
View File

@ -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);
const increase = () => {
setCount(count + 1);
};
increase = () => {
const count = this.state.count + 1;
this.setState({ count });
};
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} />
</>
);
};
```

101
components/button/demo/loading.md
View File

@ -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];
newLoadings[index] = false;
return {
loadings: newLoadings,
};
setTimeout(() => {
setLoadings(prevLoadings => {
const newLoadings = [...prevLoadings];
newLoadings[index] = false;
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>
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>
</>
);
}
}
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
components/button/demo/size.md
View File

@ -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
components/calendar/demo/select.md
View File

@ -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} />
</>
);
};
```

67
components/card/demo/loading.md
View File

@ -14,55 +14,48 @@ title:
Shows a loading indicator while the contents of the card is being fetched.
```jsx
import React, { useState } from 'react';
import { Skeleton, Switch, Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
const { Meta } = Card;
class App extends React.Component {
state = {
loading: true,
export default () => {
const [loading, setLoading] = useState(true);
const onChange = checked => {
setLoading(!checked);
};
onChange = checked => {
this.setState({ loading: !checked });
};
return (
<>
<Switch checked={!loading} onChange={onChange} />
render() {
const { loading } = this.state;
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Card>
return (
<>
<Switch checked={!loading} onChange={this.onChange} />
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Card>
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Skeleton>
</Card>
</>
);
}
}
export default App;
</Skeleton>
</Card>
</>
);
};
```