Keycloak

1
import {
2
  NumberInput,
3
  NumberInputProps,
4
  ValidatedOptions,
5
} from "@patternfly/react-core";
6
import {
7
  Controller,
8
  ControllerProps,
9
  FieldPath,
10
  FieldValues,
11
  UseControllerProps,
12
  useFormContext,
13
} from "react-hook-form";
14
import { FormLabel } from "./FormLabel";
15

16
export type NumberControlOption = {
17
  key: string;
18
  value: string;
19
};
20

21
export type NumberControlProps<
22
  T extends FieldValues,
23
  P extends FieldPath<T> = FieldPath<T>,
24
> = Omit<NumberInputProps, "name" | "isRequired" | "required"> &
25
  UseControllerProps<T, P> & {
26
    name: string;
27
    label?: string;
28
    labelIcon?: string;
29
    controller: Omit<ControllerProps, "name" | "render">;
30
  };
31

32
export const NumberControl = <
33
  T extends FieldValues,
34
  P extends FieldPath<T> = FieldPath<T>,
35
>({
36
  name,
37
  label,
38
  controller,
39
  labelIcon,
40
  ...rest
41
}: NumberControlProps<T, P>) => {
42
  const {
43
    control,
44
    formState: { errors },
45
  } = useFormContext();
46
  return (
47
    <FormLabel
48
      name={name}
49
      label={label}
50
      isRequired={controller.rules?.required === true}
51
      error={errors[name]}
52
      labelIcon={labelIcon}
53
    >
54
      <Controller
55
        {...controller}
56
        name={name}
57
        control={control}
58
        render={({ field }) => {
59
          const required = !!controller.rules?.required;
60
          const min = controller.rules?.min;
61
          const value =
62
            field.value === 0 ? controller.defaultValue : field.value;
63
          const setValue = (newValue: number) =>
64
            field.onChange(min ? Math.max(newValue, Number(min)) : newValue);
65

66
          return (
67
            <NumberInput
68
              {...rest}
69
              id={name}
70
              value={value}
71
              validated={
72
                errors[name] ? ValidatedOptions.error : ValidatedOptions.default
73
              }
74
              required={required}
75
              min={Number(min)}
76
              max={Number(controller.rules?.max)}
77
              onPlus={() => setValue(value + 1)}
78
              onMinus={() => setValue(value - 1)}
79
              onChange={(event) => {
80
                const newValue = Number(event.currentTarget.value);
81
                setValue(!isNaN(newValue) ? newValue : controller.defaultValue);
82
              }}
83
            />
84
          );
85
        }}
86
      />
87
    </FormLabel>
88
  );
89
};
90