beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

moved list Ref and added type definations

Browse source
This commit is contained in:
Abhinav 2021-10-28 16:49:25 +05:30
parent 98f1f9c388
commit 2bafe4d7e3
2 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/PhotoList.tsx
View file

@ -1,7 +1,7 @@
import React, { useRef, useEffect } from 'react'; import React, { useRef, useEffect } from 'react';
import { VariableSizeList as List } from 'react-window'; import { VariableSizeList as List } from 'react-window';
import styled from 'styled-components'; import styled from 'styled-components';
import { File } from 'services/fileService';
import { import {
IMAGE_CONTAINER_MAX_WIDTH, IMAGE_CONTAINER_MAX_WIDTH,
IMAGE_CONTAINER_MAX_HEIGHT, IMAGE_CONTAINER_MAX_HEIGHT,
@ -90,6 +90,16 @@ const BannerContainer = styled.div<{ span: number }>`
align-items: flex-end; align-items: flex-end;
`; `;
interface Props {
height: number;
width: number;
filteredData: File[];
showBanner: boolean;
getThumbnail: (file: File[], index: number) => JSX.Element;
activeCollection: number;
resetFetching: () => void;
}
export function PhotoList({ export function PhotoList({
height, height,
width, width,
@ -97,11 +107,20 @@ export function PhotoList({
showBanner, showBanner,
getThumbnail, getThumbnail,
activeCollection, activeCollection,
}) { resetFetching,
let columns = Math.floor(width / IMAGE_CONTAINER_MAX_WIDTH); }: Props) {
let listItemHeight = IMAGE_CONTAINER_MAX_HEIGHT;
const timeStampListRef = useRef([]); const timeStampListRef = useRef([]);
const timeStampList = timeStampListRef?.current ?? []; const timeStampList = timeStampListRef?.current ?? [];
const listRef = useRef(null);
let columns = Math.floor(width / IMAGE_CONTAINER_MAX_WIDTH);
let listItemHeight = IMAGE_CONTAINER_MAX_HEIGHT;
useEffect(() => {
listRef.current?.resetAfterIndex(0);
resetFetching();
}, [filteredData]);
useEffect(() => { useEffect(() => {
let skipMerge = false; let skipMerge = false;
if (columns < MIN_COLUMNS) { if (columns < MIN_COLUMNS) {
@ -335,7 +354,7 @@ export function PhotoList({
return ( return (
<List <List
key={`${columns}-${listItemHeight}-${activeCollection}`} key={`${columns}-${listItemHeight}-${activeCollection}`}
// ref={listRef} ref={listRef}
itemSize={getItemSize} itemSize={getItemSize}
height={height} height={height}
width={width} width={width}

7
src/components/PhotoWall.tsx
View file

@ -92,7 +92,6 @@ const PhotoWall = ({
const [fetching, setFetching] = useState<{ [k: number]: boolean }>({}); const [fetching, setFetching] = useState<{ [k: number]: boolean }>({});
const startTime = Date.now(); const startTime = Date.now();
const galleryContext = useContext(GalleryContext); const galleryContext = useContext(GalleryContext);
const listRef = useRef(null);
const [rangeStart, setRangeStart] = useState(null); const [rangeStart, setRangeStart] = useState(null);
const [currentHover, setCurrentHover] = useState(null); const [currentHover, setCurrentHover] = useState(null);
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false); const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
@ -134,10 +133,9 @@ const PhotoWall = ({
} }
}, [search]); }, [search]);
useEffect(() => { const resetFetching = () => {
listRef.current?.resetAfterIndex(0);
setFetching({}); setFetching({});
}, [files, search, deleted]); };
useEffect(() => { useEffect(() => {
if (selected.count === 0) { if (selected.count === 0) {
@ -415,6 +413,7 @@ const PhotoWall = ({
showBanner={ showBanner={
files.length < 30 && !isInSearchMode files.length < 30 && !isInSearchMode
} }
resetFetching={resetFetching}
/> />
)} )}
</AutoSizer> </AutoSizer>