forked from rjsf-team/react-jsonschema-form
/
index.tsx
108 lines (99 loc) · 2.88 KB
/
index.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
import React from "react";
import {
ADDITIONAL_PROPERTY_FLAG,
UI_OPTIONS_KEY,
WrapIfAdditionalTemplateProps,
} from "@rjsf/utils";
import Col from "antd/lib/col";
import Form from "antd/lib/form";
import Input from "antd/lib/input";
import Row from "antd/lib/row";
const VERTICAL_LABEL_COL = { span: 24 };
const VERTICAL_WRAPPER_COL = { span: 24 };
const INPUT_STYLE = {
width: "100%",
};
const WrapIfAdditionalTemplate = ({
children,
classNames,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
registry,
schema,
uiSchema,
}: WrapIfAdditionalTemplateProps) => {
const {
colon,
labelCol = VERTICAL_LABEL_COL,
readonlyAsDisabled = true,
rowGutter = 24,
toolbarAlign = "top",
wrapperCol = VERTICAL_WRAPPER_COL,
wrapperStyle,
} = registry.formContext;
// Button templates are not overridden in the uiSchema
const { RemoveButton } = registry.templates.ButtonTemplates;
const keyLabel = `${label} Key`; // i18n ?
const additional = ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return <div className={classNames}>{children}</div>;
}
const handleBlur = ({ target }: React.FocusEvent<HTMLInputElement>) =>
onKeyChange(target.value);
// The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[UI_OPTIONS_KEY]: { ...uiOptions, block: true },
};
return (
<div className={classNames}>
<Row align={toolbarAlign} gutter={rowGutter}>
<Col className="form-additional" flex="1">
<div className="form-group">
<Form.Item
colon={colon}
className="form-group"
hasFeedback
htmlFor={`${id}-key`}
label={keyLabel}
labelCol={labelCol}
required={required}
style={wrapperStyle}
wrapperCol={wrapperCol}
>
<Input
className="form-control"
defaultValue={label}
disabled={disabled || (readonlyAsDisabled && readonly)}
id={`${id}-key`}
name={`${id}-key`}
onBlur={!readonly ? handleBlur : undefined}
style={INPUT_STYLE}
type="text"
/>
</Form.Item>
</div>
</Col>
<Col className="form-additional" flex="1">
{children}
</Col>
<Col flex="192px">
<RemoveButton
className="array-item-remove"
disabled={disabled || readonly}
onClick={onDropPropertyClick(label)}
uiSchema={buttonUiOptions}
registry={registry}
/>
</Col>
</Row>
</div>
);
};
export default WrapIfAdditionalTemplate;