administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

useRef to scroll event into view

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-23 18:01:25 +02:00
parent f1ca73fc43
commit 8ca257ddb5
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/routes/Event.jsx
View File

@ -1,5 +1,5 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import { useCallback, useState, useEffect } from 'preact/hooks'; import { useCallback, useState, useEffect, useRef } from 'preact/hooks';
import ActivityIndicator from '../components/ActivityIndicator'; import ActivityIndicator from '../components/ActivityIndicator';
import Button from '../components/Button'; import Button from '../components/Button';
import Clip from '../icons/Clip'; import Clip from '../icons/Clip';
@ -11,7 +11,7 @@ import Heading from '../components/Heading';
import VideoPlayer from '../components/VideoPlayer'; import VideoPlayer from '../components/VideoPlayer';
import { FetchStatus, useApiHost, useEvent, useDelete } from '../api'; import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
export default function Event({ eventId, close, scrollIntoView }) { export default function Event({ eventId, close, scrollRef }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data, status } = useEvent(eventId); const { data, status } = useEvent(eventId);
const [showDialog, setShowDialog] = useState(false); const [showDialog, setShowDialog] = useState(false);
@ -20,8 +20,15 @@ export default function Event({ eventId, close, scrollIntoView }) {
useEffect(() => { useEffect(() => {
// Call Events.js scroll when this event has been mounted. // Call Events.js scroll when this event has been mounted.
scrollIntoView(eventId); // scrollIntoView(eventId);
}, [scrollIntoView, eventId]); scrollToElement();
}, [data]);
const scrollToElement = useCallback(() => {
if (scrollRef && scrollRef[eventId]) {
scrollRef[eventId].scrollIntoView();
}
}, [scrollRef]);
const handleClickDelete = () => { const handleClickDelete = () => {
setShowDialog(true); setShowDialog(true);

9
web/src/routes/Events.jsx
View File

@ -80,6 +80,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
} }
if (data && Array.isArray(data) && data.length + deleted < limit) { if (data && Array.isArray(data) && data.length + deleted < limit) {
console.log('reached end');
dispatch({ type: 'REACHED_END', meta: { searchString } }); dispatch({ type: 'REACHED_END', meta: { searchString } });
} }
}, [data, limit, searchString, searchStrings, deleted]); }, [data, limit, searchString, searchStrings, deleted]);
@ -129,12 +130,6 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
setViewEvent(id); setViewEvent(id);
}; };
// Called from the mounted event.js to prevent
// race condition between scollIntoView and if component has been mounted.
const scrollIntoView = (id) => {
if (id in scrollToRef) scrollToRef[id].scrollIntoView();
};
const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]); const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
return ( return (
@ -224,7 +219,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
{viewEvent === id ? ( {viewEvent === id ? (
<Tr className="border-b-1"> <Tr className="border-b-1">
<Td colSpan="8"> <Td colSpan="8">
<Event scrollIntoView={scrollIntoView} eventId={id} close={() => setViewEvent(null)} /> <Event eventId={id} close={() => setViewEvent(null)} scrollRef={scrollToRef} />
</Td> </Td>
</Tr> </Tr>
) : null} ) : null}