forked from rjsf-team/react-jsonschema-form
/
BaseInputTemplate.tsx
122 lines (118 loc) · 2.74 KB
/
BaseInputTemplate.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React from "react";
import { TextField } from "@fluentui/react";
import {
FormContextType,
getInputProps,
RJSFSchema,
StrictRJSFSchema,
WidgetProps,
} from "@rjsf/utils";
import _pick from "lodash/pick";
// Keys of ITextFieldProps from @fluentui/react
const allowedProps = [
"multiline",
"resizable",
"autoAdjustHeight",
"underlined",
"borderless",
"label",
"onRenderLabel",
"description",
"onRenderDescription",
"prefix",
"suffix",
"onRenderPrefix",
"onRenderSuffix",
"iconProps",
"defaultValue",
"value",
"disabled",
"readOnly",
"errorMessage",
"onChange",
"onNotifyValidationResult",
"onGetErrorMessage",
"deferredValidationTime",
"className",
"inputClassName",
"ariaLabel",
"validateOnFocusIn",
"validateOnFocusOut",
"validateOnLoad",
"theme",
"styles",
"autoComplete",
"mask",
"maskChar",
"maskFormat",
"type",
"list",
];
export default function BaseInputTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
>({
id,
placeholder,
required,
readonly,
disabled,
label,
value,
onChange,
onBlur,
onFocus,
autofocus,
options,
schema,
type,
rawErrors,
multiline,
}: WidgetProps<T, S, F>) {
const inputProps = getInputProps<T, S, F>(schema, type, options);
const _onChange = ({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) =>
onChange(value === "" ? options.emptyValue : value);
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
onBlur(id, value);
const _onFocus = ({
target: { value },
}: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
const uiProps = _pick((options.props as object) || {}, allowedProps);
return (
<>
<TextField
id={id}
name={id}
placeholder={placeholder}
label={label || schema.title}
autoFocus={autofocus}
required={required}
disabled={disabled}
readOnly={readonly}
multiline={multiline}
// TODO: once fluent-ui supports the name prop, we can add it back in here.
// name={name}
{...inputProps}
value={value || value === 0 ? value : ""}
onChange={_onChange as any}
onBlur={_onBlur}
onFocus={_onFocus}
errorMessage={(rawErrors || []).join("\n")}
list={schema.examples ? `examples_${id}` : undefined}
{...uiProps}
/>
{schema.examples && (
<datalist id={`examples_${id}`}>
{(schema.examples as string[])
.concat(schema.default ? ([schema.default] as string[]) : [])
.map((example: any) => {
return <option key={example} value={example} />;
})}
</datalist>
)}
</>
);
}