70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
|
import { Select, SelectOption } from "@patternfly/react-core";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { Controller, useFormContext } from "react-hook-form";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
import { Options } from "../UserProfileFields";
|
||
|
|
import { DEFAULT_ROLES, fieldName } from "../utils";
|
||
|
|
import { UserProfileFieldsProps, UserProfileGroup } from "./UserProfileGroup";
|
||
|
|
|
||
|
|
export const SelectComponent = ({
|
||
|
|
roles = [],
|
||
|
|
...attribute
|
||
|
|
}: UserProfileFieldsProps) => {
|
||
|
|
const { t } = useTranslation("users");
|
||
|
|
const { control } = useFormContext();
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
const isMultiSelect = attribute.annotations?.["inputType"] === "multiselect";
|
||
|
|
const options = (attribute.validations?.options as Options).options || [];
|
||
|
|
return (
|
||
|
|
<UserProfileGroup {...attribute}>
|
||
|
|
<Controller
|
||
|
|
name={fieldName(attribute)}
|
||
|
|
defaultValue=""
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<Select
|
||
|
|
toggleId={attribute.name}
|
||
|
|
onToggle={(b) => setOpen(b)}
|
||
|
|
onSelect={(_, value) => {
|
||
|
|
const option = value.toString();
|
||
|
|
if (isMultiSelect) {
|
||
|
|
if (field.value.includes(option)) {
|
||
|
|
field.onChange(
|
||
|
|
field.value.filter((item: string) => item !== option),
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
field.onChange([...field.value, option]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
field.onChange(option);
|
||
|
|
setOpen(false);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
selections={field.value ? field.value : t("common:choose")}
|
||
|
|
variant={isMultiSelect ? "typeaheadmulti" : "single"}
|
||
|
|
aria-label={t("common:selectOne")}
|
||
|
|
isOpen={open}
|
||
|
|
isDisabled={
|
||
|
|
!(attribute.permissions?.edit || DEFAULT_ROLES).some((r) =>
|
||
|
|
roles.includes(r),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{options.map((option) => (
|
||
|
|
<SelectOption
|
||
|
|
selected={field.value === option}
|
||
|
|
key={option}
|
||
|
|
value={option}
|
||
|
|
>
|
||
|
|
{option}
|
||
|
|
</SelectOption>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</UserProfileGroup>
|
||
|
|
);
|
||
|
|
};
|