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

docs: react-infinite-scroller => react-infinite-scroll-component (#32469)

Browse Source 
* docs: react-infinite-scroller => react-infinite-scroll-component

close #32388

* update

* replace recommendataion

* update snapshot
This commit is contained in:
afc163 2021-10-13 18:59:17 +08:00 committed by GitHub
parent 0313871c16
commit 8cafb114a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 135 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1021,70 +1021,102 @@ Array [
exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
<div
class="demo-infinite-container"
id="scrollableDiv"
style="height:400px;overflow:auto;padding:0 16px;border:1px solid rgba(140, 140, 140, 0.35)"
>
<div>
<div
class="infinite-scroll-component__outerdiv"
>
<div
class="ant-list ant-list-split"
class="infinite-scroll-component "
style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
>
<div
class="ant-spin-nested-loading"
class="ant-list ant-list-split"
>
<div
class="ant-spin-container"
class="ant-spin-nested-loading"
>
<div
class="ant-list-empty-text"
class="ant-spin-container"
>
<div
class="ant-empty ant-empty-normal"
class="ant-list-empty-text"
>
<div
class="ant-empty-image"
class="ant-empty ant-empty-normal"
>
<svg
class="ant-empty-img-simple"
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
<div
class="ant-empty-image"
>
<g
fill="none"
fill-rule="evenodd"
transform="translate(0 1)"
<svg
class="ant-empty-img-simple"
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
class="ant-empty-img-simple-ellipse"
cx="32"
cy="33"
rx="32"
ry="7"
/>
<g
class="ant-empty-img-simple-g"
fill-rule="nonzero"
fill="none"
fill-rule="evenodd"
transform="translate(0 1)"
>
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
/>
<path
class="ant-empty-img-simple-path"
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
<ellipse
class="ant-empty-img-simple-ellipse"
cx="32"
cy="33"
rx="32"
ry="7"
/>
<g
class="ant-empty-img-simple-g"
fill-rule="nonzero"
>
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
/>
<path
class="ant-empty-img-simple-path"
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
/>
</g>
</g>
</g>
</svg>
</div>
<div
class="ant-empty-description"
>
No Data
</svg>
</div>
<div
class="ant-empty-description"
>
No Data
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
>
<div
class="ant-skeleton-header"
>
<span
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
/>
</div>
<div
class="ant-skeleton-content"
>
<h3
class="ant-skeleton-title"
style="width:50%"
/>
<ul
class="ant-skeleton-paragraph"
>
<li />
</ul>
</div>
</div>
</div>
</div>
</div>

169
components/list/demo/infinite-load.md
View File

@ -7,127 +7,78 @@ title:
## zh-CN
结合 [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller) 实现滚动自动加载列表。
结合 [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) 实现滚动自动加载列表。
## en-US
The example of infinite load with [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller).
The example of infinite load with [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
```jsx
import { List, message, Avatar, Spin } from 'antd';
import reqwest from 'reqwest';
import React, { useState, useEffect } from 'react';
import { List, message, Avatar, Skeleton, Divider } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import InfiniteScroll from 'react-infinite-scroller';
const InfiniteListExample = () => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
class InfiniteListExample extends React.Component {
state = {
data: [],
loading: false,
hasMore: true,
};
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 = () => {
let { data } = this.state;
this.setState({
loading: true,
});
if (data.length > 14) {
message.warning('Infinite List loaded all');
this.setState({
hasMore: false,
loading: false,
});
const loadMoreData = () => {
if (loading) {
return;
}
this.fetchData(res => {
data = data.concat(res.results);
this.setState({
data,
loading: false,
setLoading(true);
fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo')
.then(res => res.json())
.then(body => {
setData([...data, ...body.results]);
setLoading(false);
})
.catch(() => {
setLoading(false);
});
});
};
render() {
return (
<div className="demo-infinite-container">
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
hasMore={!this.state.loading && this.state.hasMore}
useWindow={false}
>
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title={<a href="https://ant.design">{item.name.last}</a>}
description={item.email}
/>
<div>Content</div>
</List.Item>
)}
>
{this.state.loading && this.state.hasMore && (
<div className="demo-loading-container">
<Spin />
</div>
)}
</List>
</InfiniteScroll>
</div>
);
}
}
useEffect(() => {
loadMoreData();
}, []);
return (
<div
id="scrollableDiv"
style={{
height: 400,
overflow: 'auto',
padding: '0 16px',
border: '1px solid rgba(140, 140, 140, 0.35)',
}}
>
<InfiniteScroll
dataLength={data.length}
next={loadMoreData}
hasMore={data.length < 50}
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
scrollableTarget="scrollableDiv"
>
<List
dataSource={data}
renderItem={item => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title={<a href="https://ant.design">{item.name.last}</a>}
description={item.email}
/>
<div>Content</div>
</List.Item>
)}
/>
</InfiniteScroll>
</div>
);
};
ReactDOM.render(<InfiniteListExample />, mountNode);
```
```css
.demo-infinite-container {
height: 300px;
padding: 8px 24px;
overflow: auto;
border: 1px solid #e8e8e8;
border-radius: 4px;
}
.demo-loading-container {
position: absolute;
bottom: 40px;
width: 100%;
text-align: center;
}
```
<style>
[data-theme="dark"] .demo-infinite-container {
border: 1px solid #303030;
}
</style>

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

@ -19,9 +19,7 @@ An example of infinite list & virtualized loading using [react-virtualized](http
```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';

1
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;

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) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
| 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) |
| 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) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
| 无限滚动 | [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) |
| 地图 | [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) |

2
package.json
View File

@ -250,7 +250,7 @@
"react-github-button": "^0.1.11",
"react-helmet-async": "~1.1.2",
"react-highlight-words": "^0.17.0",
"react-infinite-scroller": "^1.2.4",
"react-infinite-scroll-component": "^6.1.0",
"react-intl": "^5.20.4",
"react-resizable": "^3.0.1",
"react-router-dom": "^5.0.1",