mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 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

54
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}>
<Badge count={count}>
<Avatar shape="square" size="large" />
</Badge>
<ButtonGroup>
<Button onClick={this.decline}>
<Button onClick={decline}>
<MinusOutlined />
</Button>
<Button onClick={this.increase}>
<Button onClick={increase}>
<PlusOutlined />
</Button>
<Button onClick={this.random}>
<Button onClick={random}>
<QuestionOutlined />
</Button>
</ButtonGroup>
<Divider />
<Badge dot={this.state.show}>
<Badge dot={show}>
<Avatar shape="square" size="large" />
</Badge>
<Switch onChange={this.onChange} checked={this.state.show} />
<Switch onChange={onChange} checked={show} />
</>
);
}
}
export default Demo;
};
```

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

@ -14,37 +14,29 @@ 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%' }}>
@ -58,14 +50,14 @@ class App extends React.Component {
</Space>
<Space style={{ width: '100%' }}>
<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[1]}
onClick={() => this.enterLoading(1)}
onClick={() => enterLoading(1)}
>
Click me!
</Button>
@ -73,13 +65,10 @@ class App extends React.Component {
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[2]}
onClick={() => this.enterLoading(2)}
onClick={() => enterLoading(2)}
/>
</Space>
</>
);
}
}
export default App;
};
```

21
components/button/demo/size.md
View File

@ -18,23 +18,19 @@ 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.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>
@ -64,8 +60,5 @@ class ButtonSize extends React.Component {
</Button>
</>
);
}
}
export default () => <ButtonSize />;
};
```

31
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')}`}
message={`You selected date: ${
calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
}`}
/>
<Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
<Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
</>
);
}
}
export default App;
};
```

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

@ -14,26 +14,22 @@ 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);
onChange = checked => {
this.setState({ loading: !checked });
const onChange = checked => {
setLoading(!checked);
};
render() {
const { loading } = this.state;
return (
<>
<Switch checked={!loading} onChange={this.onChange} />
<Switch checked={!loading} onChange={onChange} />
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Meta
@ -61,8 +57,5 @@ class App extends React.Component {
</Card>
</>
);
}
}
export default App;
};
```