@nolwenture/formik-jsonschema-form 1.0.0-beta.36 → 1.0.0-beta.37
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.
|
@@ -9,65 +9,65 @@ const styled_components_1 = __importDefault(require("styled-components"));
|
|
|
9
9
|
const styledComponents_1 = require("../../Form/fields/MultipleChoiceField/styledComponents");
|
|
10
10
|
const getStyle_1 = require("../../utils/getStyle");
|
|
11
11
|
exports.FieldWrapper = styled_components_1.default.div `
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
color: ${(props) => props.theme.color.text.default};
|
|
13
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
14
|
+
margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
|
|
15
|
+
width: min(100%, 70rem);
|
|
16
16
|
`;
|
|
17
17
|
exports.FieldTitle = styled_components_1.default.label `
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
break-before: avoid;
|
|
19
|
+
color: ${(props) => props.theme.color.text.default};
|
|
20
|
+
display: inline-block;
|
|
21
|
+
font-family: ${(props) => props.theme.typography.fontFamily.heading};
|
|
22
|
+
font-size: ${(props) => props.theme.typography.size.base};
|
|
23
|
+
font-weight: ${(props) => props.theme.typography.weight.bold};
|
|
24
|
+
margin: ${(props) => `${props.theme.spacing.xs} 0`};
|
|
25
|
+
width: 100%;
|
|
26
26
|
`;
|
|
27
27
|
exports.FieldDescription = styled_components_1.default.div `
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
break-before: avoid;
|
|
29
|
+
color: ${(props) => props.theme.color.text.default};
|
|
30
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
31
|
+
font-weight: ${(props) => props.theme.typography.weight.normal};
|
|
32
|
+
font-style: italic;
|
|
33
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
34
|
+
margin-bottom: ${(props) => props.theme.spacing.s};
|
|
35
|
+
max-width: 66ch;
|
|
36
36
|
`;
|
|
37
37
|
exports.StringFieldValue = styled_components_1.default.div `
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
38
|
+
break-before: avoid;
|
|
39
|
+
color: ${(props) => props.theme.color.text.default};
|
|
40
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
41
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
42
|
+
margin-bottom: ${(props) => props.theme.spacing.l};
|
|
43
|
+
max-width: 66ch;
|
|
44
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
45
|
+
white-space: pre-line;
|
|
46
46
|
`;
|
|
47
47
|
exports.TextAreaValue = styled_components_1.default.div `
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
48
|
+
break-before: avoid;
|
|
49
|
+
color: ${(props) => props.theme.color.text.default};
|
|
50
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
51
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
52
|
+
margin-bottom: ${(props) => props.theme.spacing.l};
|
|
53
|
+
max-width: 66ch;
|
|
54
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
55
|
+
white-space: pre-line;
|
|
56
56
|
`;
|
|
57
57
|
exports.ArrayFieldItem = styled_components_1.default.div `
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
break-before: avoid;
|
|
59
|
+
color: ${(props) => props.theme.color.text.default};
|
|
60
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
61
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
62
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
63
63
|
`;
|
|
64
64
|
exports.EJSFieldValue = styled_components_1.default.div `
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
break-before: avoid;
|
|
66
|
+
color: ${(props) => props.theme.color.text.default};
|
|
67
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
68
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
69
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
70
|
+
width: 100%;
|
|
71
71
|
`;
|
|
72
72
|
const NotSelected = styled_components_1.default.div `
|
|
73
73
|
opacity: 0.3;
|
|
@@ -102,19 +102,18 @@ const NotSelectedCircle = styled_components_1.default.span `
|
|
|
102
102
|
flex: 0 0 1rem;
|
|
103
103
|
`;
|
|
104
104
|
exports.BooleanFieldWrapper = styled_components_1.default.div `
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
break-before: avoid;
|
|
106
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
107
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
108
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
110
109
|
`;
|
|
111
110
|
exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
break-before: avoid;
|
|
112
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
113
|
+
label {
|
|
114
|
+
align-items: start;
|
|
115
|
+
}
|
|
116
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
118
117
|
`;
|
|
119
118
|
const BooleanFieldValue = ({ name, className, value, label, }) => {
|
|
120
119
|
return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
|
|
@@ -123,7 +122,7 @@ exports.BooleanFieldValue = BooleanFieldValue;
|
|
|
123
122
|
const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
|
|
124
123
|
return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
|
|
125
124
|
selected.length > 0 &&
|
|
126
|
-
selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
|
|
125
|
+
selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
|
|
127
126
|
notSelected?.length > 0 &&
|
|
128
127
|
notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: "\u2715" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
|
|
129
128
|
};
|
|
@@ -3,65 +3,65 @@ import styled from "styled-components";
|
|
|
3
3
|
import { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldLabel, } from "../../Form/fields/MultipleChoiceField/styledComponents";
|
|
4
4
|
import { getStyle } from "../../utils/getStyle";
|
|
5
5
|
export const FieldWrapper = styled.div `
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
color: ${(props) => props.theme.color.text.default};
|
|
7
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
8
|
+
margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
|
|
9
|
+
width: min(100%, 70rem);
|
|
10
10
|
`;
|
|
11
11
|
export const FieldTitle = styled.label `
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
break-before: avoid;
|
|
13
|
+
color: ${(props) => props.theme.color.text.default};
|
|
14
|
+
display: inline-block;
|
|
15
|
+
font-family: ${(props) => props.theme.typography.fontFamily.heading};
|
|
16
|
+
font-size: ${(props) => props.theme.typography.size.base};
|
|
17
|
+
font-weight: ${(props) => props.theme.typography.weight.bold};
|
|
18
|
+
margin: ${(props) => `${props.theme.spacing.xs} 0`};
|
|
19
|
+
width: 100%;
|
|
20
20
|
`;
|
|
21
21
|
export const FieldDescription = styled.div `
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
break-before: avoid;
|
|
23
|
+
color: ${(props) => props.theme.color.text.default};
|
|
24
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
25
|
+
font-weight: ${(props) => props.theme.typography.weight.normal};
|
|
26
|
+
font-style: italic;
|
|
27
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
28
|
+
margin-bottom: ${(props) => props.theme.spacing.s};
|
|
29
|
+
max-width: 66ch;
|
|
30
30
|
`;
|
|
31
31
|
export const StringFieldValue = styled.div `
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
break-before: avoid;
|
|
33
|
+
color: ${(props) => props.theme.color.text.default};
|
|
34
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
35
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
36
|
+
margin-bottom: ${(props) => props.theme.spacing.l};
|
|
37
|
+
max-width: 66ch;
|
|
38
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
39
|
+
white-space: pre-line;
|
|
40
40
|
`;
|
|
41
41
|
export const TextAreaValue = styled.div `
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
break-before: avoid;
|
|
43
|
+
color: ${(props) => props.theme.color.text.default};
|
|
44
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
45
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
46
|
+
margin-bottom: ${(props) => props.theme.spacing.l};
|
|
47
|
+
max-width: 66ch;
|
|
48
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
49
|
+
white-space: pre-line;
|
|
50
50
|
`;
|
|
51
51
|
export const ArrayFieldItem = styled.div `
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
break-before: avoid;
|
|
53
|
+
color: ${(props) => props.theme.color.text.default};
|
|
54
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
55
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
56
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
57
57
|
`;
|
|
58
58
|
export const EJSFieldValue = styled.div `
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
break-before: avoid;
|
|
60
|
+
color: ${(props) => props.theme.color.text.default};
|
|
61
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
62
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
63
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
64
|
+
width: 100%;
|
|
65
65
|
`;
|
|
66
66
|
const NotSelected = styled.div `
|
|
67
67
|
opacity: 0.3;
|
|
@@ -96,19 +96,18 @@ const NotSelectedCircle = styled.span `
|
|
|
96
96
|
flex: 0 0 1rem;
|
|
97
97
|
`;
|
|
98
98
|
export const BooleanFieldWrapper = styled.div `
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
99
|
+
break-before: avoid;
|
|
100
|
+
font-family: ${(props) => props.theme.typography.fontFamily.base};
|
|
101
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
102
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
104
103
|
`;
|
|
105
104
|
export const MultipleChoiceFieldWrapper = styled.div `
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
105
|
+
break-before: avoid;
|
|
106
|
+
font-size: ${(props) => props.theme.typography.size.small};
|
|
107
|
+
label {
|
|
108
|
+
align-items: start;
|
|
109
|
+
}
|
|
110
|
+
padding-left: ${(props) => props.theme.spacing.l};
|
|
112
111
|
`;
|
|
113
112
|
export const BooleanFieldValue = ({ name, className, value, label, }) => {
|
|
114
113
|
return (_jsx("div", { className: className, children: value === true ? (_jsxs("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: label !== undefined ? label : "Not selected" })] })) }));
|
|
@@ -116,7 +115,7 @@ export const BooleanFieldValue = ({ name, className, value, label, }) => {
|
|
|
116
115
|
export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
|
|
117
116
|
return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
|
|
118
117
|
selected.length > 0 &&
|
|
119
|
-
selected.map((s) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
|
|
118
|
+
selected.map((s) => (_jsx(MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
|
|
120
119
|
notSelected?.length > 0 &&
|
|
121
120
|
notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
|
|
122
121
|
};
|
package/package.json
CHANGED