108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { Button, Card, Center, Grid, Input, Stack, Text } from "@mantine/core";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
import { objectEntries } from "@homarr/common";
|
|
import type { WidgetKind } from "@homarr/definitions";
|
|
import { createModal } from "@homarr/modals";
|
|
import { useI18n } from "@homarr/translation/client";
|
|
import type { TablerIcon } from "@homarr/ui";
|
|
import { widgetImports } from "@homarr/widgets";
|
|
|
|
import { useItemActions } from "./item-actions";
|
|
|
|
export const ItemSelectModal = createModal<void>(({ actions }) => {
|
|
const [search, setSearch] = useState("");
|
|
const t = useI18n();
|
|
const { createItem } = useItemActions();
|
|
|
|
const items = useMemo(
|
|
() =>
|
|
objectEntries(widgetImports)
|
|
.map(([kind, value]) => ({
|
|
kind,
|
|
icon: value.definition.icon,
|
|
name: t(`widget.${kind}.name`),
|
|
description: t(`widget.${kind}.description`),
|
|
}))
|
|
.sort((itemA, itemB) => itemA.name.localeCompare(itemB.name)),
|
|
[t],
|
|
);
|
|
|
|
const filteredItems = useMemo(
|
|
() => items.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
|
|
[items, search],
|
|
);
|
|
|
|
const handleAdd = (kind: WidgetKind) => {
|
|
createItem({ kind });
|
|
actions.closeModal();
|
|
};
|
|
|
|
return (
|
|
<Stack>
|
|
<Input
|
|
value={search}
|
|
onChange={(event) => setSearch(event.currentTarget.value)}
|
|
leftSection={<IconSearch />}
|
|
placeholder={`${t("item.create.search")}...`}
|
|
data-autofocus
|
|
onKeyDown={(event) => {
|
|
// Add item if there is only one item in the list and user presses Enter
|
|
if (event.key === "Enter" && filteredItems.length === 1) {
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
handleAdd(filteredItems[0]!.kind);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<Grid>
|
|
{filteredItems.map((item) => (
|
|
<WidgetItem key={item.kind} item={item} onSelect={() => handleAdd(item.kind)} />
|
|
))}
|
|
</Grid>
|
|
</Stack>
|
|
);
|
|
}).withOptions({
|
|
defaultTitle: (t) => t("item.create.title"),
|
|
size: "xl",
|
|
});
|
|
|
|
const WidgetItem = ({
|
|
item,
|
|
onSelect,
|
|
}: {
|
|
item: {
|
|
kind: WidgetKind;
|
|
name: string;
|
|
description: string;
|
|
icon: TablerIcon;
|
|
};
|
|
onSelect: () => void;
|
|
}) => {
|
|
const t = useI18n();
|
|
|
|
return (
|
|
<Grid.Col span={{ xs: 12, sm: 4, md: 3 }}>
|
|
<Card h="100%">
|
|
<Stack justify="space-between" h="100%">
|
|
<Stack gap="xs">
|
|
<Center>
|
|
<item.icon />
|
|
</Center>
|
|
<Text lh={1.2} style={{ whiteSpace: "normal" }} ta="center">
|
|
{item.name}
|
|
</Text>
|
|
<Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" ta="center" c="dimmed">
|
|
{item.description}
|
|
</Text>
|
|
</Stack>
|
|
<Button onClick={onSelect} variant="light" size="xs" mt="auto" radius="md" fullWidth>
|
|
{t(`item.create.addToBoard`)}
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
</Grid.Col>
|
|
);
|
|
};
|