51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
||
import { InfiniteList } from '@zhst/biz'
|
||
|
||
export default () => {
|
||
const [data, setData] = useState([])
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const loadMoreData = () => {
|
||
if (loading) {
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
fetch('https://randomuser.me/api/?results=10&inc=id,key,name,gender,email,nat,picture&noinfo')
|
||
.then((res) => res.json())
|
||
.then((body) => {
|
||
let res = body.results.map(o => {
|
||
return {
|
||
title: o.name.first,
|
||
subtitle: o.name.last,
|
||
url: o.picture.large
|
||
}
|
||
})
|
||
setData([...data, ...res]);
|
||
setLoading(false);
|
||
})
|
||
.catch(() => {
|
||
setLoading(false);
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadMoreData();
|
||
}, []);
|
||
|
||
return (
|
||
<InfiniteList
|
||
loading={loading}
|
||
loadMore={loadMoreData}
|
||
height={300}
|
||
hasMore={data.length < 100}
|
||
data={data}
|
||
onItemClick={_data => console.log('item点击：', _data)}
|
||
searchCardProps={{
|
||
onAdd: (_data) => console.log('新增', _data),
|
||
onCreate: (_data) => console.log('创建', _data),
|
||
onRemove: (_data) => console.log('删除', _data),
|
||
}}
|
||
/>
|
||
)
|
||
}
|