85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Avatar, Button, Skeleton, List} from 'antd';
|
|
|
|
|
|
const count = 3;
|
|
const fakeDataUrl = `http://localhost:8000/api/users`;
|
|
|
|
export default function () {
|
|
const [initLoading, setInitLoading] = useState(true);
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState([]);
|
|
const [list, setList] = useState([]);
|
|
useEffect(() => {
|
|
fetch(fakeDataUrl)
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
setInitLoading(false);
|
|
setData(res.results);
|
|
setList(res.results);
|
|
});
|
|
}, []);
|
|
const onLoadMore = () => {
|
|
setLoading(true);
|
|
setList(
|
|
data.concat(
|
|
[...new Array(count)].map(() => ({
|
|
loading: true,
|
|
name: {},
|
|
picture: {},
|
|
})),
|
|
),
|
|
);
|
|
fetch(fakeDataUrl)
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
const newData = data.concat(res.results);
|
|
setData(newData);
|
|
setList(newData);
|
|
setLoading(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'));
|
|
});
|
|
};
|
|
const loadMore =
|
|
!initLoading && !loading ? (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
marginTop: 12,
|
|
height: 32,
|
|
lineHeight: '32px',
|
|
}}
|
|
>
|
|
<Button onClick={onLoadMore}>loading more</Button>
|
|
</div>
|
|
) : null;
|
|
return (
|
|
<List
|
|
className="demo-loadmore-list"
|
|
loading={initLoading}
|
|
itemLayout="horizontal"
|
|
loadMore={loadMore}
|
|
dataSource={list}
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
|
|
>
|
|
<Skeleton avatar title={false} loading={item.loading} active>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.picture.large} />}
|
|
title={<a href="https://ant.design">{item.name?.last}</a>}
|
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
|
/>
|
|
<div>content</div>
|
|
</Skeleton>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
|
|
|