/
CheckboxWidget.tsx
73 lines (72 loc) · 1.85 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
import React from "react";
import {
schemaRequiresTrueValue,
FormContextType,
RJSFSchema,
StrictRJSFSchema,
WidgetProps,
} from "@rjsf/utils";
import { Form, CheckboxProps } from "semantic-ui-react";
import { getSemanticProps } from "../util";
/** The `CheckBoxWidget` is a widget for rendering boolean properties.
* It is typically used to represent a boolean.
*
* @param props - The `WidgetProps` for this component
*/
export default function CheckboxWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
>(props: WidgetProps<T, S, F>) {
const {
id,
value,
disabled,
readonly,
label,
autofocus,
onChange,
onBlur,
options,
onFocus,
formContext,
schema,
uiSchema,
rawErrors = [],
} = props;
const semanticProps = getSemanticProps<T, S, F>({
options,
formContext,
uiSchema,
defaultSchemaProps: {
inverted: false,
},
});
// Because an unchecked checkbox will cause html5 validation to fail, only add
// the "required" attribute if the field value must be "true", due to the
// "const" or "enum" keywords
const required = schemaRequiresTrueValue<S>(schema);
const _onChange = (
_: React.FormEvent<HTMLInputElement>,
data: CheckboxProps
) => onChange && onChange(data.checked);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
const checked = value == "true" || value == true;
return (
<Form.Checkbox
id={id}
name={id}
disabled={disabled || readonly}
autoFocus={autofocus}
{...semanticProps}
checked={typeof value === "undefined" ? false : checked}
error={rawErrors.length > 0}
onChange={_onChange}
onBlur={_onBlur}
onFocus={_onFocus}
required={required}
label={label || ""}
/>
);
}