143 lines
4.0 KiB
TypeScript
143 lines
4.0 KiB
TypeScript
import type { FocusEventHandler } from "react";
|
|
import { startTransition, useState } from "react";
|
|
import {
|
|
Box,
|
|
Card,
|
|
Combobox,
|
|
Flex,
|
|
Image,
|
|
Indicator,
|
|
InputBase,
|
|
Paper,
|
|
Skeleton,
|
|
Stack,
|
|
Text,
|
|
UnstyledButton,
|
|
useCombobox,
|
|
} from "@mantine/core";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
interface IconPickerProps {
|
|
initialValue?: string;
|
|
onChange: (iconUrl: string) => void;
|
|
error?: string | null;
|
|
onFocus?: FocusEventHandler;
|
|
onBlur?: FocusEventHandler;
|
|
}
|
|
|
|
export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
|
|
const [value, setValue] = useState<string>(initialValue ?? "");
|
|
const [search, setSearch] = useState(initialValue ?? "");
|
|
const [previewUrl, setPreviewUrl] = useState<string | null>(initialValue ?? null);
|
|
|
|
const tCommon = useScopedI18n("common");
|
|
|
|
const [data] = clientApi.icon.findIcons.useSuspenseQuery({
|
|
searchText: search,
|
|
});
|
|
|
|
const combobox = useCombobox({
|
|
onDropdownClose: () => combobox.resetSelectedOption(),
|
|
});
|
|
|
|
const totalOptions = data.icons.reduce((acc, group) => acc + group.icons.length, 0);
|
|
const groups = data.icons.map((group) => {
|
|
const options = group.icons.map((item) => (
|
|
<UnstyledButton
|
|
onClick={() => {
|
|
const value = item.url;
|
|
startTransition(() => {
|
|
setValue(value);
|
|
setPreviewUrl(value);
|
|
setSearch(value);
|
|
onChange(value);
|
|
combobox.closeDropdown();
|
|
});
|
|
}}
|
|
key={item.id}
|
|
>
|
|
<Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
|
|
<Card
|
|
p="sm"
|
|
pos="relative"
|
|
style={{
|
|
overflow: "visible",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<Box w={25} h={25}>
|
|
<Image src={item.url} w={25} h={25} radius="md" />
|
|
</Box>
|
|
</Card>
|
|
</Indicator>
|
|
</UnstyledButton>
|
|
));
|
|
|
|
return (
|
|
<Paper p="xs" key={group.slug} pt={2}>
|
|
<Text mb={8} size="sm" fw="bold">
|
|
{group.slug}
|
|
</Text>
|
|
<Flex gap={8} wrap={"wrap"}>
|
|
{options}
|
|
</Flex>
|
|
</Paper>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<Combobox store={combobox} withinPortal>
|
|
<Combobox.Target>
|
|
<InputBase
|
|
rightSection={<Combobox.Chevron />}
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
leftSection={previewUrl ? <img src={previewUrl} alt="" style={{ width: 20, height: 20 }} /> : null}
|
|
value={search}
|
|
onChange={(event) => {
|
|
combobox.openDropdown();
|
|
combobox.updateSelectedOptionIndex();
|
|
setSearch(event.currentTarget.value);
|
|
setValue(event.currentTarget.value);
|
|
setPreviewUrl(null);
|
|
onChange(event.currentTarget.value);
|
|
}}
|
|
onClick={() => combobox.openDropdown()}
|
|
onFocus={(event) => {
|
|
onFocus?.(event);
|
|
combobox.openDropdown();
|
|
}}
|
|
onBlur={(event) => {
|
|
onBlur?.(event);
|
|
combobox.closeDropdown();
|
|
setPreviewUrl(value);
|
|
setSearch(value || "");
|
|
}}
|
|
rightSectionPointerEvents="none"
|
|
withAsterisk
|
|
error={error}
|
|
label={tCommon("iconPicker.label")}
|
|
placeholder={tCommon("iconPicker.header", { countIcons: data.countIcons })}
|
|
/>
|
|
</Combobox.Target>
|
|
|
|
<Combobox.Dropdown>
|
|
<Combobox.Options mah={350} style={{ overflowY: "auto" }}>
|
|
{totalOptions > 0 ? (
|
|
<Stack gap={4}>{groups}</Stack>
|
|
) : (
|
|
Array(15)
|
|
.fill(0)
|
|
.map((_, index: number) => (
|
|
<Combobox.Option value={`skeleton-${index}`} key={index} disabled>
|
|
<Skeleton height={25} visible />
|
|
</Combobox.Option>
|
|
))
|
|
)}
|
|
</Combobox.Options>
|
|
</Combobox.Dropdown>
|
|
</Combobox>
|
|
);
|
|
};
|