@springmicro/forms 0.7.5 → 0.7.6

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.
Files changed (18) hide show
  1. package/.eslintrc.cjs +22 -22
  2. package/package.json +3 -3
  3. package/src/builder/bottom-drawer.tsx +429 -429
  4. package/src/builder/form-builder.tsx +256 -256
  5. package/src/builder/modal.tsx +39 -39
  6. package/src/builder/nodes/node-base.tsx +94 -94
  7. package/src/builder/nodes/node-child-helpers.tsx +273 -273
  8. package/src/builder/nodes/node-parent.tsx +187 -187
  9. package/src/builder/nodes/node-types/array-node.tsx +134 -134
  10. package/src/builder/nodes/node-types/date-node.tsx +60 -60
  11. package/src/builder/nodes/node-types/file-node.tsx +67 -67
  12. package/src/builder/nodes/node-types/integer-node.tsx +60 -60
  13. package/src/builder/nodes/node-types/object-node.tsx +67 -67
  14. package/src/builder/nodes/node-types/text-node.tsx +66 -66
  15. package/src/index.tsx +26 -26
  16. package/src/types/form-builder.ts +135 -135
  17. package/src/types/utils.type.ts +1 -1
  18. package/src/utils/form-builder.ts +424 -424
package/src/builder/nodes/node-base.tsx CHANGED
@@ -1,94 +1,94 @@
1
- import { EditingStateType } from "../../types/form-builder";
2
- import { UseStateType } from "../../types/utils.type";
3
- import { Box, SxProps } from "@mui/material";
4
- import React from "react";
5
- import { Draggable } from "react-beautiful-dnd";
6
-
7
- export type NodeBaseProps = {
8
- children?: React.ReactNode;
9
- sx?: SxProps;
10
- nodeId: string;
11
- index: number;
12
- editingState: UseStateType<EditingStateType>;
13
- icon: React.ComponentType<any>;
14
- };
15
-
16
- export default function NodeBase({
17
- children,
18
- sx,
19
- nodeId,
20
- index,
21
- editingState,
22
- icon: Icon,
23
- }: NodeBaseProps) {
24
- const [editingId, setEditing] = editingState;
25
- const editingThisNode = editingId && editingId === nodeId;
26
-
27
- const edit = () => {
28
- if (editingThisNode) return;
29
- setEditing(nodeId);
30
- };
31
-
32
- return (
33
- <Draggable draggableId={nodeId} index={index}>
34
- {(provided) => (
35
- <div ref={provided.innerRef} {...provided.draggableProps}>
36
- <Box
37
- id={nodeId}
38
- sx={{
39
- display: "flex",
40
- flexDirection: "row",
41
- width: "100%",
42
- backgroundColor: editingThisNode ? "#ececec" : "#e3e3e3",
43
- border: editingThisNode
44
- ? "2px solid #c0c0c0"
45
- : "2px solid #e3e3e3",
46
- borderRadius: 1,
47
- transition: "all 0.2s",
48
- cursor: editingThisNode ? "default" : "pointer",
49
- ...(sx ?? {}), // Can be used for custom styles or overrides.
50
- }}
51
- >
52
- <Handle {...provided.dragHandleProps} />
53
- <Box
54
- sx={{ flexGrow: 1, pr: 2, pb: 2, display: "flex" }}
55
- onClick={edit}
56
- >
57
- <Box sx={{ width: 30, height: "100%", pt: 2 }} onClick={edit}>
58
- <Icon sx={{ color: "#888" }} />
59
- </Box>
60
- {children}
61
- </Box>
62
- </Box>
63
- </div>
64
- )}
65
- </Draggable>
66
- );
67
- }
68
-
69
- // The draggable part of the icon.
70
- function Handle(props: any) {
71
- return (
72
- <Box
73
- sx={{ p: 2, gap: 0.33, display: "flex", flexDirection: "row" }}
74
- {...props}
75
- >
76
- <Box
77
- sx={{
78
- backgroundColor: "#888",
79
- borderRadius: 2,
80
- width: 3,
81
- height: "100%",
82
- }}
83
- />
84
- <Box
85
- sx={{
86
- backgroundColor: "#888",
87
- borderRadius: 2,
88
- width: 3,
89
- height: "100%",
90
- }}
91
- />
92
- </Box>
93
- );
94
- }
1
+ import { EditingStateType } from "../../types/form-builder";
2
+ import { UseStateType } from "../../types/utils.type";
3
+ import { Box, SxProps } from "@mui/material";
4
+ import React from "react";
5
+ import { Draggable } from "react-beautiful-dnd";
6
+
7
+ export type NodeBaseProps = {
8
+ children?: React.ReactNode;
9
+ sx?: SxProps;
10
+ nodeId: string;
11
+ index: number;
12
+ editingState: UseStateType<EditingStateType>;
13
+ icon: React.ComponentType<any>;
14
+ };
15
+
16
+ export default function NodeBase({
17
+ children,
18
+ sx,
19
+ nodeId,
20
+ index,
21
+ editingState,
22
+ icon: Icon,
23
+ }: NodeBaseProps) {
24
+ const [editingId, setEditing] = editingState;
25
+ const editingThisNode = editingId && editingId === nodeId;
26
+
27
+ const edit = () => {
28
+ if (editingThisNode) return;
29
+ setEditing(nodeId);
30
+ };
31
+
32
+ return (
33
+ <Draggable draggableId={nodeId} index={index}>
34
+ {(provided) => (
35
+ <div ref={provided.innerRef} {...provided.draggableProps}>
36
+ <Box
37
+ id={nodeId}
38
+ sx={{
39
+ display: "flex",
40
+ flexDirection: "row",
41
+ width: "100%",
42
+ backgroundColor: editingThisNode ? "#ececec" : "#e3e3e3",
43
+ border: editingThisNode
44
+ ? "2px solid #c0c0c0"
45
+ : "2px solid #e3e3e3",
46
+ borderRadius: 1,
47
+ transition: "all 0.2s",
48
+ cursor: editingThisNode ? "default" : "pointer",
49
+ ...(sx ?? {}), // Can be used for custom styles or overrides.
50
+ }}
51
+ >
52
+ <Handle {...provided.dragHandleProps} />
53
+ <Box
54
+ sx={{ flexGrow: 1, pr: 2, pb: 2, display: "flex" }}
55
+ onClick={edit}
56
+ >
57
+ <Box sx={{ width: 30, height: "100%", pt: 2 }} onClick={edit}>
58
+ <Icon sx={{ color: "#888" }} />
59
+ </Box>
60
+ {children}
61
+ </Box>
62
+ </Box>
63
+ </div>
64
+ )}
65
+ </Draggable>
66
+ );
67
+ }
68
+
69
+ // The draggable part of the icon.
70
+ function Handle(props: any) {
71
+ return (
72
+ <Box
73
+ sx={{ p: 2, gap: 0.33, display: "flex", flexDirection: "row" }}
74
+ {...props}
75
+ >
76
+ <Box
77
+ sx={{
78
+ backgroundColor: "#888",
79
+ borderRadius: 2,
80
+ width: 3,
81
+ height: "100%",
82
+ }}
83
+ />
84
+ <Box
85
+ sx={{
86
+ backgroundColor: "#888",
87
+ borderRadius: 2,
88
+ width: 3,
89
+ height: "100%",
90
+ }}
91
+ />
92
+ </Box>
93
+ );
94
+ }