diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
index 11f4a566b5..56e0c6a1be 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -1122,20 +1122,6 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
`;
-exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1`] = `
-
-`;
-
exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
`;
+
+exports[`renders ./components/list/demo/virtual-list.md correctly 1`] = `
+
+`;
diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
deleted file mode 100644
index 8691965832..0000000000
--- a/components/list/demo/infinite-virtualized-load.md
+++ /dev/null
@@ -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 (
-
- }
- title={{item.name.last}}
- description={item.email}
- />
- Content
-
- );
- };
-
- render() {
- const { data } = this.state;
- const vlist = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered, width }) => (
-
- );
- const autoSize = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered }) => (
-
- {({ width }) =>
- vlist({
- height,
- isScrolling,
- onChildScroll,
- scrollTop,
- onRowsRendered,
- width,
- })
- }
-
- );
- const infiniteLoader = ({ height, isScrolling, onChildScroll, scrollTop }) => (
-
- {({ onRowsRendered }) =>
- autoSize({
- height,
- isScrolling,
- onChildScroll,
- scrollTop,
- onRowsRendered,
- })
- }
-
- );
- return (
-
- {data.length > 0 && {infiniteLoader}}
- {this.state.loading && }
-
- );
- }
-}
-
-ReactDOM.render(, mountNode);
-```
-
-```css
-.demo-loading {
- position: absolute;
- bottom: -40px;
- left: 50%;
-}
-```
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index 86e76afe7c..0ba11a8e92 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;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
@@ -29,27 +28,17 @@ class LoadMoreList extends React.Component {
};
componentDidMount() {
- this.getData(res => {
- this.setState({
- initLoading: false,
- data: res.results,
- list: res.results,
+ fetch(fakeDataUrl)
+ .then(res => res.json())
+ .then(res => {
+ this.setState({
+ initLoading: false,
+ data: res.results,
+ list: res.results,
+ });
});
- });
}
- getData = callback => {
- reqwest({
- url: fakeDataUrl,
- type: 'json',
- method: 'get',
- contentType: 'application/json',
- success: res => {
- callback(res);
- },
- });
- };
-
onLoadMore = () => {
this.setState({
loading: true,
@@ -57,22 +46,24 @@ class LoadMoreList extends React.Component {
[...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
),
});
- this.getData(res => {
- const data = this.state.data.concat(res.results);
- this.setState(
- {
- data,
- list: data,
- loading: false,
- },
- () => {
- // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
- // In real scene, you can using public method of react-virtualized:
- // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
- window.dispatchEvent(new Event('resize'));
- },
- );
- });
+ fetch(fakeDataUrl)
+ .then(res => res.json())
+ .then(res => {
+ const data = this.state.data.concat(res.results);
+ this.setState(
+ {
+ data,
+ list: data,
+ loading: false,
+ },
+ () => {
+ // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+ // In real scene, you can using public method of react-virtualized:
+ // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+ window.dispatchEvent(new Event('resize'));
+ },
+ );
+ });
};
render() {
@@ -98,22 +89,20 @@ class LoadMoreList extends React.Component {
itemLayout="horizontal"
loadMore={loadMore}
dataSource={list}
- renderItem={item =>
- console.log(item) || (
- edit, more]}
- >
-
- }
- title={{item.name.last}}
- description="Ant Design, a design language for background applications, is refined by Ant UED Team"
- />
- content
-
-
- )
- }
+ renderItem={item => (
+ edit, more]}
+ >
+
+ }
+ title={{item.name.last}}
+ description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+ />
+ content
+
+
+ )}
/>
);
}
diff --git a/components/list/demo/virtual-list.md b/components/list/demo/virtual-list.md
new file mode 100644
index 0000000000..ae3f531fdf
--- /dev/null
+++ b/components/list/demo/virtual-list.md
@@ -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 (
+
+
+ {item => (
+
+ }
+ title={{item.name.last}}
+ description={item.email}
+ />
+ Content
+
+ )}
+
+
+ );
+};
+
+ReactDOM.render(, mountNode);
+```
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index 0de8ede393..b98beb7b97 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -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,
});
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index e84ecff8ce..8292952afa 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -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,24 +84,21 @@ 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 => {
- console.log(data);
- this.setState({
- loading: false,
- data: data.results,
- pagination: {
- ...params.pagination,
- total: 200,
- // 200 is mock data, you should read it from server
- // total: data.totalCount,
- },
+ fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data);
+ this.setState({
+ loading: false,
+ data: data.results,
+ pagination: {
+ ...params.pagination,
+ total: 200,
+ // 200 is mock data, you should read it from server
+ // total: data.totalCount,
+ },
+ });
});
- });
};
render() {
diff --git a/components/upload/demo/upload-manually.md b/components/upload/demo/upload-manually.md
index c8c3f0cc57..1db5f147d3 100644
--- a/components/upload/demo/upload-manually.md
+++ b/components/upload/demo/upload-manually.md
@@ -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,31 +29,29 @@ 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.');
- },
- });
+ });
};
render() {
diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md
index 95f55d33ee..64ea436e38 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) [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) |
diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md
index 8501c987b4..8c34b9c779 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) [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) |