63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { InfiniteList, CommonCard } from '@zhst/biz'
|
|
import { uniqueId } from '@zhst/func'
|
|
|
|
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, index) => {
|
|
return {
|
|
id: uniqueId(),
|
|
sort: index + 1,
|
|
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={1200}
|
|
hasMore={data.length < 60}
|
|
data={data}
|
|
itemRender={(item) => {
|
|
return (
|
|
<CommonCard
|
|
key={item.id}
|
|
sort={item.sort}
|
|
data={item}
|
|
width="184px"
|
|
actions={[
|
|
<a>创建检索</a>,
|
|
<a>创建布控</a>,
|
|
<a>删除点位</a>
|
|
]}
|
|
/>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
}
|