@nolwenture/formik-jsonschema-form 1.4.3 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1061,3 +1061,27 @@ const uiSchema: UiSchema = {
|
|
|
1061
1061
|
hideSubmit={true} // hides submit-button of the form
|
|
1062
1062
|
/>
|
|
1063
1063
|
```
|
|
1064
|
+
|
|
1065
|
+
### Special handling of conflicting keys in uiSchema
|
|
1066
|
+
|
|
1067
|
+
In case one of your property names matches a reserved key in `uiSchema` (e.g. `ui:description`), you can use the syntax `> propertyName` to target the property.
|
|
1068
|
+
|
|
1069
|
+
```tsx
|
|
1070
|
+
const schema = {
|
|
1071
|
+
type: "object",
|
|
1072
|
+
properties: {
|
|
1073
|
+
"ui:description": { type: "string", title: "Description" },
|
|
1074
|
+
},
|
|
1075
|
+
};
|
|
1076
|
+
|
|
1077
|
+
const uiSchema = {
|
|
1078
|
+
// This would be interpreted as the description for the parent object
|
|
1079
|
+
"ui:description": "Form description",
|
|
1080
|
+
|
|
1081
|
+
// This targets the property named "ui:description"
|
|
1082
|
+
"> ui:description": {
|
|
1083
|
+
"ui:placeholder": "Enter description...",
|
|
1084
|
+
},
|
|
1085
|
+
};
|
|
1086
|
+
```
|
|
1087
|
+
|
|
@@ -12,7 +12,7 @@ const types_1 = require("./types");
|
|
|
12
12
|
const DEFAULT_FIELD = {
|
|
13
13
|
type: "string",
|
|
14
14
|
_fieldType: "string",
|
|
15
|
-
"ui:title": "
|
|
15
|
+
"ui:title": "",
|
|
16
16
|
};
|
|
17
17
|
const useObjectField = (name) => {
|
|
18
18
|
if (!name) {
|
|
@@ -73,7 +73,11 @@ const ObjectField = (props) => {
|
|
|
73
73
|
const childSchema = properties?.[child];
|
|
74
74
|
if (!childSchema)
|
|
75
75
|
return undefined;
|
|
76
|
-
|
|
76
|
+
const childUiSchema = {
|
|
77
|
+
...(uiSchema?.properties ?? {}),
|
|
78
|
+
...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
|
|
79
|
+
};
|
|
80
|
+
return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child));
|
|
77
81
|
}
|
|
78
82
|
else {
|
|
79
83
|
const { title, fields, collapsible } = child;
|
|
@@ -81,7 +85,13 @@ const ObjectField = (props) => {
|
|
|
81
85
|
const childSchema = properties?.[child2];
|
|
82
86
|
if (!childSchema)
|
|
83
87
|
return undefined;
|
|
84
|
-
|
|
88
|
+
const childUiSchema = {
|
|
89
|
+
...(uiSchema?.properties ?? {}),
|
|
90
|
+
...(uiSchema?.[`> ${child2}`] ??
|
|
91
|
+
uiSchema?.[child2] ??
|
|
92
|
+
{}),
|
|
93
|
+
};
|
|
94
|
+
return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child2));
|
|
85
95
|
}) }, fields.join("_")));
|
|
86
96
|
}
|
|
87
97
|
})
|
|
@@ -89,7 +99,10 @@ const ObjectField = (props) => {
|
|
|
89
99
|
const childSchema = properties?.[child];
|
|
90
100
|
if (!childSchema)
|
|
91
101
|
return undefined;
|
|
92
|
-
const childUiSchema =
|
|
102
|
+
const childUiSchema = {
|
|
103
|
+
...(uiSchema?.properties ?? {}),
|
|
104
|
+
...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
|
|
105
|
+
};
|
|
93
106
|
return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
|
|
94
107
|
...childUiSchema,
|
|
95
108
|
props: {
|
|
@@ -105,12 +118,12 @@ const ObjectField = (props) => {
|
|
|
105
118
|
}, style: { display: "none" } }, child));
|
|
106
119
|
}), showAdditionalProperties &&
|
|
107
120
|
orderedAdditionalProperties.map((childName, index) => {
|
|
108
|
-
|
|
121
|
+
const childUiSchema = {
|
|
109
122
|
...(uiSchema?.additionalProperties ?? {}),
|
|
110
123
|
...(uiSchema?.properties ?? {}),
|
|
111
|
-
...(uiSchema?.[childName] ?? {}),
|
|
124
|
+
...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
|
|
112
125
|
};
|
|
113
|
-
return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema:
|
|
126
|
+
return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName), (0, jsx_runtime_1.jsxs)(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
|
|
114
127
|
index > 0 &&
|
|
115
128
|
getObjectFieldButton({
|
|
116
129
|
purpose: types_1.ObjectFieldButtonPurpose.MOVE_UP,
|
|
@@ -140,15 +153,12 @@ const ObjectField = (props) => {
|
|
|
140
153
|
})] })] }, childName));
|
|
141
154
|
}), showAdditionalProperties &&
|
|
142
155
|
hiddenAdditionalProperties.map((childName) => {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
uiSchema?.
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
};
|
|
150
|
-
}
|
|
151
|
-
return ((0, jsx_runtime_1.jsx)(ObjectFieldItem, { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName) }, childName));
|
|
156
|
+
const childUiSchema = {
|
|
157
|
+
...(uiSchema?.additionalProperties ?? {}),
|
|
158
|
+
...(uiSchema?.properties ?? {}),
|
|
159
|
+
...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
|
|
160
|
+
};
|
|
161
|
+
return ((0, jsx_runtime_1.jsx)(ObjectFieldItem, { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName) }, childName));
|
|
152
162
|
}), additionalProperties &&
|
|
153
163
|
getObjectFieldButton({
|
|
154
164
|
purpose: types_1.ObjectFieldButtonPurpose.ADD,
|
|
@@ -9,7 +9,7 @@ import { ObjectFieldButtonPurpose } from "./types";
|
|
|
9
9
|
const DEFAULT_FIELD = {
|
|
10
10
|
type: "string",
|
|
11
11
|
_fieldType: "string",
|
|
12
|
-
"ui:title": "
|
|
12
|
+
"ui:title": "",
|
|
13
13
|
};
|
|
14
14
|
const useObjectField = (name) => {
|
|
15
15
|
if (!name) {
|
|
@@ -70,7 +70,11 @@ export const ObjectField = (props) => {
|
|
|
70
70
|
const childSchema = properties?.[child];
|
|
71
71
|
if (!childSchema)
|
|
72
72
|
return undefined;
|
|
73
|
-
|
|
73
|
+
const childUiSchema = {
|
|
74
|
+
...(uiSchema?.properties ?? {}),
|
|
75
|
+
...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
|
|
76
|
+
};
|
|
77
|
+
return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child));
|
|
74
78
|
}
|
|
75
79
|
else {
|
|
76
80
|
const { title, fields, collapsible } = child;
|
|
@@ -78,7 +82,13 @@ export const ObjectField = (props) => {
|
|
|
78
82
|
const childSchema = properties?.[child2];
|
|
79
83
|
if (!childSchema)
|
|
80
84
|
return undefined;
|
|
81
|
-
|
|
85
|
+
const childUiSchema = {
|
|
86
|
+
...(uiSchema?.properties ?? {}),
|
|
87
|
+
...(uiSchema?.[`> ${child2}`] ??
|
|
88
|
+
uiSchema?.[child2] ??
|
|
89
|
+
{}),
|
|
90
|
+
};
|
|
91
|
+
return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child2));
|
|
82
92
|
}) }, fields.join("_")));
|
|
83
93
|
}
|
|
84
94
|
})
|
|
@@ -86,7 +96,10 @@ export const ObjectField = (props) => {
|
|
|
86
96
|
const childSchema = properties?.[child];
|
|
87
97
|
if (!childSchema)
|
|
88
98
|
return undefined;
|
|
89
|
-
const childUiSchema =
|
|
99
|
+
const childUiSchema = {
|
|
100
|
+
...(uiSchema?.properties ?? {}),
|
|
101
|
+
...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
|
|
102
|
+
};
|
|
90
103
|
return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
|
|
91
104
|
...childUiSchema,
|
|
92
105
|
props: {
|
|
@@ -102,12 +115,12 @@ export const ObjectField = (props) => {
|
|
|
102
115
|
}, style: { display: "none" } }, child));
|
|
103
116
|
}), showAdditionalProperties &&
|
|
104
117
|
orderedAdditionalProperties.map((childName, index) => {
|
|
105
|
-
|
|
118
|
+
const childUiSchema = {
|
|
106
119
|
...(uiSchema?.additionalProperties ?? {}),
|
|
107
120
|
...(uiSchema?.properties ?? {}),
|
|
108
|
-
...(uiSchema?.[childName] ?? {}),
|
|
121
|
+
...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
|
|
109
122
|
};
|
|
110
|
-
return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema:
|
|
123
|
+
return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName), _jsxs(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
|
|
111
124
|
index > 0 &&
|
|
112
125
|
getObjectFieldButton({
|
|
113
126
|
purpose: ObjectFieldButtonPurpose.MOVE_UP,
|
|
@@ -137,15 +150,12 @@ export const ObjectField = (props) => {
|
|
|
137
150
|
})] })] }, childName));
|
|
138
151
|
}), showAdditionalProperties &&
|
|
139
152
|
hiddenAdditionalProperties.map((childName) => {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
uiSchema?.
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
return (_jsx(ObjectFieldItem, { style: { display: "none" }, children: _jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName) }, childName));
|
|
153
|
+
const childUiSchema = {
|
|
154
|
+
...(uiSchema?.additionalProperties ?? {}),
|
|
155
|
+
...(uiSchema?.properties ?? {}),
|
|
156
|
+
...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
|
|
157
|
+
};
|
|
158
|
+
return (_jsx(ObjectFieldItem, { style: { display: "none" }, children: _jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName) }, childName));
|
|
149
159
|
}), additionalProperties &&
|
|
150
160
|
getObjectFieldButton({
|
|
151
161
|
purpose: ObjectFieldButtonPurpose.ADD,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nolwenture/formik-jsonschema-form",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.4",
|
|
4
4
|
"description": "Formik form generation from json schema",
|
|
5
5
|
"author": "anttivikman <antti.vikman@nolwenture.com>",
|
|
6
6
|
"contributors": [
|
|
@@ -122,4 +122,4 @@
|
|
|
122
122
|
"last 1 safari version"
|
|
123
123
|
]
|
|
124
124
|
}
|
|
125
|
-
}
|
|
125
|
+
}
|