61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { MultiSelect, Text } from "@mantine/core";
|
|
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
import type { CommonWidgetInputProps } from "./common";
|
|
import { useWidgetInputTranslation } from "./common";
|
|
import { useFormContext } from "./form";
|
|
|
|
const useIntegrationSelectTranslation = () => useScopedI18n("widget.integrationSelect");
|
|
|
|
export const WidgetIntegrationMultiSelectInput = ({
|
|
property,
|
|
kind,
|
|
options,
|
|
}: CommonWidgetInputProps<"integrationMultiSelect">) => {
|
|
const t = useIntegrationSelectTranslation();
|
|
const tInput = useWidgetInputTranslation(kind, property);
|
|
const form = useFormContext();
|
|
|
|
const integrationIds = form.values.integrationIds as string[];
|
|
const inputProps = form.getInputProps(`options.${property}`);
|
|
const selectedValues = (inputProps.value as string[] | undefined) ?? [];
|
|
|
|
const { data: selectData = [], isPending, isError } = options.useOptions(integrationIds);
|
|
const data = [
|
|
...selectData,
|
|
...selectedValues
|
|
.filter((selectedValue) => !selectData.some((option) => option.value === selectedValue))
|
|
.map((selectedValue) => ({ value: selectedValue, label: selectedValue })),
|
|
];
|
|
|
|
if (integrationIds.length === 0) {
|
|
return (
|
|
<Text size="sm" c="dimmed">
|
|
{t("configureIntegrationFirst")}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
const description = options.withDescription ? tInput("description") : undefined;
|
|
const placeholder = isPending ? t("loading") : tInput("placeholder");
|
|
const loadError = isError ? t("loadError") : undefined;
|
|
|
|
return (
|
|
<MultiSelect
|
|
{...inputProps}
|
|
label={tInput("label")}
|
|
description={description}
|
|
placeholder={placeholder}
|
|
searchable
|
|
clearable
|
|
nothingFoundMessage={t("noResults")}
|
|
data={data}
|
|
disabled={isError}
|
|
error={loadError ?? inputProps.error}
|
|
/>
|
|
);
|
|
};
|