Skip to content

Commit

Permalink
docs: react-infinite-scroller => react-infinite-scroll-component (#32469
Browse files Browse the repository at this point in the history 
)

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

close #32388

* update

* replace recommendataion

* update snapshot
  • Loading branch information
@afc163
afc163 committed Oct 13, 2021
1 parent 0313871 commit 8cafb11
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 156 deletions.
114 changes: 73 additions & 41 deletions components/list/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
>
<ellipse
class="ant-empty-img-simple-ellipse"
cx="32"
cy="33"
rx="32"
ry="7"
/>
<svg
class="ant-empty-img-simple"
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
Expand Down
169 changes: 60 additions & 109 deletions components/list/demo/infinite-load.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}, []);

ReactDOM.render(<InfiniteListExample />, mountNode);
```
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>
);
};

```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;
}
ReactDOM.render(<InfiniteListExample />, mountNode);
```

<style>
[data-theme="dark"] .demo-infinite-container {
border: 1px solid #303030;
}
</style>
2 changes: 0 additions & 2 deletions components/list/demo/infinite-virtualized-load.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 0 additions & 1 deletion components/list/demo/loadmore.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion docs/react/recommendation.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
Expand Down
2 changes: 1 addition & 1 deletion docs/react/recommendation.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 8cafb11

Please sign in to comment.