use inputOptionsLabels when they exist (#22451)

* use inputOptionsLabels when they exist

fixes: #22432

* fixed type
This commit is contained in:
Erik Jan de Wit 2023-08-30 09:22:34 +02:00 committed by GitHub
parent e07abbdf9d
commit 2a6b4d1210
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -9,9 +9,10 @@ import {
import { useTranslation } from "react-i18next";
import { Options } from "../UserProfileFields";
import { fieldName } from "../utils";
import { fieldName, unWrap } from "../utils";
import { UserProfileFieldsProps, UserProfileGroup } from "./UserProfileGroup";
type OptionLabel = Record<string, string> | undefined;
export const SelectComponent = (attribute: UserProfileFieldsProps) => {
const { t } = useTranslation("users");
const { control } = useFormContext();
@ -42,6 +43,12 @@ export const SelectComponent = (attribute: UserProfileFieldsProps) => {
const options =
(attribute.validations?.options as Options | undefined)?.options || [];
const optionLabel = attribute.annotations?.[
"inputOptionLabels"
] as OptionLabel;
const label = (label: string) =>
optionLabel ? t(unWrap(optionLabel[label])) : label;
return (
<UserProfileGroup {...attribute}>
<Controller
@ -79,7 +86,7 @@ export const SelectComponent = (attribute: UserProfileFieldsProps) => {
key={option}
value={option}
>
{option}
{label(option)}
</SelectOption>
))}
</Select>