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

⬆️ Migration to Mantine v5.0 in Popover

Browse Source
This commit is contained in:
ajnart
2022-08-07 17:20:34 +02:00
parent 03dd4b33ac
commit 68d1068059
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { Kbd, createStyles, Autocomplete } from '@mantine/core'; import { Kbd, createStyles, Autocomplete, Popover, ScrollArea, Divider } from '@mantine/core';
import { useDebouncedValue, useHotkeys } from '@mantine/hooks'; import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { import {
IconSearch as Search, IconSearch as Search,
IconBrandYoutube as BrandYoutube, IconBrandYoutube as BrandYoutube,
@@ -144,14 +144,16 @@ export default function SearchBar(props: any) {
<Popover <Popover
opened={OverseerrResults.length > 0 && opened} opened={OverseerrResults.length > 0 && opened}
position="bottom" position="bottom"
placement="start" withArrow
withinPortal
shadow="md"
radius="md" radius="md"
trapFocus={false} trapFocus
transition="pop-bottom-right" transition="pop-bottom-right"
onFocusCapture={() => setOpened(true)} >
onBlurCapture={() => setOpened(false)} <Popover.Target>
target={
<Autocomplete <Autocomplete
onFocusCapture={() => setOpened(true)}
autoFocus autoFocus
variant="filled" variant="filled"
data={autocompleteData} data={autocompleteData}
@@ -172,16 +174,18 @@ export default function SearchBar(props: any) {
{...props} {...props}
{...form.getInputProps('query')} {...form.getInputProps('query')}
/> />
} </Popover.Target>
>
<ScrollArea style={{ height: 400 }} offsetScrollbars> <Popover.Dropdown onBlurCapture={() => setOpened(false)}>
{OverseerrResults.slice(0, 5).map((result, index) => ( <ScrollArea style={{ height: 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>
</Popover.Dropdown>
</Popover> </Popover>
</form> </form>
); );