@nolwenture/formik-jsonschema-form 0.26.1 → 0.26.2
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/dist/Form.js +3 -3
- package/dist/Form.stories.js +9 -32
- package/dist/FormEditor.js +3 -12
- package/dist/FormPdf.js +3 -3
- package/dist/FormPdf.stories.js +7 -30
- package/dist/fields/AnyField.js +3 -3
- package/dist/fields/ArrayField.js +9 -9
- package/dist/fields/BooleanField.js +6 -3
- package/dist/fields/DateField.js +1 -1
- package/dist/fields/FileUploadField.js +9 -18
- package/dist/fields/MultipleChoiceField.js +2 -2
- package/dist/fields/NullField.js +1 -1
- package/dist/fields/NumberField.js +4 -2
- package/dist/fields/ObjectField.js +11 -23
- package/dist/fields/RadioField.js +1 -1
- package/dist/fields/SchemaField.js +6 -2
- package/dist/fields/SearchMultiTagSelectField.js +1 -1
- package/dist/fields/SearchableSelectField.js +19 -25
- package/dist/fields/StringField.js +11 -9
- package/dist/fields/TextAreaField.js +1 -1
- package/dist/fields/ToggleField.js +1 -1
- package/dist/fields/stories/AnyField.stories.js +22 -31
- package/dist/fields/stories/ArrayField.stories.js +64 -73
- package/dist/fields/stories/BooleanField.stories.js +6 -15
- package/dist/fields/stories/DateField.stories.js +4 -13
- package/dist/fields/stories/FileUploadField.stories.js +9 -18
- package/dist/fields/stories/MultipleChoiceField.stories.js +24 -33
- package/dist/fields/stories/NullField.stories.js +3 -12
- package/dist/fields/stories/NumberField.stories.js +4 -13
- package/dist/fields/stories/ObjectField.stories.js +11 -20
- package/dist/fields/stories/RadioField.stories.js +8 -17
- package/dist/fields/stories/SchemaField.stories.js +24 -17
- package/dist/fields/stories/SearchMultiTagSelectField.stories.js +8 -17
- package/dist/fields/stories/StringField.stories.js +17 -26
- package/dist/fields/stories/TextAreaField.stories.js +4 -13
- package/dist/fields/stories/ToggleField.stories.js +6 -15
- package/dist/hooks/useExtractUiSchema.js +13 -16
- package/dist/pdfFields/AnyField.js +3 -3
- package/dist/pdfFields/ArrayField.js +3 -4
- package/dist/pdfFields/BooleanField.js +1 -1
- package/dist/pdfFields/DateField.js +4 -2
- package/dist/pdfFields/EJSField.js +1 -2
- package/dist/pdfFields/MultipleChoiceField.js +2 -3
- package/dist/pdfFields/NullField.js +1 -1
- package/dist/pdfFields/NumberField.js +4 -2
- package/dist/pdfFields/ObjectField.js +7 -19
- package/dist/pdfFields/RadioField.js +7 -2
- package/dist/pdfFields/SchemaField.js +6 -2
- package/dist/pdfFields/SearchMultiTagSelectField.js +1 -1
- package/dist/pdfFields/SearchableSelectField.js +1 -1
- package/dist/pdfFields/StringField.js +2 -3
- package/dist/pdfFields/TextAreaField.js +1 -1
- package/dist/pdfFields/ToggleField.js +7 -2
- package/dist/pdfTemplates/ArrayFieldTemplate.js +1 -1
- package/dist/pdfTemplates/CollapsibleObjectFieldTemplate.js +1 -1
- package/dist/pdfTemplates/FieldTemplate.js +1 -1
- package/dist/pdfTemplates/ObjectFieldTemplate.js +1 -1
- package/dist/styledComponents.js +39 -59
- package/dist/templates/ArrayFieldTemplate.js +6 -14
- package/dist/templates/CollapsibleObjectFieldTemplate.js +6 -14
- package/dist/templates/FieldTemplate.js +6 -14
- package/dist/templates/ObjectFieldTemplate.js +6 -14
- package/dist/utils/__tests/createInitialValues.test.js +2 -11
- package/dist/utils/__tests/createValidationSchema.test.js +30 -35
- package/dist/utils/__tests/solveReferences.test.js +4 -8
- package/dist/utils/createInitialValues.js +9 -7
- package/dist/utils/createValidationSchema.js +19 -32
- package/dist/utils/getEnums.js +2 -2
- package/dist/utils/getTitleAndDescription.js +7 -9
- package/dist/utils/hasReferences.js +2 -2
- package/dist/utils/resolveSchema.js +16 -30
- package/dist/utils/solveReferences.js +3 -4
- package/package.json +9 -9
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { within, userEvent, expect, waitFor } from "@storybook/test";
|
|
12
3
|
import { Formik, Form } from "formik";
|
|
@@ -67,7 +58,7 @@ export const Default = {
|
|
|
67
58
|
},
|
|
68
59
|
uiSchema: { collapsibleObject: { props: { isCollapsible: true } } },
|
|
69
60
|
},
|
|
70
|
-
play:
|
|
61
|
+
play: async ({ canvasElement }) => {
|
|
71
62
|
const canvas = within(canvasElement);
|
|
72
63
|
const stringField = canvasElement.querySelector('input[name="object.string"]');
|
|
73
64
|
const numberField = canvasElement.querySelector('input[name="object.number"]');
|
|
@@ -75,20 +66,20 @@ export const Default = {
|
|
|
75
66
|
const enumField = canvasElement.querySelector('select[name="object.enum[0]"]');
|
|
76
67
|
const collapsibleObjectButton = canvas.getByLabelText("object.collapsibleObject");
|
|
77
68
|
expect(collapsibleObjectButton).toBeInTheDocument();
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const stringFieldInCollapsibleObject = (
|
|
84
|
-
const numberFieldInCollapsibleObject = (
|
|
85
|
-
|
|
86
|
-
|
|
69
|
+
await userEvent.type(stringField, "string");
|
|
70
|
+
await userEvent.type(numberField, "123");
|
|
71
|
+
await userEvent.click(booleanField);
|
|
72
|
+
await userEvent.selectOptions(enumField, "2");
|
|
73
|
+
await userEvent.click(collapsibleObjectButton);
|
|
74
|
+
const stringFieldInCollapsibleObject = (await waitFor(() => canvasElement.querySelector('input[name="object.collapsibleObject.insideCollapsibleObject"]')));
|
|
75
|
+
const numberFieldInCollapsibleObject = (await waitFor(() => canvasElement.querySelector('input[name="object.collapsibleObject.alsoInsideCollapsibleObject"]')));
|
|
76
|
+
await userEvent.type(stringFieldInCollapsibleObject, "string in collapsible object");
|
|
77
|
+
await userEvent.type(numberFieldInCollapsibleObject, "313");
|
|
87
78
|
expect(stringField).toHaveValue("string");
|
|
88
79
|
expect(numberField).toHaveValue(123);
|
|
89
80
|
expect(booleanField).toBeChecked();
|
|
90
81
|
expect(enumField).toHaveValue("2");
|
|
91
82
|
expect(stringFieldInCollapsibleObject).toHaveValue("string in collapsible object");
|
|
92
83
|
expect(numberFieldInCollapsibleObject).toHaveValue(313);
|
|
93
|
-
}
|
|
84
|
+
},
|
|
94
85
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { userEvent, expect } from "@storybook/test";
|
|
12
3
|
import { RadioField } from "./../RadioField";
|
|
@@ -29,14 +20,14 @@ export const Default = {
|
|
|
29
20
|
"ui:label": { true: "yes", false: "no" },
|
|
30
21
|
},
|
|
31
22
|
},
|
|
32
|
-
play:
|
|
23
|
+
play: async ({ canvasElement }) => {
|
|
33
24
|
const radioTrue = canvasElement.querySelector('input[type="radio"][name="RadioField"][value="true"]');
|
|
34
25
|
const radioFalse = canvasElement.querySelector('input[type="radio"][name="RadioField"][value="false"]');
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
26
|
+
await userEvent.click(radioTrue);
|
|
27
|
+
await expect(radioTrue).toBeChecked();
|
|
28
|
+
await expect(radioFalse).not.toBeChecked();
|
|
29
|
+
await userEvent.click(radioFalse);
|
|
30
|
+
await expect(radioFalse).toBeChecked();
|
|
31
|
+
await expect(radioTrue).not.toBeChecked();
|
|
32
|
+
},
|
|
42
33
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { userEvent, expect } from "@storybook/test";
|
|
12
3
|
import { Formik, Form } from "formik";
|
|
@@ -33,16 +24,32 @@ const Template = {
|
|
|
33
24
|
uiSchema: {},
|
|
34
25
|
},
|
|
35
26
|
};
|
|
36
|
-
export const StringField =
|
|
27
|
+
export const StringField = {
|
|
28
|
+
...Template,
|
|
29
|
+
args: {
|
|
30
|
+
...Template.args,
|
|
31
|
+
schema: { type: "string", title: "My String Field" },
|
|
32
|
+
uiSchema: { "ui:help": "Enter a string" },
|
|
33
|
+
},
|
|
34
|
+
play: async ({ canvasElement }) => {
|
|
37
35
|
const input = canvasElement.querySelector('input[name="myField"]');
|
|
38
|
-
|
|
36
|
+
await userEvent.type(input, "Hello World");
|
|
39
37
|
expect(input).toHaveValue("Hello World");
|
|
40
|
-
}
|
|
41
|
-
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
export const NumberField = {
|
|
41
|
+
...Template,
|
|
42
|
+
args: {
|
|
43
|
+
...Template.args,
|
|
44
|
+
schema: { type: "number", title: "My Number Field" },
|
|
45
|
+
uiSchema: { "ui:help": "Enter a number" },
|
|
46
|
+
},
|
|
47
|
+
play: async ({ canvasElement }) => {
|
|
42
48
|
const input = canvasElement.querySelector('input[name="myField"]');
|
|
43
|
-
|
|
49
|
+
await userEvent.type(input, "123");
|
|
44
50
|
expect(input).toHaveValue(123);
|
|
45
|
-
}
|
|
51
|
+
},
|
|
52
|
+
};
|
|
46
53
|
export const ReferenceAndInitialValues = {
|
|
47
54
|
args: {
|
|
48
55
|
schema: {
|
|
@@ -72,7 +79,7 @@ export const ReferenceAndInitialValues = {
|
|
|
72
79
|
},
|
|
73
80
|
},
|
|
74
81
|
},
|
|
75
|
-
play:
|
|
82
|
+
play: async ({ canvasElement }) => {
|
|
76
83
|
const nameField = canvasElement.querySelector('input[name="name"]');
|
|
77
84
|
const ageField = canvasElement.querySelector('input[name="age"]');
|
|
78
85
|
const creditCardField = canvasElement.querySelector('input[name="creditCard"]');
|
|
@@ -81,5 +88,5 @@ export const ReferenceAndInitialValues = {
|
|
|
81
88
|
expect(ageField).toHaveValue(parseInt(initialValues.age));
|
|
82
89
|
expect(creditCardField).toHaveValue(initialValues.creditCard);
|
|
83
90
|
expect(addressField).toHaveValue(initialValues.billing_address);
|
|
84
|
-
}
|
|
91
|
+
},
|
|
85
92
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { within, userEvent, expect } from "@storybook/test";
|
|
12
3
|
import { SearchMultiTagSelectField } from "./../SearchMultiTagSelectField";
|
|
@@ -35,15 +26,15 @@ export const Default = {
|
|
|
35
26
|
"ui:emptySearchMessage": "No tags found",
|
|
36
27
|
},
|
|
37
28
|
},
|
|
38
|
-
play:
|
|
29
|
+
play: async ({ canvasElement }) => {
|
|
39
30
|
const canvas = within(canvasElement);
|
|
40
31
|
const input = canvas.getByPlaceholderText("Search tags...");
|
|
41
|
-
|
|
42
|
-
const option =
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const option2 =
|
|
46
|
-
|
|
32
|
+
await userEvent.type(input, "First tag");
|
|
33
|
+
const option = await canvas.findByText("First tag");
|
|
34
|
+
await userEvent.click(option);
|
|
35
|
+
await userEvent.type(input, "Third tag");
|
|
36
|
+
const option2 = await canvas.findByText("Third tag");
|
|
37
|
+
await userEvent.click(option2);
|
|
47
38
|
const firstTag = canvas.queryByText("First tag");
|
|
48
39
|
const secondTag = canvas.queryByText("Second tag");
|
|
49
40
|
const thirdTag = canvas.queryByText("Third tag");
|
|
@@ -54,5 +45,5 @@ export const Default = {
|
|
|
54
45
|
// await userEvent.click(thirdTag.nextSibling as Element);
|
|
55
46
|
// expect(firstTag).not.toBeInTheDocument();
|
|
56
47
|
// expect(thirdTag).not.toBeInTheDocument();
|
|
57
|
-
}
|
|
48
|
+
},
|
|
58
49
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { userEvent, expect } from "@storybook/test";
|
|
12
3
|
import { StringField } from "./../StringField";
|
|
@@ -25,11 +16,11 @@ export const TextInput = {
|
|
|
25
16
|
schema: { type: "string" },
|
|
26
17
|
uiSchema: {},
|
|
27
18
|
},
|
|
28
|
-
play:
|
|
19
|
+
play: async ({ canvasElement }) => {
|
|
29
20
|
const input = canvasElement.querySelector('input[name="name"]');
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
21
|
+
await userEvent.type(input, "John Doe");
|
|
22
|
+
await expect(input).toHaveValue("John Doe");
|
|
23
|
+
},
|
|
33
24
|
};
|
|
34
25
|
export const SelectInput = {
|
|
35
26
|
args: {
|
|
@@ -43,15 +34,15 @@ export const SelectInput = {
|
|
|
43
34
|
},
|
|
44
35
|
uiSchema: {},
|
|
45
36
|
},
|
|
46
|
-
play:
|
|
37
|
+
play: async ({ canvasElement }) => {
|
|
47
38
|
const select = canvasElement.querySelector('select[name="select"]');
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
39
|
+
await userEvent.selectOptions(select, "1");
|
|
40
|
+
await expect(select).toHaveValue("1");
|
|
41
|
+
await expect(select).toHaveDisplayValue("Option 1");
|
|
42
|
+
await userEvent.selectOptions(select, "2");
|
|
43
|
+
await expect(select).toHaveValue("2");
|
|
44
|
+
await expect(select).toHaveDisplayValue("Option 2");
|
|
45
|
+
},
|
|
55
46
|
};
|
|
56
47
|
export const MultiSelect = {
|
|
57
48
|
args: {
|
|
@@ -66,10 +57,10 @@ export const MultiSelect = {
|
|
|
66
57
|
},
|
|
67
58
|
uiSchema: {},
|
|
68
59
|
},
|
|
69
|
-
play:
|
|
60
|
+
play: async ({ canvasElement }) => {
|
|
70
61
|
const multiSelect = canvasElement.querySelector('select[name="multiSelect"]');
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
62
|
+
await userEvent.selectOptions(multiSelect, ["1", "3"]);
|
|
63
|
+
await expect(multiSelect).toHaveValue(["1", "3"]);
|
|
64
|
+
await expect(multiSelect).not.toHaveValue(["2"]);
|
|
65
|
+
},
|
|
75
66
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { userEvent, expect } from "@storybook/test";
|
|
12
3
|
import { TextAreaField } from "../TextAreaField";
|
|
@@ -25,10 +16,10 @@ export const TextAreaInput = {
|
|
|
25
16
|
schema: { type: "string" },
|
|
26
17
|
uiSchema: { "ui:field": "TextAreaField" },
|
|
27
18
|
},
|
|
28
|
-
play:
|
|
19
|
+
play: async ({ canvasElement }) => {
|
|
29
20
|
const input = canvasElement.querySelector('textarea[name="TextAreaField"]');
|
|
30
21
|
expect(input).toBeInTheDocument();
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
22
|
+
await userEvent.type(input, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu felis bibendum ut tristique et egestas quis. Urna duis convallis convallis tellus id interdum velit laoreet. Nisl condimentum id venenatis a condimentum vitae sapien. Massa sed elementum tempus egestas sed sed risus pretium. Nec feugiat nisl pretium fusce id velit. Vitae aliquet nec ullamcorper sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Tellus mauris a diam maecenas. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id diam vel quam elementum pulvinar etiam. Urna id volutpat lacus laoreet non curabitur gravida. Faucibus purus in massa tempor nec feugiat nisl pretium. In hac habitasse platea dictumst vestibulum. Dui accumsan sit amet nulla. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.");
|
|
23
|
+
await expect(input).toHaveValue("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu felis bibendum ut tristique et egestas quis. Urna duis convallis convallis tellus id interdum velit laoreet. Nisl condimentum id venenatis a condimentum vitae sapien. Massa sed elementum tempus egestas sed sed risus pretium. Nec feugiat nisl pretium fusce id velit. Vitae aliquet nec ullamcorper sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Tellus mauris a diam maecenas. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id diam vel quam elementum pulvinar etiam. Urna id volutpat lacus laoreet non curabitur gravida. Faucibus purus in massa tempor nec feugiat nisl pretium. In hac habitasse platea dictumst vestibulum. Dui accumsan sit amet nulla. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.");
|
|
24
|
+
},
|
|
34
25
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
2
|
import { userEvent, expect } from "@storybook/test";
|
|
12
3
|
import { ToggleField } from "../ToggleField";
|
|
@@ -24,11 +15,11 @@ export const Default = {
|
|
|
24
15
|
schema: { type: "boolean", default: false },
|
|
25
16
|
uiSchema: {},
|
|
26
17
|
},
|
|
27
|
-
play:
|
|
18
|
+
play: async ({ canvasElement }) => {
|
|
28
19
|
const toggleSwitch = canvasElement.querySelector('input[type="checkbox"][name="toggle"]');
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
20
|
+
await userEvent.click(toggleSwitch);
|
|
21
|
+
await expect(toggleSwitch).toBeChecked();
|
|
22
|
+
await userEvent.click(toggleSwitch);
|
|
23
|
+
await expect(toggleSwitch).not.toBeChecked();
|
|
24
|
+
},
|
|
34
25
|
};
|
|
@@ -1,25 +1,22 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import { useMemo } from "react";
|
|
13
2
|
export const useExtractUiSchema = (props = {}) => {
|
|
14
|
-
var _a, _b;
|
|
15
3
|
// props is frozen by React, so it needs to be copied
|
|
16
|
-
const schema =
|
|
4
|
+
const schema = { ...props };
|
|
17
5
|
if (schema.props !== undefined) {
|
|
18
|
-
schema["ui:props"] =
|
|
6
|
+
schema["ui:props"] = {
|
|
7
|
+
...(schema["ui:props"] ?? {}),
|
|
8
|
+
...(schema.props ?? {}),
|
|
9
|
+
};
|
|
19
10
|
}
|
|
20
11
|
return useMemo(() => {
|
|
21
|
-
const { "ui:options": options = {}
|
|
22
|
-
return
|
|
12
|
+
const { "ui:options": options = {}, ...uiSchema } = schema;
|
|
13
|
+
return {
|
|
14
|
+
...Object.keys(uiSchema || {}).reduce((result, key) => ({
|
|
15
|
+
...result,
|
|
16
|
+
[key.replace("ui:", "")]: uiSchema[key],
|
|
17
|
+
}), {}),
|
|
18
|
+
...options,
|
|
19
|
+
};
|
|
23
20
|
// Input props needs to be relied, not schema. Otherwise, it will be recomputed on every render.
|
|
24
21
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
25
22
|
}, [props]);
|
|
@@ -11,11 +11,11 @@ export const AnyField = (props) => {
|
|
|
11
11
|
const enrichedSchema = useMemo(() => {
|
|
12
12
|
switch (type) {
|
|
13
13
|
case "object":
|
|
14
|
-
return
|
|
14
|
+
return { ...(schema || {}), type, additionalProperties: {} };
|
|
15
15
|
case "array":
|
|
16
|
-
return
|
|
16
|
+
return { ...(schema || {}), type, additionalItems: {} };
|
|
17
17
|
default:
|
|
18
|
-
return
|
|
18
|
+
return { ...(schema || {}), type };
|
|
19
19
|
}
|
|
20
20
|
}, [type, schema]);
|
|
21
21
|
return (_jsxs("div", { children: [_jsx("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(COMPONENT_TYPES).map((type) => (_jsx("option", { value: type, children: type }, type))) }), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
|
|
@@ -14,14 +14,13 @@ export const ArrayField = (props) => {
|
|
|
14
14
|
: props;
|
|
15
15
|
const enums = useMemo(() => getEnums(findEnumInProps), [props]);
|
|
16
16
|
function getValue(item) {
|
|
17
|
-
var _a, _b;
|
|
18
17
|
if (enums !== undefined) {
|
|
19
|
-
return (
|
|
18
|
+
return (enums.values.find((element) => element.const === item)?.title ?? "");
|
|
20
19
|
}
|
|
21
20
|
return item;
|
|
22
21
|
}
|
|
23
|
-
return (_jsx(ArrayFieldTemplate,
|
|
22
|
+
return (_jsx(ArrayFieldTemplate, { ...props, children: value &&
|
|
24
23
|
value.map((item, index) => typeof item === "object" ? (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof props.schema.additionalItems !== "boolean"
|
|
25
24
|
? props.schema.additionalItems
|
|
26
|
-
: {}, uiSchema: uiSchema }) }, index)) : (_jsx(ArrayFieldItem, { children: _jsx("div", { "data-keyword": item, children: getValue(item) }) }, item))) }))
|
|
25
|
+
: {}, uiSchema: uiSchema }) }, index)) : (_jsx(ArrayFieldItem, { children: _jsx("div", { "data-keyword": item, children: getValue(item) }) }, item))) }));
|
|
27
26
|
};
|
|
@@ -23,5 +23,5 @@ export const BooleanField = (props) => {
|
|
|
23
23
|
}
|
|
24
24
|
return typeof label === "string" ? label : undefined;
|
|
25
25
|
}
|
|
26
|
-
return (_jsx(FieldTemplate,
|
|
26
|
+
return (_jsx(FieldTemplate, { ...props, children: _jsx(BooleanFieldWrapper, { children: _jsx(BooleanFieldPdf, { name: name, value: value, label: findLabel(label) }) }) }));
|
|
27
27
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { StringField } from "./StringField";
|
|
3
3
|
export const DateField = (props) => {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
return (_jsx(StringField, { ...props, uiSchema: {
|
|
5
|
+
...props.uiSchema,
|
|
6
|
+
"ui:props": { ...(props.uiSchema?.["ui:props"] || {}) },
|
|
7
|
+
} }));
|
|
6
8
|
};
|
|
@@ -7,14 +7,13 @@ import { getIn, useFormikContext } from "formik";
|
|
|
7
7
|
import { getDescription, getTitle } from "../utils";
|
|
8
8
|
import { FormPdfRegistry } from "../FormPdf";
|
|
9
9
|
export const EJSField = (props) => {
|
|
10
|
-
var _a, _b;
|
|
11
10
|
const { components: { EJSField: PdfEJSField }, } = useContext(FormPdfRegistry);
|
|
12
11
|
useSetDefault(props);
|
|
13
12
|
const { name, uiSchema = {} } = props;
|
|
14
13
|
const { values } = useFormikContext();
|
|
15
14
|
const title = getTitle(props) || "Untitled Field";
|
|
16
15
|
const description = getDescription(props) || "No description available.";
|
|
17
|
-
const template =
|
|
16
|
+
const template = uiSchema["ui:options"]?.template ?? "No template provided.";
|
|
18
17
|
const renderedTemplate = useMemo(() => {
|
|
19
18
|
try {
|
|
20
19
|
return ejs.render(template.toString(), {
|
|
@@ -5,7 +5,6 @@ import { useExtractUiSchema, useSetDefault } from "../hooks";
|
|
|
5
5
|
import { getEnums, getSelectedEnum } from "../utils/getEnums";
|
|
6
6
|
import { getIn, useFormikContext } from "formik";
|
|
7
7
|
export const MultipleChoiceField = (props) => {
|
|
8
|
-
var _a;
|
|
9
8
|
const { templates: { FieldTemplate }, components: { MultipleChoiceFieldPdf }, } = useContext(FormPdfRegistry);
|
|
10
9
|
useSetDefault(props);
|
|
11
10
|
const { name, uiSchema } = props;
|
|
@@ -14,7 +13,7 @@ export const MultipleChoiceField = (props) => {
|
|
|
14
13
|
const { values } = useFormikContext();
|
|
15
14
|
const value = getIn(values, name);
|
|
16
15
|
const selected = getSelectedEnum(value, enums);
|
|
17
|
-
const notSelected =
|
|
16
|
+
const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
|
|
18
17
|
const hideNotSelected = onlyShowSelected === true || selected === undefined;
|
|
19
|
-
return (_jsx(FieldTemplate,
|
|
18
|
+
return (_jsx(FieldTemplate, { ...props, children: _jsx(MultipleChoiceFieldPdf, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
|
|
20
19
|
};
|
|
@@ -3,5 +3,5 @@ import { useContext } from "react";
|
|
|
3
3
|
import { FormRegistry } from "../Form";
|
|
4
4
|
export const NullField = (props) => {
|
|
5
5
|
const { templates: { FieldTemplate }, } = useContext(FormRegistry);
|
|
6
|
-
return _jsx(FieldTemplate,
|
|
6
|
+
return _jsx(FieldTemplate, { ...props });
|
|
7
7
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { StringField } from "./StringField";
|
|
3
3
|
export const NumberField = (props) => {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
return (_jsx(StringField, { ...props, uiSchema: {
|
|
5
|
+
...props.uiSchema,
|
|
6
|
+
"ui:props": { ...(props.uiSchema?.["ui:props"] || {}), type: "number" },
|
|
7
|
+
} }));
|
|
6
8
|
};
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
2
|
import { useField, useFormikContext } from "formik";
|
|
14
3
|
import { useContext, useEffect, useMemo } from "react";
|
|
@@ -25,7 +14,6 @@ const useObjectField = (name) => {
|
|
|
25
14
|
return { value, setValue };
|
|
26
15
|
};
|
|
27
16
|
export const ObjectField = (props) => {
|
|
28
|
-
var _a, _b;
|
|
29
17
|
const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, } = useContext(FormPdfRegistry);
|
|
30
18
|
useSetDefault(props);
|
|
31
19
|
const { name, schema, uiSchema } = props;
|
|
@@ -36,22 +24,22 @@ export const ObjectField = (props) => {
|
|
|
36
24
|
useEffect(() => {
|
|
37
25
|
if (valuesToRemove.length > 0) {
|
|
38
26
|
const newValue = valuesToRemove.reduce((prevValue, key) => {
|
|
39
|
-
const
|
|
27
|
+
const { [key]: _removedProperty, ...newValue } = prevValue;
|
|
40
28
|
return newValue;
|
|
41
29
|
}, value);
|
|
42
30
|
setValue(newValue);
|
|
43
31
|
}
|
|
44
32
|
}, [valuesToRemove]);
|
|
45
|
-
const FieldTemplateComponent =
|
|
33
|
+
const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
|
|
46
34
|
? CollapsibleObjectFieldTemplate
|
|
47
35
|
: ObjectFieldTemplate;
|
|
48
|
-
const orderedProperties = orderByUiSchema(uiSchema
|
|
49
|
-
return (_jsx(FieldTemplateComponent,
|
|
36
|
+
const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
|
|
37
|
+
return (_jsx(FieldTemplateComponent, { ...props, children: (orderedProperties ?? Object.keys(properties || {}))
|
|
50
38
|
.map((childName) => {
|
|
51
|
-
const childSchema = properties
|
|
39
|
+
const childSchema = properties?.[childName];
|
|
52
40
|
if (!childSchema)
|
|
53
41
|
return undefined;
|
|
54
|
-
return (_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema
|
|
42
|
+
return (_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
|
|
55
43
|
})
|
|
56
|
-
.filter((x) => x) }))
|
|
44
|
+
.filter((x) => x) }));
|
|
57
45
|
};
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { BooleanField } from "./BooleanField";
|
|
3
3
|
export const RadioField = (props) => {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
return (_jsx(BooleanField, { ...props, uiSchema: {
|
|
5
|
+
...props.uiSchema,
|
|
6
|
+
"ui:props": {
|
|
7
|
+
...(props.uiSchema?.["ui:props"] || {}),
|
|
8
|
+
type: "boolean",
|
|
9
|
+
},
|
|
10
|
+
} }));
|
|
6
11
|
};
|
|
@@ -26,6 +26,10 @@ export const SchemaField = (props) => {
|
|
|
26
26
|
const { fields, definitions, uiSchemaDefinitions } = useContext(FormPdfRegistry);
|
|
27
27
|
const schemaSolvedForReferences = useMemo(() => solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions), [schema, definitions]);
|
|
28
28
|
const FieldComponent = useFieldComponent(schemaSolvedForReferences.schema, schemaSolvedForReferences.uiSchema, fields);
|
|
29
|
-
const newProps =
|
|
30
|
-
|
|
29
|
+
const newProps = {
|
|
30
|
+
...props,
|
|
31
|
+
schema: schemaSolvedForReferences.schema,
|
|
32
|
+
uiSchema: schemaSolvedForReferences.uiSchema,
|
|
33
|
+
};
|
|
34
|
+
return _jsx(FieldComponent, { ...newProps });
|
|
31
35
|
};
|
|
@@ -8,5 +8,5 @@ export const SearchMultiTagSelectField = (props) => {
|
|
|
8
8
|
const { name, uiSchema } = props;
|
|
9
9
|
const { placeholder, emptySearchMessage, props: inputProps, } = useExtractUiSchema(uiSchema);
|
|
10
10
|
const enums = useMemo(() => getEnums(props), [props]);
|
|
11
|
-
return (_jsx(ArrayField,
|
|
11
|
+
return (_jsx(ArrayField, { ...props, ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }));
|
|
12
12
|
};
|
|
@@ -5,5 +5,5 @@ export const SearchableSelectField = (props) => {
|
|
|
5
5
|
useSetDefault(props);
|
|
6
6
|
const { uiSchema } = props;
|
|
7
7
|
const { props: inputProps } = useExtractUiSchema(uiSchema);
|
|
8
|
-
return _jsx(StringField,
|
|
8
|
+
return _jsx(StringField, { ...props, ...inputProps });
|
|
9
9
|
};
|
|
@@ -5,7 +5,6 @@ import { useSetDefault } from "../hooks";
|
|
|
5
5
|
import { getIn, useFormikContext } from "formik";
|
|
6
6
|
import { getEnums } from "../utils";
|
|
7
7
|
export const StringField = (props) => {
|
|
8
|
-
var _a, _b;
|
|
9
8
|
const { templates: { FieldTemplate }, components: { StringFieldPdf }, } = useContext(FormPdfRegistry);
|
|
10
9
|
useSetDefault(props);
|
|
11
10
|
const { name } = props;
|
|
@@ -14,7 +13,7 @@ export const StringField = (props) => {
|
|
|
14
13
|
let value = getIn(values, name);
|
|
15
14
|
if (enums !== undefined) {
|
|
16
15
|
value =
|
|
17
|
-
|
|
16
|
+
enums.values.find((element) => element.const === value)?.title ?? value;
|
|
18
17
|
}
|
|
19
|
-
return (_jsx(FieldTemplate,
|
|
18
|
+
return (_jsx(FieldTemplate, { ...props, children: _jsx(StringFieldPdf, { name: name, "data-keyword": values[name], children: value }) }));
|
|
20
19
|
};
|
|
@@ -9,5 +9,5 @@ export const TextAreaField = (props) => {
|
|
|
9
9
|
const { name, uiSchema } = props;
|
|
10
10
|
const { values } = useFormikContext();
|
|
11
11
|
const value = getIn(values, name);
|
|
12
|
-
return (_jsx(FieldTemplate,
|
|
12
|
+
return (_jsx(FieldTemplate, { ...props, children: _jsx(TextAreaPdf, { name: name, children: value }) }));
|
|
13
13
|
};
|