-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
CheckboxWidget.tsx
87 lines (81 loc) · 1.71 KB
/
CheckboxWidget.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React from "react";
import { Checkbox } from "@fluentui/react";
import {
FormContextType,
RJSFSchema,
StrictRJSFSchema,
WidgetProps,
} from "@rjsf/utils";
import _pick from "lodash/pick";
// Keys of ICheckboxProps from @fluentui/react
export const allowedProps = [
"ariaDescribedBy",
"ariaLabel",
"ariaPositionInSet",
"ariaSetSize",
"boxSide",
"checked",
"checkmarkIconProps",
"className",
"componentRef",
"defaultChecked",
"defaultIndeterminate",
"disabled",
"indeterminate",
"inputProps",
"keytipProps",
"label",
"onChange",
"onRenderLabel",
"styles",
"theme",
];
export default function CheckboxWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
>(props: WidgetProps<T, S, F>) {
const {
id,
value,
// required,
disabled,
readonly,
label,
schema,
autofocus,
onChange,
onBlur,
onFocus,
options,
} = props;
const _onChange = React.useCallback(
(_, checked?: boolean): void => {
onChange(checked);
},
[onChange]
);
const _onBlur = ({
target: { value },
}: React.FocusEvent<HTMLButtonElement>) => onBlur(id, value);
const _onFocus = ({
target: { value },
}: React.FocusEvent<HTMLButtonElement>) => onFocus(id, value);
const uiProps = _pick((options.props as object) || {}, allowedProps);
return (
<>
<Checkbox
id={id}
name={id}
label={label || schema.title}
disabled={disabled || readonly}
autoFocus={autofocus}
onBlur={_onBlur}
onFocus={_onFocus}
checked={typeof value === "undefined" ? false : value}
onChange={_onChange}
{...uiProps}
/>
</>
);
}