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

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

close #32388

* update

* replace recommendataion

* update snapshot

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -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
+                <div
-                  class="ant-empty-img-simple"
+                  class="ant-empty-image"
-                  height="41"
-                  viewBox="0 0 64 41"
-                  width="64"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <g
+                  <svg
-                    fill="none"
+                    class="ant-empty-img-simple"
-                    fill-rule="evenodd"
+                    height="41"
-                    transform="translate(0 1)"
+                    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="none"
-                      fill-rule="nonzero"
+                      fill-rule="evenodd"
+                      transform="translate(0 1)"
                     >
-                      <path
+                      <ellipse
-                        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"
+                        class="ant-empty-img-simple-ellipse"
-                      />
+                        cx="32"
-                      <path
+                        cy="33"
-                        class="ant-empty-img-simple-path"
+                        rx="32"
-                        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"
+                        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>
-                </svg>
+                </div>
-              </div>
+                <div
-              <div
+                  class="ant-empty-description"
-                class="ant-empty-description"
+                >
-              >
+                  No Data
-                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>

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 React, { useState, useEffect } from 'react';
-import reqwest from 'reqwest';
+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';
+  const loadMoreData = () => {
-
+    if (loading) {
-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,
-      });
       return;
     }
-    this.fetchData(res => {
+    setLoading(true);
-      data = data.concat(res.results);
+    fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo')
-      this.setState({
+      .then(res => res.json())
-        data,
+      .then(body => {
-        loading: false,
+        setData([...data, ...body.results]);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
       });
-    });
   };
 
-  render() {
+  useEffect(() => {
-    return (
+    loadMoreData();
-      <div className="demo-infinite-container">
+  }, []);
-        <InfiniteScroll
+
-          initialLoad={false}
+  return (
-          pageStart={0}
+    <div
-          loadMore={this.handleInfiniteOnLoad}
+      id="scrollableDiv"
-          hasMore={!this.state.loading && this.state.hasMore}
+      style={{
-          useWindow={false}
+        height: 400,
-        >
+        overflow: 'auto',
-          <List
+        padding: '0 16px',
-            dataSource={this.state.data}
+        border: '1px solid rgba(140, 140, 140, 0.35)',
-            renderItem={item => (
+      }}
-              <List.Item key={item.id}>
+    >
-                <List.Item.Meta
+      <InfiniteScroll
-                  avatar={
+        dataLength={data.length}
-                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+        next={loadMoreData}
-                  }
+        hasMore={data.length < 50}
-                  title={<a href="https://ant.design">{item.name.last}</a>}
+        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-                  description={item.email}
+        endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
-                />
+        scrollableTarget="scrollableDiv"
-                <div>Content</div>
+      >
-              </List.Item>
+        <List
-            )}
+          dataSource={data}
-          >
+          renderItem={item => (
-            {this.state.loading && this.state.hasMore && (
+            <List.Item key={item.id}>
-              <div className="demo-loading-container">
+              <List.Item.Meta
-                <Spin />
+                avatar={
-              </div>
+                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-            )}
+                }
-          </List>
+                title={<a href="https://ant.design">{item.name.last}</a>}
-        </InfiniteScroll>
+                description={item.email}
-      </div>
+              />
-    );
+              <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>

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

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;

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) |

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) |

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",