monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

feat: auto load

Browse Source
This commit is contained in:
monoid 2022-08-31 04:53:12 +09:00
parent 4e77586821
commit 826d3d8b74
1 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/client/page/gallery.tsx
View File

@ -7,6 +7,7 @@ import { toQueryString } from '../accessor/util';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { QueryStringToMap } from '../accessor/util'; import { QueryStringToMap } from '../accessor/util';
import { useIsElementInViewport } from './reader/reader';
@ -22,6 +23,14 @@ export const GalleryInfo = (props: GalleryProp) => {
const [state, setState] = useState<GalleryState>({ documents: undefined }); const [state, setState] = useState<GalleryState>({ documents: undefined });
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [loadAll, setLoadAll] = useState(false); const [loadAll, setLoadAll] = useState(false);
const {elementRef, isVisible: isLoadVisible} = useIsElementInViewport<HTMLButtonElement>({});
useEffect(()=>{
if(isLoadVisible && (!loadAll) && (state.documents != undefined)){
loadMore();
}
},[isLoadVisible]);
useEffect(() => { useEffect(() => {
const abortController = new AbortController(); const abortController = new AbortController();
console.log('load first',props.option); console.log('load first',props.option);
@ -71,11 +80,13 @@ export const GalleryInfo = (props: GalleryProp) => {
justifyContent: "center", justifyContent: "center",
textAlign:"center" textAlign:"center"
}}>{state.documents ? state.documents.length : "null"} loaded...</Typography> }}>{state.documents ? state.documents.length : "null"} loaded...</Typography>
<Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button> <Button onClick={()=>loadMore()} disabled={loadAll} ref={elementRef} >{loadAll ? "Load All" : "Load More"}</Button>
</Box> </Box>
); );
}
function loadMore() { function loadMore() {
let option = {...props.option}; let option = {...props.option};
console.log(elementRef)
if(state.documents === undefined || state.documents.length === 0){ if(state.documents === undefined || state.documents.length === 0){
console.log("loadall"); console.log("loadall");
setLoadAll(true); setLoadAll(true);
@ -96,7 +107,6 @@ export const GalleryInfo = (props: GalleryProp) => {
load(); load();
} }
} }
}
export const Gallery = () => { export const Gallery = () => {
const location = useLocation(); const location = useLocation();