diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index bd760dd2de..e6a4521deb 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -1021,70 +1021,102 @@ Array [ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
-
+
- - - + - - + + + + - - -
-
- No Data + +
+
+ No Data +
+
+
+ +
+
+

+
    +
  • +
+

+
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md index 550c5a79ff..c66e31f2f9 100644 --- a/components/list/demo/infinite-load.md +++ b/components/list/demo/infinite-load.md @@ -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 ( -
- - ( - - - } - title={{item.name.last}} - description={item.email} - /> -
Content
- - )} - > - {this.state.loading && this.state.hasMore && ( -
- -
- )} - - -
- ); - } -} + useEffect(() => { + loadMoreData(); + }, []); -ReactDOM.render(, mountNode); -``` + return ( +
+ } + endMessage={It is all, nothing more 🤐} + scrollableTarget="scrollableDiv" + > + ( + + + } + title={{item.name.last}} + description={item.email} + /> +
Content
+ + )} + /> + +
+ ); +}; -```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(, mountNode); ``` - - diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md index 6f6c4cc19f..893bcf630d 100644 --- a/components/list/demo/infinite-virtualized-load.md +++ b/components/list/demo/infinite-virtualized-load.md @@ -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'; diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md index d363360345..d1b234cecc 100644 --- a/components/list/demo/loadmore.md +++ b/components/list/demo/loadmore.md @@ -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; diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index 7198754179..107f7184de 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -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) | diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index 5a835b96c6..6f013b3d33 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -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) | diff --git a/package.json b/package.json index 9e49653995..846fca369e 100644 --- a/package.json +++ b/package.json @@ -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",