added "on" label to checkbox (#28087)
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
635481a98d
commit
adf838f81f
3 changed files with 18 additions and 5 deletions
|
@ -1,8 +1,12 @@
|
||||||
import { Checkbox, Radio } from "@patternfly/react-core";
|
import { Checkbox, Radio } from "@patternfly/react-core";
|
||||||
import { Controller } from "react-hook-form";
|
import { Controller } from "react-hook-form";
|
||||||
import { Options, UserProfileFieldProps } from "./UserProfileFields";
|
import {
|
||||||
|
OptionLabel,
|
||||||
|
Options,
|
||||||
|
UserProfileFieldProps,
|
||||||
|
} from "./UserProfileFields";
|
||||||
import { UserProfileGroup } from "./UserProfileGroup";
|
import { UserProfileGroup } from "./UserProfileGroup";
|
||||||
import { fieldName, isRequiredAttribute } from "./utils";
|
import { fieldName, isRequiredAttribute, unWrap } from "./utils";
|
||||||
|
|
||||||
export const OptionComponent = (props: UserProfileFieldProps) => {
|
export const OptionComponent = (props: UserProfileFieldProps) => {
|
||||||
const { form, inputType, attribute } = props;
|
const { form, inputType, attribute } = props;
|
||||||
|
@ -12,6 +16,10 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
|
||||||
const options =
|
const options =
|
||||||
(attribute.validators?.options as Options | undefined)?.options || [];
|
(attribute.validators?.options as Options | undefined)?.options || [];
|
||||||
|
|
||||||
|
const optionLabel = attribute.annotations?.[
|
||||||
|
"inputOptionLabels"
|
||||||
|
] as OptionLabel;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<UserProfileGroup {...props}>
|
<UserProfileGroup {...props}>
|
||||||
<Controller
|
<Controller
|
||||||
|
@ -25,7 +33,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
|
||||||
key={option}
|
key={option}
|
||||||
id={option}
|
id={option}
|
||||||
data-testid={option}
|
data-testid={option}
|
||||||
label={option}
|
label={props.t(unWrap(optionLabel?.on || option))}
|
||||||
value={option}
|
value={option}
|
||||||
isChecked={field.value.includes(option)}
|
isChecked={field.value.includes(option)}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
import { Select, SelectOption } from "@patternfly/react-core";
|
import { Select, SelectOption } from "@patternfly/react-core";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Controller, ControllerRenderProps } from "react-hook-form";
|
import { Controller, ControllerRenderProps } from "react-hook-form";
|
||||||
import { Options, UserProfileFieldProps } from "./UserProfileFields";
|
import {
|
||||||
|
OptionLabel,
|
||||||
|
Options,
|
||||||
|
UserProfileFieldProps,
|
||||||
|
} from "./UserProfileFields";
|
||||||
import { UserProfileGroup } from "./UserProfileGroup";
|
import { UserProfileGroup } from "./UserProfileGroup";
|
||||||
import {
|
import {
|
||||||
UserFormFields,
|
UserFormFields,
|
||||||
|
@ -10,7 +14,6 @@ import {
|
||||||
unWrap,
|
unWrap,
|
||||||
} from "./utils";
|
} from "./utils";
|
||||||
|
|
||||||
type OptionLabel = Record<string, string> | undefined;
|
|
||||||
export const SelectComponent = (props: UserProfileFieldProps) => {
|
export const SelectComponent = (props: UserProfileFieldProps) => {
|
||||||
const { t, form, inputType, attribute } = props;
|
const { t, form, inputType, attribute } = props;
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
|
|
@ -54,6 +54,8 @@ export type UserProfileFieldProps = {
|
||||||
renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
|
renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type OptionLabel = Record<string, string> | undefined;
|
||||||
|
|
||||||
export const FIELDS: {
|
export const FIELDS: {
|
||||||
[type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
|
[type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
|
||||||
} = {
|
} = {
|
||||||
|
|
Loading…
Reference in a new issue