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

scroll into view

Browse Source
This commit is contained in:
Bernt Christian Egeland 2023-01-22 15:10:05 +01:00
parent 36d6c7147a
commit a6d18fed92
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/TimePicker.jsx
View File

@ -1,4 +1,3 @@
/* eslint-disable no-console */
import { h } from 'preact'; import { h } from 'preact';
import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'; import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
import { ArrowDropdown } from '../icons/ArrowDropdown'; import { ArrowDropdown } from '../icons/ArrowDropdown';
@ -33,6 +32,15 @@ const TimePicker = ({ dateRange, onChange }) => {
for (let hour = after.getHours(); hour < beforeOffset; hour++) { for (let hour = after.getHours(); hour < beforeOffset; hour++) {
setTimeRange((timeRange) => timeRange.add(hour)); setTimeRange((timeRange) => timeRange.add(hour));
} }
/**
* find an element by the id timeIndex- concatenated with the minimum value from timeRange array,
* and if that element is present, it will scroll into view if needed
*/
const element = document.getElementById(`timeIndex-${Math.min(...timeRange)}`);
if (element) {
element.scrollIntoViewIfNeeded(true);
}
}, [dateRange, timeRange, reset]); }, [dateRange, timeRange, reset]);
/** /**
@ -198,6 +206,7 @@ const TimePicker = ({ dateRange, onChange }) => {
{hoursInDays.map((_, idx) => ( {hoursInDays.map((_, idx) => (
<div <div
key={idx} key={idx}
id={`timeIndex-${idx}`}
className={`${isSelected(idx) ? isSelectedCss : ''} className={`${isSelected(idx) ? isSelectedCss : ''}
${isHovered(idx) ? 'opacity-30 bg-slate-900 transition duration-150 ease-in-out' : ''} ${isHovered(idx) ? 'opacity-30 bg-slate-900 transition duration-150 ease-in-out' : ''}
${Math.min(...timeRange) === idx ? 'rounded-t-lg' : ''} ${Math.min(...timeRange) === idx ? 'rounded-t-lg' : ''}