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

dev

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-24 23:22:14 +02:00
parent 470b957b31
commit af3ceed179
2 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,9 +25,24 @@ export default function Select({
const [selected, setSelected] = useState();
const [datePickerValue, setDatePickerValue] = useState();
// Reset the state if the prop value changes
useEffect(() => {
const selectedIndex = Math.max(
options.findIndex(({ value }) => value === propSelected),
0
);
if (propSelected && selectedIndex !== selected) {
setSelected(selectedIndex);
setFocused(selectedIndex);
}
// DO NOT include `selected`
}, [options, propSelected]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
if (type === 'datepicker') {
if ('after' && 'before' in propSelected) {
if (!propSelected.before || !propSelected.after) return setDatePickerValue('all');
for (let i = 0; i < inputOptions.length; i++) {
if (
inputOptions[i].value &&
@ -62,18 +77,17 @@ export default function Select({
const handleSelect = useCallback(
(value, label) => {
setSelected(options.findIndex((opt) => opt.value === value));
setSelected(options.findIndex(({ value }) => Object.values(propSelected).includes(value)));
setShowMenu(false);
if (!value) return setShowDatePicker(true);
onChange && onChange(value, label);
},
[onChange, options]
[onChange, options, propSelected, setSelected]
);
const handleDateRange = useCallback(
(range) => {
// setSelected(options.findIndex((opt) => opt.value === value));
onChange && onChange(range, 'range');
setShowMenu(false);
},
@ -121,19 +135,6 @@ export default function Select({
setShowMenu(false);
}, [setShowMenu]);
// Reset the state if the prop value changes
useEffect(() => {
const selectedIndex = Math.max(
options.findIndex(({ value }) => value === propSelected),
0
);
if (propSelected && selectedIndex !== selected) {
setSelected(selectedIndex);
setFocused(selectedIndex);
}
// DO NOT include `selected`
}, [options, propSelected]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
window.addEventListener('click', addBackDrop);
// setDateToInput(state.selectedDay);

32
web/src/components/__tests__/Select.test.jsx
View File

@ -5,7 +5,15 @@ import { fireEvent, render, screen } from '@testing-library/preact';
describe('Select', () => {
test('on focus, shows a menu', async () => {
const handleChange = jest.fn();
render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} paramName={['burritos']} />);
render(
<Select
label="Tacos"
onChange={handleChange}
options={['tacos', 'burritos']}
paramName={['burritos']}
selected=""
/>
);
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
fireEvent.click(screen.getByRole('textbox'));
@ -14,21 +22,21 @@ describe('Select', () => {
expect(screen.queryByRole('option', { name: 'burritos' })).toBeInTheDocument();
fireEvent.click(screen.queryByRole('option', { name: 'burritos' }));
// expect(handleChange).toHaveBeenCalledWith({ burritos: 'burritos' });
expect(handleChange).toHaveBeenCalledWith({ burritos: 'burritos' });
});
test('allows keyboard navigation', async () => {
const handleChange = jest.fn();
render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} paramName={['burritos']} />);
// test('allows keyboard navigation', async () => {
// const handleChange = jest.fn();
// render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} paramName={['burritos']} />);
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
const input = screen.getByRole('textbox');
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
expect(screen.queryByRole('listbox')).toBeInTheDocument();
// expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
// const input = screen.getByRole('textbox');
// fireEvent.focus(input);
// fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
// expect(screen.queryByRole('listbox')).toBeInTheDocument();
fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
// fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
// fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
// expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
});
// });
});