@springmicro/forms 0.7.5 → 0.7.7
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/.eslintrc.cjs +22 -22
- package/dist/index.js +4436 -4439
- package/dist/index.umd.cjs +36 -36
- package/package.json +3 -3
- package/src/builder/bottom-drawer.tsx +429 -429
- package/src/builder/form-builder.tsx +256 -256
- package/src/builder/modal.tsx +39 -39
- package/src/builder/nodes/node-base.tsx +94 -94
- package/src/builder/nodes/node-child-helpers.tsx +273 -273
- package/src/builder/nodes/node-parent.tsx +187 -187
- package/src/builder/nodes/node-types/array-node.tsx +134 -134
- package/src/builder/nodes/node-types/date-node.tsx +60 -60
- package/src/builder/nodes/node-types/file-node.tsx +67 -67
- package/src/builder/nodes/node-types/integer-node.tsx +60 -60
- package/src/builder/nodes/node-types/object-node.tsx +67 -67
- package/src/builder/nodes/node-types/text-node.tsx +66 -66
- package/src/index.tsx +26 -26
- package/src/types/form-builder.ts +135 -135
- package/src/types/utils.type.ts +1 -1
- package/src/utils/form-builder.ts +424 -424
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChildNodeProps,
|
|
3
|
-
DateNode as DateNodeType,
|
|
4
|
-
FieldArrayType,
|
|
5
|
-
} from "../../../types/form-builder";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
-
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
-
|
|
10
|
-
export default function DateNode({
|
|
11
|
-
nodeState,
|
|
12
|
-
updateNode,
|
|
13
|
-
defaultFields,
|
|
14
|
-
defaultChecks,
|
|
15
|
-
}: ChildNodeProps) {
|
|
16
|
-
const [node, setNode] = nodeState;
|
|
17
|
-
|
|
18
|
-
React.useEffect(() => {
|
|
19
|
-
updateNode(node);
|
|
20
|
-
}, [node]);
|
|
21
|
-
|
|
22
|
-
function isValid(key: string, value: string) {
|
|
23
|
-
return true;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
27
|
-
|
|
28
|
-
const fields: FieldArrayType<DateNodeType> = [];
|
|
29
|
-
|
|
30
|
-
const checks: FieldArrayType<DateNodeType> = [];
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<>
|
|
34
|
-
<FieldContainer>
|
|
35
|
-
{defaultFields}
|
|
36
|
-
{fields.map((field) => (
|
|
37
|
-
<NodeField
|
|
38
|
-
key={field.prop}
|
|
39
|
-
field={field}
|
|
40
|
-
node={node}
|
|
41
|
-
update={updateNodeByKeyLocal}
|
|
42
|
-
{...field.props}
|
|
43
|
-
/>
|
|
44
|
-
))}
|
|
45
|
-
</FieldContainer>
|
|
46
|
-
<FieldContainer>
|
|
47
|
-
{defaultChecks}
|
|
48
|
-
{checks.map((check) => (
|
|
49
|
-
<NodeCheckbox
|
|
50
|
-
key={check.prop}
|
|
51
|
-
field={check}
|
|
52
|
-
node={node}
|
|
53
|
-
update={updateNodeByKeyLocal}
|
|
54
|
-
{...check.props}
|
|
55
|
-
/>
|
|
56
|
-
))}
|
|
57
|
-
</FieldContainer>
|
|
58
|
-
</>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ChildNodeProps,
|
|
3
|
+
DateNode as DateNodeType,
|
|
4
|
+
FieldArrayType,
|
|
5
|
+
} from "../../../types/form-builder";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
+
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
+
|
|
10
|
+
export default function DateNode({
|
|
11
|
+
nodeState,
|
|
12
|
+
updateNode,
|
|
13
|
+
defaultFields,
|
|
14
|
+
defaultChecks,
|
|
15
|
+
}: ChildNodeProps) {
|
|
16
|
+
const [node, setNode] = nodeState;
|
|
17
|
+
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
updateNode(node);
|
|
20
|
+
}, [node]);
|
|
21
|
+
|
|
22
|
+
function isValid(key: string, value: string) {
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
27
|
+
|
|
28
|
+
const fields: FieldArrayType<DateNodeType> = [];
|
|
29
|
+
|
|
30
|
+
const checks: FieldArrayType<DateNodeType> = [];
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<FieldContainer>
|
|
35
|
+
{defaultFields}
|
|
36
|
+
{fields.map((field) => (
|
|
37
|
+
<NodeField
|
|
38
|
+
key={field.prop}
|
|
39
|
+
field={field}
|
|
40
|
+
node={node}
|
|
41
|
+
update={updateNodeByKeyLocal}
|
|
42
|
+
{...field.props}
|
|
43
|
+
/>
|
|
44
|
+
))}
|
|
45
|
+
</FieldContainer>
|
|
46
|
+
<FieldContainer>
|
|
47
|
+
{defaultChecks}
|
|
48
|
+
{checks.map((check) => (
|
|
49
|
+
<NodeCheckbox
|
|
50
|
+
key={check.prop}
|
|
51
|
+
field={check}
|
|
52
|
+
node={node}
|
|
53
|
+
update={updateNodeByKeyLocal}
|
|
54
|
+
{...check.props}
|
|
55
|
+
/>
|
|
56
|
+
))}
|
|
57
|
+
</FieldContainer>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChildNodeProps,
|
|
3
|
-
FieldArrayType,
|
|
4
|
-
FileNodeEmpty as FileNodeType,
|
|
5
|
-
} from "../../../types/form-builder";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
-
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
-
|
|
10
|
-
export default function FileNode({
|
|
11
|
-
nodeState,
|
|
12
|
-
updateNode,
|
|
13
|
-
defaultFields,
|
|
14
|
-
defaultChecks,
|
|
15
|
-
}: ChildNodeProps) {
|
|
16
|
-
const [node, setNode] = nodeState;
|
|
17
|
-
|
|
18
|
-
React.useEffect(() => {
|
|
19
|
-
updateNode(node);
|
|
20
|
-
}, [node]);
|
|
21
|
-
|
|
22
|
-
function isValid(key: string, value: string) {
|
|
23
|
-
return true;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
27
|
-
|
|
28
|
-
const fields: FieldArrayType<FileNodeType> = [
|
|
29
|
-
{
|
|
30
|
-
prop: "filetype",
|
|
31
|
-
tooltip: "Require a specific file type. Leave blank for any filetype.",
|
|
32
|
-
},
|
|
33
|
-
];
|
|
34
|
-
|
|
35
|
-
const checks: FieldArrayType<FileNodeType> = [
|
|
36
|
-
{ prop: "multiple", title: "Multiple Files" },
|
|
37
|
-
];
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<>
|
|
41
|
-
<FieldContainer>
|
|
42
|
-
{defaultFields}
|
|
43
|
-
{fields.map((field) => (
|
|
44
|
-
<NodeField
|
|
45
|
-
key={field.prop}
|
|
46
|
-
field={field}
|
|
47
|
-
node={node}
|
|
48
|
-
update={updateNodeByKeyLocal}
|
|
49
|
-
{...field.props}
|
|
50
|
-
/>
|
|
51
|
-
))}
|
|
52
|
-
</FieldContainer>
|
|
53
|
-
<FieldContainer>
|
|
54
|
-
{defaultChecks}
|
|
55
|
-
{checks.map((check) => (
|
|
56
|
-
<NodeCheckbox
|
|
57
|
-
key={check.prop}
|
|
58
|
-
field={check}
|
|
59
|
-
node={node}
|
|
60
|
-
update={updateNodeByKeyLocal}
|
|
61
|
-
{...check.props}
|
|
62
|
-
/>
|
|
63
|
-
))}
|
|
64
|
-
</FieldContainer>
|
|
65
|
-
</>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ChildNodeProps,
|
|
3
|
+
FieldArrayType,
|
|
4
|
+
FileNodeEmpty as FileNodeType,
|
|
5
|
+
} from "../../../types/form-builder";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
+
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
+
|
|
10
|
+
export default function FileNode({
|
|
11
|
+
nodeState,
|
|
12
|
+
updateNode,
|
|
13
|
+
defaultFields,
|
|
14
|
+
defaultChecks,
|
|
15
|
+
}: ChildNodeProps) {
|
|
16
|
+
const [node, setNode] = nodeState;
|
|
17
|
+
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
updateNode(node);
|
|
20
|
+
}, [node]);
|
|
21
|
+
|
|
22
|
+
function isValid(key: string, value: string) {
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
27
|
+
|
|
28
|
+
const fields: FieldArrayType<FileNodeType> = [
|
|
29
|
+
{
|
|
30
|
+
prop: "filetype",
|
|
31
|
+
tooltip: "Require a specific file type. Leave blank for any filetype.",
|
|
32
|
+
},
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
const checks: FieldArrayType<FileNodeType> = [
|
|
36
|
+
{ prop: "multiple", title: "Multiple Files" },
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<>
|
|
41
|
+
<FieldContainer>
|
|
42
|
+
{defaultFields}
|
|
43
|
+
{fields.map((field) => (
|
|
44
|
+
<NodeField
|
|
45
|
+
key={field.prop}
|
|
46
|
+
field={field}
|
|
47
|
+
node={node}
|
|
48
|
+
update={updateNodeByKeyLocal}
|
|
49
|
+
{...field.props}
|
|
50
|
+
/>
|
|
51
|
+
))}
|
|
52
|
+
</FieldContainer>
|
|
53
|
+
<FieldContainer>
|
|
54
|
+
{defaultChecks}
|
|
55
|
+
{checks.map((check) => (
|
|
56
|
+
<NodeCheckbox
|
|
57
|
+
key={check.prop}
|
|
58
|
+
field={check}
|
|
59
|
+
node={node}
|
|
60
|
+
update={updateNodeByKeyLocal}
|
|
61
|
+
{...check.props}
|
|
62
|
+
/>
|
|
63
|
+
))}
|
|
64
|
+
</FieldContainer>
|
|
65
|
+
</>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChildNodeProps,
|
|
3
|
-
FieldArrayType,
|
|
4
|
-
IntegerNode as IntegerNodeType,
|
|
5
|
-
} from "../../../types/form-builder";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
-
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
-
|
|
10
|
-
export default function IntegerNode({
|
|
11
|
-
nodeState,
|
|
12
|
-
updateNode,
|
|
13
|
-
defaultFields,
|
|
14
|
-
defaultChecks,
|
|
15
|
-
}: ChildNodeProps) {
|
|
16
|
-
const [node, setNode] = nodeState;
|
|
17
|
-
|
|
18
|
-
React.useEffect(() => {
|
|
19
|
-
updateNode(node);
|
|
20
|
-
}, [node]);
|
|
21
|
-
|
|
22
|
-
function isValid(key: string, value: string) {
|
|
23
|
-
return true;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
27
|
-
|
|
28
|
-
const fields: FieldArrayType<IntegerNodeType> = [];
|
|
29
|
-
|
|
30
|
-
const checks: FieldArrayType<IntegerNodeType> = [];
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<>
|
|
34
|
-
<FieldContainer>
|
|
35
|
-
{defaultFields}
|
|
36
|
-
{fields.map((field) => (
|
|
37
|
-
<NodeField
|
|
38
|
-
key={field.prop}
|
|
39
|
-
field={field}
|
|
40
|
-
node={node}
|
|
41
|
-
update={updateNodeByKeyLocal}
|
|
42
|
-
{...field.props}
|
|
43
|
-
/>
|
|
44
|
-
))}
|
|
45
|
-
</FieldContainer>
|
|
46
|
-
<FieldContainer>
|
|
47
|
-
{defaultChecks}
|
|
48
|
-
{checks.map((check) => (
|
|
49
|
-
<NodeCheckbox
|
|
50
|
-
key={check.prop}
|
|
51
|
-
field={check}
|
|
52
|
-
node={node}
|
|
53
|
-
update={updateNodeByKeyLocal}
|
|
54
|
-
{...check.props}
|
|
55
|
-
/>
|
|
56
|
-
))}
|
|
57
|
-
</FieldContainer>
|
|
58
|
-
</>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ChildNodeProps,
|
|
3
|
+
FieldArrayType,
|
|
4
|
+
IntegerNode as IntegerNodeType,
|
|
5
|
+
} from "../../../types/form-builder";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
+
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
+
|
|
10
|
+
export default function IntegerNode({
|
|
11
|
+
nodeState,
|
|
12
|
+
updateNode,
|
|
13
|
+
defaultFields,
|
|
14
|
+
defaultChecks,
|
|
15
|
+
}: ChildNodeProps) {
|
|
16
|
+
const [node, setNode] = nodeState;
|
|
17
|
+
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
updateNode(node);
|
|
20
|
+
}, [node]);
|
|
21
|
+
|
|
22
|
+
function isValid(key: string, value: string) {
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
27
|
+
|
|
28
|
+
const fields: FieldArrayType<IntegerNodeType> = [];
|
|
29
|
+
|
|
30
|
+
const checks: FieldArrayType<IntegerNodeType> = [];
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<FieldContainer>
|
|
35
|
+
{defaultFields}
|
|
36
|
+
{fields.map((field) => (
|
|
37
|
+
<NodeField
|
|
38
|
+
key={field.prop}
|
|
39
|
+
field={field}
|
|
40
|
+
node={node}
|
|
41
|
+
update={updateNodeByKeyLocal}
|
|
42
|
+
{...field.props}
|
|
43
|
+
/>
|
|
44
|
+
))}
|
|
45
|
+
</FieldContainer>
|
|
46
|
+
<FieldContainer>
|
|
47
|
+
{defaultChecks}
|
|
48
|
+
{checks.map((check) => (
|
|
49
|
+
<NodeCheckbox
|
|
50
|
+
key={check.prop}
|
|
51
|
+
field={check}
|
|
52
|
+
node={node}
|
|
53
|
+
update={updateNodeByKeyLocal}
|
|
54
|
+
{...check.props}
|
|
55
|
+
/>
|
|
56
|
+
))}
|
|
57
|
+
</FieldContainer>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChildNodeProps,
|
|
3
|
-
FieldArrayType,
|
|
4
|
-
ObjectNodeEmpty,
|
|
5
|
-
} from "../../../types/form-builder";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
-
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
-
import { Button } from "@mui/material";
|
|
10
|
-
|
|
11
|
-
export default function ObjectNode({
|
|
12
|
-
nodeState,
|
|
13
|
-
updateNode,
|
|
14
|
-
defaultFields,
|
|
15
|
-
defaultChecks,
|
|
16
|
-
updatePath,
|
|
17
|
-
}: ChildNodeProps) {
|
|
18
|
-
const [node, setNode] = nodeState;
|
|
19
|
-
|
|
20
|
-
React.useEffect(() => {
|
|
21
|
-
updateNode(node);
|
|
22
|
-
}, [node]);
|
|
23
|
-
|
|
24
|
-
function isValid(key: string, value: string) {
|
|
25
|
-
const n = node as ObjectNodeEmpty;
|
|
26
|
-
return true;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
30
|
-
|
|
31
|
-
const fields: FieldArrayType<ObjectNodeEmpty> = [];
|
|
32
|
-
|
|
33
|
-
const checks: FieldArrayType<ObjectNodeEmpty> = [];
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<>
|
|
37
|
-
<FieldContainer>
|
|
38
|
-
{defaultFields}
|
|
39
|
-
{fields.map((field) => (
|
|
40
|
-
<NodeField
|
|
41
|
-
key={field.prop}
|
|
42
|
-
field={field}
|
|
43
|
-
node={node}
|
|
44
|
-
update={updateNodeByKeyLocal}
|
|
45
|
-
{...field.props}
|
|
46
|
-
/>
|
|
47
|
-
))}
|
|
48
|
-
</FieldContainer>
|
|
49
|
-
<FieldContainer>
|
|
50
|
-
{defaultChecks}
|
|
51
|
-
{checks.map((check) => (
|
|
52
|
-
<NodeCheckbox
|
|
53
|
-
key={check.prop}
|
|
54
|
-
field={check}
|
|
55
|
-
node={node}
|
|
56
|
-
update={updateNodeByKeyLocal}
|
|
57
|
-
{...check.props}
|
|
58
|
-
/>
|
|
59
|
-
))}
|
|
60
|
-
</FieldContainer>
|
|
61
|
-
|
|
62
|
-
<Button onClick={updatePath} variant="contained" fullWidth>
|
|
63
|
-
Open
|
|
64
|
-
</Button>
|
|
65
|
-
</>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ChildNodeProps,
|
|
3
|
+
FieldArrayType,
|
|
4
|
+
ObjectNodeEmpty,
|
|
5
|
+
} from "../../../types/form-builder";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
+
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
+
import { Button } from "@mui/material";
|
|
10
|
+
|
|
11
|
+
export default function ObjectNode({
|
|
12
|
+
nodeState,
|
|
13
|
+
updateNode,
|
|
14
|
+
defaultFields,
|
|
15
|
+
defaultChecks,
|
|
16
|
+
updatePath,
|
|
17
|
+
}: ChildNodeProps) {
|
|
18
|
+
const [node, setNode] = nodeState;
|
|
19
|
+
|
|
20
|
+
React.useEffect(() => {
|
|
21
|
+
updateNode(node);
|
|
22
|
+
}, [node]);
|
|
23
|
+
|
|
24
|
+
function isValid(key: string, value: string) {
|
|
25
|
+
const n = node as ObjectNodeEmpty;
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
30
|
+
|
|
31
|
+
const fields: FieldArrayType<ObjectNodeEmpty> = [];
|
|
32
|
+
|
|
33
|
+
const checks: FieldArrayType<ObjectNodeEmpty> = [];
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<>
|
|
37
|
+
<FieldContainer>
|
|
38
|
+
{defaultFields}
|
|
39
|
+
{fields.map((field) => (
|
|
40
|
+
<NodeField
|
|
41
|
+
key={field.prop}
|
|
42
|
+
field={field}
|
|
43
|
+
node={node}
|
|
44
|
+
update={updateNodeByKeyLocal}
|
|
45
|
+
{...field.props}
|
|
46
|
+
/>
|
|
47
|
+
))}
|
|
48
|
+
</FieldContainer>
|
|
49
|
+
<FieldContainer>
|
|
50
|
+
{defaultChecks}
|
|
51
|
+
{checks.map((check) => (
|
|
52
|
+
<NodeCheckbox
|
|
53
|
+
key={check.prop}
|
|
54
|
+
field={check}
|
|
55
|
+
node={node}
|
|
56
|
+
update={updateNodeByKeyLocal}
|
|
57
|
+
{...check.props}
|
|
58
|
+
/>
|
|
59
|
+
))}
|
|
60
|
+
</FieldContainer>
|
|
61
|
+
|
|
62
|
+
<Button onClick={updatePath} variant="contained" fullWidth>
|
|
63
|
+
Open
|
|
64
|
+
</Button>
|
|
65
|
+
</>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChildNodeProps,
|
|
3
|
-
FieldArrayType,
|
|
4
|
-
TextNodeEmpty,
|
|
5
|
-
} from "../../../types/form-builder";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
-
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
-
|
|
10
|
-
export default function TextNode({
|
|
11
|
-
nodeState,
|
|
12
|
-
updateNode,
|
|
13
|
-
defaultFields,
|
|
14
|
-
defaultChecks,
|
|
15
|
-
}: ChildNodeProps) {
|
|
16
|
-
const [node, setNode] = nodeState;
|
|
17
|
-
|
|
18
|
-
React.useEffect(() => {
|
|
19
|
-
updateNode(node);
|
|
20
|
-
}, [node]);
|
|
21
|
-
|
|
22
|
-
function isValid(key: string, value: string) {
|
|
23
|
-
const n = node as TextNodeEmpty;
|
|
24
|
-
return true;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
28
|
-
|
|
29
|
-
const fields: FieldArrayType<TextNodeEmpty> = [
|
|
30
|
-
{ prop: "default" },
|
|
31
|
-
{ prop: "format" },
|
|
32
|
-
{ prop: "minLength", props: { type: "number" } },
|
|
33
|
-
{ prop: "maxLength", props: { type: "number" } },
|
|
34
|
-
];
|
|
35
|
-
|
|
36
|
-
const checks: FieldArrayType<TextNodeEmpty> = [];
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<>
|
|
40
|
-
<FieldContainer>
|
|
41
|
-
{defaultFields}
|
|
42
|
-
{fields.map((field) => (
|
|
43
|
-
<NodeField
|
|
44
|
-
key={field.prop}
|
|
45
|
-
field={field}
|
|
46
|
-
node={node}
|
|
47
|
-
update={updateNodeByKeyLocal}
|
|
48
|
-
{...field.props}
|
|
49
|
-
/>
|
|
50
|
-
))}
|
|
51
|
-
</FieldContainer>
|
|
52
|
-
<FieldContainer>
|
|
53
|
-
{defaultChecks}
|
|
54
|
-
{checks.map((check) => (
|
|
55
|
-
<NodeCheckbox
|
|
56
|
-
key={check.prop}
|
|
57
|
-
field={check}
|
|
58
|
-
node={node}
|
|
59
|
-
update={updateNodeByKeyLocal}
|
|
60
|
-
{...check.props}
|
|
61
|
-
/>
|
|
62
|
-
))}
|
|
63
|
-
</FieldContainer>
|
|
64
|
-
</>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ChildNodeProps,
|
|
3
|
+
FieldArrayType,
|
|
4
|
+
TextNodeEmpty,
|
|
5
|
+
} from "../../../types/form-builder";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
|
|
8
|
+
import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
|
|
9
|
+
|
|
10
|
+
export default function TextNode({
|
|
11
|
+
nodeState,
|
|
12
|
+
updateNode,
|
|
13
|
+
defaultFields,
|
|
14
|
+
defaultChecks,
|
|
15
|
+
}: ChildNodeProps) {
|
|
16
|
+
const [node, setNode] = nodeState;
|
|
17
|
+
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
updateNode(node);
|
|
20
|
+
}, [node]);
|
|
21
|
+
|
|
22
|
+
function isValid(key: string, value: string) {
|
|
23
|
+
const n = node as TextNodeEmpty;
|
|
24
|
+
return true;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
|
|
28
|
+
|
|
29
|
+
const fields: FieldArrayType<TextNodeEmpty> = [
|
|
30
|
+
{ prop: "default" },
|
|
31
|
+
{ prop: "format" },
|
|
32
|
+
{ prop: "minLength", props: { type: "number" } },
|
|
33
|
+
{ prop: "maxLength", props: { type: "number" } },
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const checks: FieldArrayType<TextNodeEmpty> = [];
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<>
|
|
40
|
+
<FieldContainer>
|
|
41
|
+
{defaultFields}
|
|
42
|
+
{fields.map((field) => (
|
|
43
|
+
<NodeField
|
|
44
|
+
key={field.prop}
|
|
45
|
+
field={field}
|
|
46
|
+
node={node}
|
|
47
|
+
update={updateNodeByKeyLocal}
|
|
48
|
+
{...field.props}
|
|
49
|
+
/>
|
|
50
|
+
))}
|
|
51
|
+
</FieldContainer>
|
|
52
|
+
<FieldContainer>
|
|
53
|
+
{defaultChecks}
|
|
54
|
+
{checks.map((check) => (
|
|
55
|
+
<NodeCheckbox
|
|
56
|
+
key={check.prop}
|
|
57
|
+
field={check}
|
|
58
|
+
node={node}
|
|
59
|
+
update={updateNodeByKeyLocal}
|
|
60
|
+
{...check.props}
|
|
61
|
+
/>
|
|
62
|
+
))}
|
|
63
|
+
</FieldContainer>
|
|
64
|
+
</>
|
|
65
|
+
);
|
|
66
|
+
}
|