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 (#35580)

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

* 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

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks

* docs(drawer): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(empty): replace class component with hooks

* docs(grid): replace class component with hooks

* docs(input): replace class component with hooks

* docs(input-number): replace class component with hooks

* docs(demo): fix lint error

* docs(layout): replace class component with hooks

* docs(list): replace class component with hooks

* docs(mentions): replace class component with hooks

* docs: fix code review issue
This commit is contained in:
dingkang 2022-05-17 10:19:38 +08:00 committed by GitHub
parent bcc3274260
commit 196a4351e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 239 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/layout/demo/custom-trigger-debug.md
View File

@ -76,21 +76,16 @@ const items: MenuProps['items'] = [
},
];
class SiderDemo extends React.Component {
state = {
collapsed: true,
export default () => {
const [collapsed, setCollapsed] = React.useState(true);
const toggle = () => {
setCollapsed(!collapsed);
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu
theme="dark"
@ -102,9 +97,9 @@ class SiderDemo extends React.Component {
</Sider>
<Layout>
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
onClick: toggle,
})}
</Header>
<Content
@ -120,10 +115,7 @@ class SiderDemo extends React.Component {
</Layout>
</Layout>
);
}
}
export default () => <SiderDemo />;
};
```
```css

26
components/layout/demo/custom-trigger.md
View File

@ -25,21 +25,16 @@ import {
const { Header, Sider, Content } = Layout;
class SiderDemo extends React.Component {
state = {
collapsed: false,
export default () => {
const [collapsed, setCollapsed] = React.useState(false);
const toggle = () => {
setCollapsed(!collapsed);
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu
theme="dark"
@ -66,9 +61,9 @@ class SiderDemo extends React.Component {
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
onClick: toggle,
})}
</Header>
<Content
@ -84,10 +79,7 @@ class SiderDemo extends React.Component {
</Layout>
</Layout>
);
}
}
export default () => <SiderDemo />;
};
```
```css

23
components/layout/demo/side.md
View File

@ -63,21 +63,17 @@ const items: MenuItem[] = [
getItem('Files', '9', <FileOutlined />),
];
class SiderDemo extends React.Component {
state = {
collapsed: false,
export default () => {
const [collapsed, setCollapsed] = React.useState(false);
const onCollapse = (isCollapsed: boolean) => {
console.log(isCollapsed);
setCollapsed(isCollapsed);
};
onCollapse = (collapsed: boolean) => {
console.log(collapsed);
this.setState({ collapsed });
};
render() {
const { collapsed } = this.state;
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
</Sider>
@ -96,10 +92,7 @@ class SiderDemo extends React.Component {
</Layout>
</Layout>
);
}
}
export default () => <SiderDemo />;
};
```
```css

67
components/list/demo/loadmore.md
View File

@ -14,60 +14,48 @@ title:
Load more list with `loadMore` property.
```jsx
import React, { useEffect, useState } from 'react';
import { List, Avatar, Button, Skeleton } from 'antd';
const count = 3;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
class LoadMoreList extends React.Component {
state = {
initLoading: true,
loading: false,
data: [],
list: [],
};
export default () => {
const [initLoading, setInitLoading] = useState(true);
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
componentDidMount() {
useEffect(() => {
fetch(fakeDataUrl)
.then(res => res.json())
.then(res => {
this.setState({
initLoading: false,
data: res.results,
list: res.results,
setInitLoading(false);
setData(res.results);
});
});
}
}, []);
onLoadMore = () => {
this.setState({
loading: true,
list: this.state.data.concat(
[...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
),
});
fetch(fakeDataUrl)
.then(res => res.json())
.then(res => {
const data = this.state.data.concat(res.results);
this.setState(
{
data,
list: data,
loading: false,
},
() => {
useEffect(() => {
// Resetting window's offsetTop so as to display react-virtualized demo underfloor.
// In real scene, you can using public method of react-virtualized:
// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
window.dispatchEvent(new Event('resize'));
},
}, [JSON.stringify(data)]);
const onLoadMore = () => {
setLoading(true);
const newData = data.concat(
[...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
);
setData(newData);
fetch(fakeDataUrl)
.then(res => res.json())
.then(res => {
setLoading(false);
setData(data.concat(res.results));
});
};
render() {
const { initLoading, loading, list } = this.state;
const loadMore =
!initLoading && !loading ? (
<div
@ -78,7 +66,7 @@ class LoadMoreList extends React.Component {
lineHeight: '32px',
}}
>
<Button onClick={this.onLoadMore}>loading more</Button>
<Button onClick={onLoadMore}>loading more</Button>
</div>
) : null;
@ -88,7 +76,7 @@ class LoadMoreList extends React.Component {
loading={initLoading}
itemLayout="horizontal"
loadMore={loadMore}
dataSource={list}
dataSource={data}
renderItem={item => (
<List.Item
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
@ -105,10 +93,7 @@ class LoadMoreList extends React.Component {
)}
/>
);
}
}
export default () => <LoadMoreList />;
};
```
```css

61
components/mentions/demo/async.md
View File

@ -14,56 +14,46 @@ title:
async
```jsx
import React, { useState, useRef, useMemo } from 'react';
import { Mentions } from 'antd';
import debounce from 'lodash/debounce';
const { Option } = Mentions;
class AsyncMention extends React.Component {
constructor() {
super();
export default () => {
const [loading, setLoading] = useState(false);
const [users, setUsers] = useState([]);
const searchRef = useRef();
this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
}
state = {
search: '',
loading: false,
users: [],
};
onSearch = search => {
this.setState({ search, loading: !!search, users: [] });
console.log('Search:', search);
this.loadGithubUsers(search);
};
loadGithubUsers(key) {
const loadGithubUsers = useMemo(
() =>
debounce(key => {
if (!key) {
this.setState({
users: [],
});
setUsers([]);
return;
}
fetch(`https://api.github.com/search/users?q=${key}`)
.then(res => res.json())
.then(({ items = [] }) => {
const { search } = this.state;
if (search !== key) return;
this.setState({
users: items.slice(0, 10),
loading: false,
if (searchRef.current !== key) return;
setLoading(false);
setUsers(items.slice(0, 10));
});
});
}
}, 800),
[],
);
render() {
const { users, loading } = this.state;
const onSearch = search => {
setLoading(!!search);
setUsers([]);
searchRef.current = search;
console.log('Search:', search);
loadGithubUsers(search);
};
return (
<Mentions style={{ width: '100%' }} loading={loading} onSearch={this.onSearch}>
<Mentions style={{ width: '100%' }} loading={loading} onSearch={onSearch}>
{users.map(({ login, avatar_url: avatar }) => (
<Option key={login} value={login} className="antd-demo-dynamic-option">
<img src={avatar} alt={login} />
@ -72,10 +62,7 @@ class AsyncMention extends React.Component {
))}
</Mentions>
);
}
}
export default () => <AsyncMention />;
};
```
<style>

20
components/mentions/demo/prefix.md
View File

@ -23,24 +23,19 @@ const MOCK_DATA = {
'#': ['1.0', '2.0', '3.0'],
};
class App extends React.Component {
state = {
prefix: '@',
};
export default () => {
const [prefix, setPrefix] = React.useState('@');
onSearch = (_, prefix) => {
this.setState({ prefix });
const onSearch = (_, prefixValue) => {
setPrefix(prefixValue);
};
render() {
const { prefix } = this.state;
return (
<Mentions
style={{ width: '100%' }}
placeholder="input @ to mention people, # to mention tag"
prefix={['@', '#']}
onSearch={this.onSearch}
onSearch={onSearch}
>
{(MOCK_DATA[prefix] || []).map(value => (
<Option key={value} value={value}>
@ -49,8 +44,5 @@ class App extends React.Component {
))}
</Mentions>
);
}
}
export default App;
};
```