use label function to fetch the translation (#28473)
* use label function to fetch the translation fixes: #28443 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * removed export from unWrap Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> --------- Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
8455fbdeaf
commit
9190114c60
3 changed files with 11 additions and 18 deletions
|
@ -6,7 +6,7 @@ import {
|
|||
UserProfileFieldProps,
|
||||
} from "./UserProfileFields";
|
||||
import { UserProfileGroup } from "./UserProfileGroup";
|
||||
import { fieldName, isRequiredAttribute, unWrap } from "./utils";
|
||||
import { fieldName, isRequiredAttribute, label } from "./utils";
|
||||
|
||||
export const OptionComponent = (props: UserProfileFieldProps) => {
|
||||
const { form, inputType, attribute } = props;
|
||||
|
@ -16,9 +16,8 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
|
|||
const options =
|
||||
(attribute.validators?.options as Options | undefined)?.options || [];
|
||||
|
||||
const optionLabel = attribute.annotations?.[
|
||||
"inputOptionLabels"
|
||||
] as OptionLabel;
|
||||
const optionLabel =
|
||||
(attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
|
||||
|
||||
return (
|
||||
<UserProfileGroup {...props}>
|
||||
|
@ -33,7 +32,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
|
|||
key={option}
|
||||
id={option}
|
||||
data-testid={option}
|
||||
label={props.t(unWrap(optionLabel?.on || option))}
|
||||
label={label(props.t, optionLabel[option], option)}
|
||||
value={option}
|
||||
isChecked={field.value.includes(option)}
|
||||
onChange={() => {
|
||||
|
|
|
@ -7,12 +7,7 @@ import {
|
|||
UserProfileFieldProps,
|
||||
} from "./UserProfileFields";
|
||||
import { UserProfileGroup } from "./UserProfileGroup";
|
||||
import {
|
||||
UserFormFields,
|
||||
fieldName,
|
||||
isRequiredAttribute,
|
||||
unWrap,
|
||||
} from "./utils";
|
||||
import { UserFormFields, fieldName, isRequiredAttribute, label } from "./utils";
|
||||
|
||||
export const SelectComponent = (props: UserProfileFieldProps) => {
|
||||
const { t, form, inputType, attribute } = props;
|
||||
|
@ -38,11 +33,10 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
|
|||
const options =
|
||||
(attribute.validators?.options as Options | undefined)?.options || [];
|
||||
|
||||
const optionLabel = attribute.annotations?.[
|
||||
"inputOptionLabels"
|
||||
] as OptionLabel;
|
||||
const label = (label: string) =>
|
||||
optionLabel ? t(unWrap(optionLabel[label])) : label;
|
||||
const optionLabel =
|
||||
(attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
|
||||
const fetchLabel = (option: string) =>
|
||||
label(props.t, optionLabel[option], option);
|
||||
|
||||
return (
|
||||
<UserProfileGroup {...props}>
|
||||
|
@ -78,7 +72,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
|
|||
key={option}
|
||||
value={option}
|
||||
>
|
||||
{option ? label(option) : t("choose")}
|
||||
{option ? fetchLabel(option) : t("choose")}
|
||||
</SelectOption>
|
||||
))}
|
||||
</Select>
|
||||
|
|
|
@ -25,7 +25,7 @@ export type UserProfileError = {
|
|||
};
|
||||
|
||||
const isBundleKey = (displayName?: string) => displayName?.includes("${");
|
||||
export const unWrap = (key: string) => key.substring(2, key.length - 1);
|
||||
const unWrap = (key: string) => key.substring(2, key.length - 1);
|
||||
|
||||
export const label = (
|
||||
t: TFunction,
|
||||
|
|
Loading…
Reference in a new issue