mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: remove react-virtualized from demo

Browse Source
This commit is contained in:
afc163 2021-12-03 23:54:19 +08:00
parent bcb5002f08
commit ef8179e6b5
9 changed files with 174 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1122,20 +1122,6 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
</div>
`;
exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1`] = `
<div
class="ant-list ant-list-split"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
/>
</div>
</div>
`;
exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
<div
class="ant-list ant-list-split ant-list-loading demo-loadmore-list"
@ -2332,3 +2318,34 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</div>
</div>
`;
exports[`renders ./components/list/demo/virtual-list.md correctly 1`] = `
<div
class="ant-list ant-list-split"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="rc-virtual-list"
style="position:relative"
>
<div
class="rc-virtual-list-holder"
style="height:400px;overflow-y:auto;overflow-anchor:none"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display:flex;flex-direction:column"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;

166
components/list/demo/infinite-virtualized-load.md
View File

@ -1,166 +0,0 @@
---
order: 7
title:
zh-CN: 滚动加载无限长列表
en-US: Infinite & virtualized
---
## zh-CN
结合 [react-virtualized](https://github.com/bvaughn/react-virtualized) 实现滚动加载无限长列表，带有虚拟化（[virtualization](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/)）功能，能够提高数据量大时候长列表的性能。
`virtualized` 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。[了解更多](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/)
## en-US
An example of infinite list & virtualized loading using [react-virtualized](https://github.com/bvaughn/react-virtualized). [Learn more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/).
`Virtualized` rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.
```jsx
import { List, message, Avatar, Spin } from 'antd';
import reqwest from 'reqwest';
import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import VList from 'react-virtualized/dist/commonjs/List';
import InfiniteLoader from 'react-virtualized/dist/commonjs/InfiniteLoader';
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat,picture&noinfo';
class VirtualizedExample extends React.Component {
state = {
data: [],
loading: false,
};
loadedRowsMap = {};
componentDidMount() {
this.fetchData(res => {
this.setState({
data: res.results,
});
});
}
fetchData = callback => {
reqwest({
url: fakeDataUrl,
type: 'json',
method: 'get',
contentType: 'application/json',
success: res => {
callback(res);
},
});
};
handleInfiniteOnLoad = ({ startIndex, stopIndex }) => {
let { data } = this.state;
this.setState({
loading: true,
});
for (let i = startIndex; i <= stopIndex; i++) {
// 1 means loading
this.loadedRowsMap[i] = 1;
}
if (data.length > 19) {
message.warning('Virtualized List loaded all');
this.setState({
loading: false,
});
return;
}
this.fetchData(res => {
data = data.concat(res.results);
this.setState({
data,
loading: false,
});
});
};
isRowLoaded = ({ index }) => !!this.loadedRowsMap[index];
renderItem = ({ index, key, style }) => {
const { data } = this.state;
const item = data[index];
return (
<List.Item key={key} style={style}>
<List.Item.Meta
avatar={<Avatar src={item.picture.large} />}
title={<a href="https://ant.design">{item.name.last}</a>}
description={item.email}
/>
<div>Content</div>
</List.Item>
);
};
render() {
const { data } = this.state;
const vlist = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered, width }) => (
<VList
autoHeight
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={2}
rowCount={data.length}
rowHeight={73}
rowRenderer={this.renderItem}
onRowsRendered={onRowsRendered}
scrollTop={scrollTop}
width={width}
/>
);
const autoSize = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered }) => (
<AutoSizer disableHeight>
{({ width }) =>
vlist({
height,
isScrolling,
onChildScroll,
scrollTop,
onRowsRendered,
width,
})
}
</AutoSizer>
);
const infiniteLoader = ({ height, isScrolling, onChildScroll, scrollTop }) => (
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.handleInfiniteOnLoad}
rowCount={data.length}
>
{({ onRowsRendered }) =>
autoSize({
height,
isScrolling,
onChildScroll,
scrollTop,
onRowsRendered,
})
}
</InfiniteLoader>
);
return (
<List>
{data.length > 0 && <WindowScroller>{infiniteLoader}</WindowScroller>}
{this.state.loading && <Spin className="demo-loading" />}
</List>
);
}
}
ReactDOM.render(<VirtualizedExample />, mountNode);
```
```css
.demo-loading {
position: absolute;
bottom: -40px;
left: 50%;
}
```

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

@ -15,7 +15,6 @@ Load more list with `loadMore` property.
```jsx
import { List, Avatar, Button, Skeleton } from 'antd';
import reqwest from 'reqwest';
const count = 3;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
@ -29,27 +28,17 @@ class LoadMoreList extends React.Component {
};
componentDidMount() {
this.getData(res => {
this.setState({
initLoading: false,
data: res.results,
list: res.results,
fetch(fakeDataUrl)
.then(res => res.json())
.then(res => {
this.setState({
initLoading: false,
data: res.results,
list: res.results,
});
});
});
}
getData = callback => {
reqwest({
url: fakeDataUrl,
type: 'json',
method: 'get',
contentType: 'application/json',
success: res => {
callback(res);
},
});
};
onLoadMore = () => {
this.setState({
loading: true,
@ -57,22 +46,24 @@ class LoadMoreList extends React.Component {
[...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
),
});
this.getData(res => {
const data = this.state.data.concat(res.results);
this.setState(
{
data,
list: data,
loading: false,
},
() => {
// 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'));
},
);
});
fetch(fakeDataUrl)
.then(res => res.json())
.then(res => {
const data = this.state.data.concat(res.results);
this.setState(
{
data,
list: data,
loading: false,
},
() => {
// 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'));
},
);
});
};
render() {
@ -98,22 +89,20 @@ class LoadMoreList extends React.Component {
itemLayout="horizontal"
loadMore={loadMore}
dataSource={list}
renderItem={item =>
console.log(item) || (
<List.Item
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
>
<Skeleton avatar title={false} loading={item.loading} active>
<List.Item.Meta
avatar={<Avatar src={item.picture.large} />}
title={<a href="https://ant.design">{item.name.last}</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<div>content</div>
</Skeleton>
</List.Item>
)
}
renderItem={item => (
<List.Item
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
>
<Skeleton avatar title={false} loading={item.loading} active>
<List.Item.Meta
avatar={<Avatar src={item.picture.large} />}
title={<a href="https://ant.design">{item.name.last}</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<div>content</div>
</Skeleton>
</List.Item>
)}
/>
);
}

72
components/list/demo/virtual-list.md Normal file
View File

@ -0,0 +1,72 @@
---
order: 7
title:
zh-CN: 滚动加载无限长列表
en-US: virtual list
---
## zh-CN
结合 [rc-virtual-list](https://github.com/react-component/virtual-list) 实现滚动加载无限长列表，能够提高数据量大时候长列表的性能。
## en-US
An example of infinite & virtualized list via using [rc-virtual-list](https://github.com/react-component/virtual-list).
```jsx
import React, { useState, useEffect } from 'react';
import { List, message, Avatar } from 'antd';
import VirtualList from 'rc-virtual-list';
const fakeDataUrl =
'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
const ContainerHeight = 400;
const VirtualizedExample = () => {
const [data, setData] = useState([]);
const appendData = () => {
fetch(fakeDataUrl)
.then(res => res.json())
.then(body => {
setData(data.concat(body.results));
message.success(`${body.results.length} more items loaded!`);
});
};
useEffect(() => {
appendData();
}, []);
const onScroll = e => {
if (e.target.scrollHeight - e.target.scrollTop === ContainerHeight) {
appendData();
}
};
return (
<List>
<VirtualList
data={data}
height={ContainerHeight}
itemHeight={47}
itemKey="email"
onScroll={onScroll}
>
{item => (
<List.Item key={item.email}>
<List.Item.Meta
avatar={<Avatar src={item.picture.large} />}
title={<a href="https://ant.design">{item.name.last}</a>}
description={item.email}
/>
<div>Content</div>
</List.Item>
)}
</VirtualList>
</List>
);
};
ReactDOM.render(<VirtualizedExample />, mountNode);
```

4
components/select/demo/search-box.md
View File

@ -16,7 +16,7 @@ Search with remote data.
```jsx
import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
import qs from 'qs';
const { Option } = Select;
@ -31,7 +31,7 @@ function fetch(value, callback) {
currentValue = value;
function fake() {
const str = querystring.encode({
const str = qs.stringify({
code: 'utf-8',
q: value,
});

33
components/table/demo/ajax.md
View File

@ -27,7 +27,7 @@ Setting `rowSelection.preserveSelectedRowKeys` to keep the `key` when enable sel
```jsx
import { Table } from 'antd';
import reqwest from 'reqwest';
import qs from 'qs';
const columns = [
{
@ -84,24 +84,21 @@ class App extends React.Component {
fetch = (params = {}) => {
this.setState({ loading: true });
reqwest({
url: 'https://randomuser.me/api',
method: 'get',
type: 'json',
data: getRandomuserParams(params),
}).then(data => {
console.log(data);
this.setState({
loading: false,
data: data.results,
pagination: {
...params.pagination,
total: 200,
// 200 is mock data, you should read it from server
// total: data.totalCount,
},
fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
.then(res => res.json())
.then(data => {
console.log(data);
this.setState({
loading: false,
data: data.results,
pagination: {
...params.pagination,
total: 200,
// 200 is mock data, you should read it from server
// total: data.totalCount,
},
});
});
});
};
render() {

27
components/upload/demo/upload-manually.md
View File

@ -16,7 +16,6 @@ Upload files manually after `beforeUpload` returns `false`.
```jsx
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import reqwest from 'reqwest';
class Demo extends React.Component {
state = {
@ -30,31 +29,29 @@ class Demo extends React.Component {
fileList.forEach(file => {
formData.append('files[]', file);
});
this.setState({
uploading: true,
});
// You can use any AJAX library you like
reqwest({
url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
method: 'post',
processData: false,
data: formData,
success: () => {
fetch('https://www.mocky.io/v2/5cc8019d300000980a055e76', {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(() => {
this.setState({
fileList: [],
uploading: false,
});
message.success('upload successfully.');
},
error: () => {
})
.catch(() => {
message.error('upload failed.');
})
.finally(() => {
this.setState({
uploading: false,
});
message.error('upload failed.');
},
});
});
};
render() {

2
docs/react/recommendation.en-US.md
View File

@ -26,7 +26,7 @@ title: Third-Party Libraries
| i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
| Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
| Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
| Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
| Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
| Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |

2
docs/react/recommendation.zh-CN.md
View File

@ -26,7 +26,7 @@ title: 社区精选组件
| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
| Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
| 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
| 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
| 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |