48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import BorderImage from "./borderImage";
|
|
import InfiniteScroll from "react-infinite-scroll-component";
|
|
import { useEffect, useState } from "react";
|
|
import styles from "../styles/Components.module.css";
|
|
|
|
const pageSize = 48;
|
|
|
|
export default function Select(props) {
|
|
const { data, total, onSelect, selected = {} } = props;
|
|
// console.log("data", data, "selected", selected, total);
|
|
|
|
const [scrollIndex, setScrollIndex] = useState(36);
|
|
const [scrollData, setScrollData] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setScrollData(data.slice(0, pageSize - 1));
|
|
}, [data]);
|
|
|
|
const fetchMore = () => {
|
|
let newData = data.slice(scrollIndex, scrollIndex + pageSize);
|
|
setScrollData([...scrollData, ...newData]);
|
|
setScrollIndex(scrollIndex + pageSize);
|
|
};
|
|
|
|
return (
|
|
<InfiniteScroll
|
|
dataLength={scrollData?.length || 0}
|
|
next={fetchMore}
|
|
hasMore={total > scrollData?.length || 0}
|
|
height={"75vh"}
|
|
className={styles.select}
|
|
loader={<h4>Loading...</h4>}
|
|
endMessage={<h4>No more borders.</h4>}>
|
|
{scrollData &&
|
|
scrollData.map((border, index) => {
|
|
return (
|
|
<BorderImage
|
|
key={border.id}
|
|
border={border}
|
|
selected={selected}
|
|
onSelect={onSelect}
|
|
/>
|
|
);
|
|
})}
|
|
</InfiniteScroll>
|
|
);
|
|
}
|