jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: icon picker keyboard interactions (#1666)

Browse Source
This commit is contained in:
Meier Lukas
2024-12-15 15:31:45 +01:00
committed by GitHub
parent 8ca00161fa
commit 82ec77d2da
2 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/nextjs/src/components/icons/picker/icon-picker.module.css Normal file
View File

@@ -0,0 +1,3 @@
[data-combobox-selected="true"] .iconCard {
border-color: var(--mantine-primary-color-6);
}

64
apps/nextjs/src/components/icons/picker/icon-picker.tsx
View File

@@ -20,6 +20,8 @@ import { useDebouncedValue } from "@mantine/hooks";
import { clientApi } from "@homarr/api/client"; import { clientApi } from "@homarr/api/client";
import { useScopedI18n } from "@homarr/translation/client"; import { useScopedI18n } from "@homarr/translation/client";
import classes from "./icon-picker.module.css";
interface IconPickerProps { interface IconPickerProps {
initialValue?: string; initialValue?: string;
onChange: (iconUrl: string) => void; onChange: (iconUrl: string) => void;
@@ -49,35 +51,43 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0; const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0;
const groups = data?.icons.map((group) => { const groups = data?.icons.map((group) => {
const options = group.icons.map((item) => ( const options = group.icons.map((item) => (
<UnstyledButton <Combobox.Option
onClick={() => {
const value = item.url;
startTransition(() => {
setValue(value);
setPreviewUrl(value);
setSearch(value);
onChange(value);
combobox.closeDropdown();
});
}}
key={item.id} key={item.id}
value={item.url}
p={0}
h="calc(2*var(--mantine-spacing-sm)+25px)"
w="calc(2*var(--mantine-spacing-sm)+25px)"
> >
<Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}> <UnstyledButton
<Card onClick={() => {
p="sm" const value = item.url;
pos="relative" startTransition(() => {
style={{ setValue(value);
overflow: "visible", setPreviewUrl(value);
cursor: "pointer", setSearch(value);
}} onChange(value);
withBorder combobox.closeDropdown();
> });
<Box w={25} h={25}> }}
<Image src={item.url} w={25} h={25} radius="md" /> >
</Box> <Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
</Card> <Card
</Indicator> p="sm"
</UnstyledButton> pos="relative"
style={{
overflow: "visible",
cursor: "pointer",
}}
className={classes.iconCard}
withBorder
>
<Box w={25} h={25}>
<Image src={item.url} w={25} h={25} radius="md" />
</Box>
</Card>
</Indicator>
</UnstyledButton>
</Combobox.Option>
)); ));
return ( return (