mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
chore: remove react-virtualized from demo
This commit is contained in:
afc163
parent
bcb5002f08
commit
ef8179e6b5
@ -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>
|
||||
`;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
```
|
||||
@ -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,7 +28,9 @@ class LoadMoreList extends React.Component {
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.getData(res => {
|
||||
fetch(fakeDataUrl)
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
this.setState({
|
||||
initLoading: false,
|
||||
data: res.results,
|
||||
@ -38,18 +39,6 @@ class LoadMoreList extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
getData = callback => {
|
||||
reqwest({
|
||||
url: fakeDataUrl,
|
||||
type: 'json',
|
||||
method: 'get',
|
||||
contentType: 'application/json',
|
||||
success: res => {
|
||||
callback(res);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
onLoadMore = () => {
|
||||
this.setState({
|
||||
loading: true,
|
||||
@ -57,7 +46,9 @@ class LoadMoreList extends React.Component {
|
||||
[...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
|
||||
),
|
||||
});
|
||||
this.getData(res => {
|
||||
fetch(fakeDataUrl)
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
const data = this.state.data.concat(res.results);
|
||||
this.setState(
|
||||
{
|
||||
@ -98,8 +89,7 @@ class LoadMoreList extends React.Component {
|
||||
itemLayout="horizontal"
|
||||
loadMore={loadMore}
|
||||
dataSource={list}
|
||||
renderItem={item =>
|
||||
console.log(item) || (
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
|
||||
>
|
||||
@ -112,8 +102,7 @@ class LoadMoreList extends React.Component {
|
||||
<div>content</div>
|
||||
</Skeleton>
|
||||
</List.Item>
|
||||
)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
72
components/list/demo/virtual-list.md
Normal file
72
components/list/demo/virtual-list.md
Normal 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);
|
||||
```
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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,12 +84,9 @@ 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 => {
|
||||
fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
this.setState({
|
||||
loading: false,
|
||||
|
||||
@ -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,30 +29,28 @@ 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.');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -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) |
|
||||
|
||||
@ -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) |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user