Keycloak

1
import { TextInputProps, ValidatedOptions } from "@patternfly/react-core";
2
import {
3
  FieldPath,
4
  FieldValues,
5
  PathValue,
6
  useController,
7
  UseControllerProps,
8
} from "react-hook-form";
9

10
import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
11
import { FormLabel } from "./FormLabel";
12

13
export type TextControlProps<
14
  T extends FieldValues,
15
  P extends FieldPath<T> = FieldPath<T>,
16
> = UseControllerProps<T, P> &
17
  Omit<TextInputProps, "name" | "isRequired" | "required"> & {
18
    label: string;
19
    labelIcon?: string;
20
    isDisabled?: boolean;
21
  };
22

23
export const TextControl = <
24
  T extends FieldValues,
25
  P extends FieldPath<T> = FieldPath<T>,
26
>(
27
  props: TextControlProps<T, P>,
28
) => {
29
  const { labelIcon, ...rest } = props;
30
  const required = !!props.rules?.required;
31
  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
32

33
  const { field, fieldState } = useController({
34
    ...props,
35
    defaultValue,
36
  });
37

38
  return (
39
    <FormLabel
40
      name={props.name}
41
      label={props.label}
42
      labelIcon={labelIcon}
43
      isRequired={required}
44
      error={fieldState.error}
45
    >
46
      <KeycloakTextInput
47
        isRequired={required}
48
        id={props.name}
49
        data-testid={props.name}
50
        validated={
51
          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
52
        }
53
        isDisabled={props.isDisabled}
54
        {...rest}
55
        {...field}
56
      />
57
    </FormLabel>
58
  );
59
};
60