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

keyboard navigation

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-12-11 23:20:09 +01:00
parent 486e3bebdb
commit 0ba8574d8b
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/Calender.jsx
View File

@ -93,7 +93,6 @@ const Calender = ({ onChange, calenderRef, close }) => {
index++;
}
}
// setState((prev) => ({ ...prev, selectedDay: todayTimestamp, monthDetails: monthArray }));
return monthArray;
},
[getNumberOfDays, getDayDetails]
@ -108,6 +107,9 @@ const Calender = ({ onChange, calenderRef, close }) => {
if (state.monthDetails) {
keyRef.current = keyRef.current.slice(0, state.monthDetails.length);
}
// set today date in focus for keyboard navigation
const todayDate = new Date(todayTimestamp).getDate();
keyRef.current.find((t) => t.tabIndex === todayDate)?.focus();
}, [state.monthDetails]);
const isCurrentDay = (day) => day.timestamp === todayTimestamp;
@ -216,7 +218,8 @@ const Calender = ({ onChange, calenderRef, close }) => {
const handleKeydown = (e, day, index) => {
if ((keyRef.current && e.key === 'Enter') || e.keyCode === 32) {
onDateClick(day);
e.preventDefault();
day.month === 0 && onDateClick(day);
}
if (e.key === 'ArrowLeft') {
index > 0 && keyRef.current[index - 1].focus();
@ -246,8 +249,7 @@ const Calender = ({ onChange, calenderRef, close }) => {
onClick={() => onDateClick(day)}
onkeydown={(e) => handleKeydown(e, day, idx)}
ref={(ref) => (keyRef.current[idx] = ref)}
autoFocus={isCurrentDay(day)}
tabIndex={idx}
tabIndex={day.month === 0 ? day.date : null}
className={`h-12 w-12 float-left flex flex-shrink justify-center items-center cursor-pointer ${
day.month !== 0 ? ' opacity-50 bg-gray-700 dark:bg-gray-700 pointer-events-none' : ''
}
@ -284,6 +286,7 @@ const Calender = ({ onChange, calenderRef, close }) => {
<div className="flex items-center">
<div className="w-1/6 relative flex justify-around">
<div
tabIndex={100}
className="flex justify-center items-center cursor-pointer absolute -mt-4 text-center rounded-full w-10 h-10 bg-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
onClick={() => setYear(-1)}
>
@ -292,6 +295,7 @@ const Calender = ({ onChange, calenderRef, close }) => {
</div>
<div className="w-1/6 relative flex justify-around ">
<div
tabIndex={101}
className="flex justify-center items-center cursor-pointer absolute -mt-4 text-center rounded-full w-10 h-10 bg-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
onClick={() => setMonth(-1)}
>
@ -304,13 +308,14 @@ const Calender = ({ onChange, calenderRef, close }) => {
</div>
<div className="w-1/6 relative flex justify-around ">
<div
tabIndex={102}
className="flex justify-center items-center cursor-pointer absolute -mt-4 text-center rounded-full w-10 h-10 bg-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
onClick={() => setMonth(1)}
>
<ArrowRight className="h-2/6" />
</div>
</div>
<div className="w-1/6 relative flex justify-around " onClick={() => setYear(1)}>
<div className="w-1/6 relative flex justify-around " tabIndex={104} onClick={() => setYear(1)}>
<div className="flex justify-center items-center cursor-pointer absolute -mt-4 text-center rounded-full w-10 h-10 bg-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800">
<ArrowRightDouble className="h-2/6" />
</div>

16
web/src/components/Select.jsx
View File

@ -71,7 +71,7 @@ export default function Select({
}, [type, options, inputOptions, propSelected, setSelected]);
const [focused, setFocused] = useState(null);
const [showDatePicker, setShowDatePicker] = useState(false);
const [showCalender, setShowCalender] = useState(false);
const calenderRef = useRef(null);
const ref = useRef(null);
@ -81,7 +81,7 @@ export default function Select({
setShowMenu(false);
//show calender date range picker
if (value === 'custom_range') return setShowDatePicker(true);
if (value === 'custom_range') return setShowCalender(true);
onChange && onChange(value);
},
[onChange, options, propSelected, setSelected]
@ -110,7 +110,7 @@ export default function Select({
setSelected(focused);
if (options[focused].value === 'custom_range') {
setShowMenu(false);
return setShowDatePicker(true);
return setShowCalender(true);
}
onChange && onChange(options[focused].value);
@ -184,8 +184,8 @@ export default function Select({
useEffect(() => {
const addBackDrop = (e) => {
if (showDatePicker && !findDOMNodes(calenderRef.current).contains(e.target)) {
setShowDatePicker(false);
if (showCalender && !findDOMNodes(calenderRef.current).contains(e.target)) {
setShowCalender(false);
}
};
window.addEventListener('click', addBackDrop);
@ -193,7 +193,7 @@ export default function Select({
return function cleanup() {
window.removeEventListener('click', addBackDrop);
};
}, [showDatePicker]);
}, [showCalender]);
switch (type) {
case 'datepicker':
@ -208,9 +208,9 @@ export default function Select({
trailingIcon={showMenu ? ArrowDropup : ArrowDropdown}
value={datePickerValue}
/>
{showDatePicker && (
{showCalender && (
<Menu className="rounded-t-none" onDismiss={handleDismiss} relativeTo={ref}>
<Calender onChange={handleDateRange} calenderRef={calenderRef} close={() => setShowDatePicker(false)} />
<Calender onChange={handleDateRange} calenderRef={calenderRef} close={() => setShowCalender(false)} />
</Menu>
)}
{showMenu ? (