Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-12 16:35:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix Popover open state

Browse Source
This commit is contained in:
ajnart
2022-08-09 13:35:59 +02:00
parent 67a274804f
commit c76ef9643b
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/modules/search/SearchModule.tsx
View File

@@ -1,5 +1,5 @@
import { Kbd, createStyles, Autocomplete, Popover, ScrollArea, Divider } from '@mantine/core'; import { Kbd, createStyles, Autocomplete, Popover, ScrollArea, Divider } from '@mantine/core';
import { useDebouncedValue, useHotkeys } from '@mantine/hooks'; import { useClickOutside, useDebouncedValue, useHotkeys } from '@mantine/hooks';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { import {
@@ -38,7 +38,9 @@ export default function SearchBar(props: any) {
const { config } = useConfig(); const { config } = useConfig();
const isModuleEnabled = config.modules?.[SearchModule.title]?.enabled ?? false; const isModuleEnabled = config.modules?.[SearchModule.title]?.enabled ?? false;
const isOverseerrEnabled = config.modules?.[OverseerrModule.title]?.enabled ?? false; const isOverseerrEnabled = config.modules?.[OverseerrModule.title]?.enabled ?? false;
const OverseerrService = config.services.find((service) => service.type === 'Overseerr' || service.type === 'Jellyseerr'); const OverseerrService = config.services.find(
(service) => service.type === 'Overseerr' || service.type === 'Jellyseerr'
);
const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q='; const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
const [OverseerrResults, setOverseerrResults] = useState<any[]>([]); const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
@@ -46,6 +48,7 @@ export default function SearchBar(props: any) {
const [icon, setIcon] = useState(<Search />); const [icon, setIcon] = useState(<Search />);
const [results, setResults] = useState<any[]>([]); const [results, setResults] = useState<any[]>([]);
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const ref = useClickOutside(() => setOpened(false));
const textInput = useRef<HTMLInputElement>(); const textInput = useRef<HTMLInputElement>();
useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]); useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
@@ -61,7 +64,8 @@ export default function SearchBar(props: any) {
if (OverseerrService === undefined && isOverseerrEnabled) { if (OverseerrService === undefined && isOverseerrEnabled) {
showNotification({ showNotification({
title: 'Overseerr integration', title: 'Overseerr integration',
message: 'Module enabled but no service is configured with the type "Overseerr" / "Jellyseerr"', message:
'Module enabled but no service is configured with the type "Overseerr" / "Jellyseerr"',
color: 'red', color: 'red',
}); });
} }
@@ -177,15 +181,17 @@ export default function SearchBar(props: any) {
/> />
</Popover.Target> </Popover.Target>
<Popover.Dropdown onMouseLeave={() => setOpened(false)}> <Popover.Dropdown>
<ScrollArea style={{ height: 400, width: 400 }} offsetScrollbars> <div ref={ref}>
{OverseerrResults.slice(0, 5).map((result, index) => ( <ScrollArea style={{ height: 400, width: 400 }} offsetScrollbars>
<React.Fragment key={index}> {OverseerrResults.slice(0, 5).map((result, index) => (
<OverseerrMediaDisplay key={result.id} media={result} /> <React.Fragment key={index}>
{index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />} <OverseerrMediaDisplay key={result.id} media={result} />
</React.Fragment> {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
))} </React.Fragment>
</ScrollArea> ))}
</ScrollArea>
</div>
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
</form> </form>