seat-editor 3.1.18 → 3.1.20
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/app/constant.d.ts +17 -0
- package/dist/app/constant.js +11 -0
- package/dist/app/new-board/page.jsx +2 -1
- package/dist/app/only-view/page.d.ts +19 -0
- package/dist/app/only-view/page.jsx +97 -97
- package/dist/components/layer-v3/index.jsx +5 -5
- package/dist/features/board-v3/index.jsx +1 -0
- package/dist/features/view-only-3/index.d.ts +6 -2
- package/dist/features/view-only-3/index.jsx +21 -10
- package/package.json +1 -1
package/dist/app/constant.d.ts
CHANGED
|
@@ -162,6 +162,23 @@ export declare const test1: {
|
|
|
162
162
|
offsetX: string;
|
|
163
163
|
offsetY: string;
|
|
164
164
|
direction: string;
|
|
165
|
+
} | {
|
|
166
|
+
gap: string;
|
|
167
|
+
key: string;
|
|
168
|
+
items: ({
|
|
169
|
+
type: string;
|
|
170
|
+
value: string;
|
|
171
|
+
fontWeight: string;
|
|
172
|
+
textDecoration: string;
|
|
173
|
+
} | {
|
|
174
|
+
type: string;
|
|
175
|
+
value: string;
|
|
176
|
+
fontWeight?: undefined;
|
|
177
|
+
textDecoration?: undefined;
|
|
178
|
+
})[];
|
|
179
|
+
direction: string;
|
|
180
|
+
offsetY: number;
|
|
181
|
+
offsetX?: undefined;
|
|
165
182
|
})[];
|
|
166
183
|
shape: string;
|
|
167
184
|
width: number;
|
package/dist/app/constant.js
CHANGED
|
@@ -3138,6 +3138,12 @@ export const test1 = [
|
|
|
3138
3138
|
gap: "2",
|
|
3139
3139
|
key: "rsvp_time",
|
|
3140
3140
|
items: [
|
|
3141
|
+
{
|
|
3142
|
+
type: "text",
|
|
3143
|
+
value: "18:00",
|
|
3144
|
+
fontWeight: "bold",
|
|
3145
|
+
textDecoration: "underline",
|
|
3146
|
+
},
|
|
3141
3147
|
{
|
|
3142
3148
|
type: "text",
|
|
3143
3149
|
value: "19:00",
|
|
@@ -3148,6 +3154,7 @@ export const test1 = [
|
|
|
3148
3154
|
},
|
|
3149
3155
|
],
|
|
3150
3156
|
direction: "column",
|
|
3157
|
+
offsetY: -25
|
|
3151
3158
|
},
|
|
3152
3159
|
],
|
|
3153
3160
|
shape: "square",
|
|
@@ -3189,6 +3196,10 @@ export const test1 = [
|
|
|
3189
3196
|
},
|
|
3190
3197
|
],
|
|
3191
3198
|
upcomings: [
|
|
3199
|
+
{
|
|
3200
|
+
time: "18:00",
|
|
3201
|
+
uuid: "9d5504a8-0f35-4027-8fff-c33235acfef0",
|
|
3202
|
+
},
|
|
3192
3203
|
{
|
|
3193
3204
|
time: "19:00",
|
|
3194
3205
|
uuid: "ab7eb02b-1c4b-4e13-9ad8-122c891376db",
|
|
@@ -3,9 +3,10 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
import SeatEditor from "../../features/package";
|
|
4
4
|
import { extraComponent } from "../constant";
|
|
5
5
|
import { data4 } from "../constant";
|
|
6
|
+
import { dummyImage } from "../only-view/page";
|
|
6
7
|
export default function NewBoard() {
|
|
7
8
|
const [initialValue, setInitialValue] = useState([]);
|
|
8
|
-
const [extraComponents, setExtraComponents] = useState(
|
|
9
|
+
const [extraComponents, setExtraComponents] = useState(dummyImage);
|
|
9
10
|
const [backgroundColor, setBackgroundColor] = useState("#000000");
|
|
10
11
|
const [viewOnly, setViewOnly] = useState(true);
|
|
11
12
|
useEffect(() => {
|
|
@@ -1,2 +1,21 @@
|
|
|
1
|
+
export declare const dummyImage: {
|
|
2
|
+
id: string;
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
rotation: number;
|
|
8
|
+
shape: string;
|
|
9
|
+
src: string;
|
|
10
|
+
fill: string;
|
|
11
|
+
opacity: number;
|
|
12
|
+
labels: {
|
|
13
|
+
label: string;
|
|
14
|
+
fontColor: string;
|
|
15
|
+
x: number;
|
|
16
|
+
fontSize: number;
|
|
17
|
+
y: number;
|
|
18
|
+
}[];
|
|
19
|
+
}[];
|
|
1
20
|
declare const TouchScrollDetect: () => import("react").JSX.Element;
|
|
2
21
|
export default TouchScrollDetect;
|
|
@@ -7,7 +7,7 @@ import { UserIcon } from "./user";
|
|
|
7
7
|
import { Modal } from "antd";
|
|
8
8
|
import JsonView from "@uiw/react-json-view";
|
|
9
9
|
// import { dummyImage } from "./constant";
|
|
10
|
-
const dummyImage = [
|
|
10
|
+
export const dummyImage = [
|
|
11
11
|
{
|
|
12
12
|
id: "1747388267450",
|
|
13
13
|
x: 368,
|
|
@@ -29,101 +29,101 @@ const dummyImage = [
|
|
|
29
29
|
},
|
|
30
30
|
],
|
|
31
31
|
},
|
|
32
|
-
{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
},
|
|
32
|
+
// {
|
|
33
|
+
// x: 100,
|
|
34
|
+
// y: 520,
|
|
35
|
+
// labels: [
|
|
36
|
+
// {
|
|
37
|
+
// x: 0,
|
|
38
|
+
// y: 27,
|
|
39
|
+
// label: "New Table 5",
|
|
40
|
+
// fontSize: 12,
|
|
41
|
+
// fontColor: "#0d0c0c",
|
|
42
|
+
// },
|
|
43
|
+
// ],
|
|
44
|
+
// id: "1761194669729132000",
|
|
45
|
+
// stroke: "#347ADB", //warna border
|
|
46
|
+
// fill: "#E1F4FF", //warna latar belakang
|
|
47
|
+
// strokeWidth: 1,
|
|
48
|
+
// text: "",
|
|
49
|
+
// shape: "background",
|
|
50
|
+
// width: 100,
|
|
51
|
+
// height: 100,
|
|
52
|
+
// gapTags: 10, //gap antara tags secara vertical,
|
|
53
|
+
// tags: [
|
|
54
|
+
// {
|
|
55
|
+
// key: "table", //key untuk penamaan tag
|
|
56
|
+
// items: [
|
|
57
|
+
// {
|
|
58
|
+
// type: "text", //tipe text atau icon
|
|
59
|
+
// value: "V1", //value untuk text atau icon
|
|
60
|
+
// fontSize: 14,
|
|
61
|
+
// fontWeight: 600,
|
|
62
|
+
// fill: "#3F4254",
|
|
63
|
+
// },
|
|
64
|
+
// ],
|
|
65
|
+
// direction: "flex", // flex untuk horizontal dan column untuk vertikal
|
|
66
|
+
// gap: 2, //gap antara item
|
|
67
|
+
// offsetX: 0, //offset x antara item
|
|
68
|
+
// offsetY: 0, //offset y antara item
|
|
69
|
+
// },
|
|
70
|
+
// {
|
|
71
|
+
// key: "rsvp_time",
|
|
72
|
+
// items: [
|
|
73
|
+
// {
|
|
74
|
+
// value: "11:00",
|
|
75
|
+
// type: "text",
|
|
76
|
+
// fill: "#5E6278",
|
|
77
|
+
// fontSize: 11,
|
|
78
|
+
// fontWeight: 700,
|
|
79
|
+
// textDecoration: "underline",
|
|
80
|
+
// },
|
|
81
|
+
// {
|
|
82
|
+
// value: "20:00",
|
|
83
|
+
// type: "text",
|
|
84
|
+
// fill: "#5E6278",
|
|
85
|
+
// fontSize: 11,
|
|
86
|
+
// fontWeight: 400,
|
|
87
|
+
// },
|
|
88
|
+
// ],
|
|
89
|
+
// direction: "column",
|
|
90
|
+
// gap: 2,
|
|
91
|
+
// },
|
|
92
|
+
// {
|
|
93
|
+
// key: "rsvp_time",
|
|
94
|
+
// items: [
|
|
95
|
+
// {
|
|
96
|
+
// value: "01:00",
|
|
97
|
+
// type: "text",
|
|
98
|
+
// fill: "#5E6278",
|
|
99
|
+
// fontSize: 11,
|
|
100
|
+
// fontWeight: 400,
|
|
101
|
+
// symbol: {
|
|
102
|
+
// value: "+1",
|
|
103
|
+
// gap: 8,
|
|
104
|
+
// fontSize: 9,
|
|
105
|
+
// position: "right-top", // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
|
|
106
|
+
// },
|
|
107
|
+
// },
|
|
108
|
+
// ],
|
|
109
|
+
// direction: "flex",
|
|
110
|
+
// gap: 10,
|
|
111
|
+
// offsetX: -3,
|
|
112
|
+
// offsetY: -8,
|
|
113
|
+
// },
|
|
114
|
+
// ],
|
|
115
|
+
// opacity: 1,
|
|
116
|
+
// rotation: 90,
|
|
117
|
+
// seatCount: 10,
|
|
118
|
+
// openSpace: 0.3,
|
|
119
|
+
// seatFill: "#ed8989",
|
|
120
|
+
// seatPositions: {
|
|
121
|
+
// top: 3,
|
|
122
|
+
// bottom: 3,
|
|
123
|
+
// left: 3,
|
|
124
|
+
// right: 3,
|
|
125
|
+
// },
|
|
126
|
+
// },
|
|
127
127
|
];
|
|
128
128
|
const Card = (item) => {
|
|
129
129
|
const handleDragStart = (e) => {
|
|
@@ -194,7 +194,7 @@ const TouchScrollDetect = () => {
|
|
|
194
194
|
items: ["text", "icon"],
|
|
195
195
|
},
|
|
196
196
|
{
|
|
197
|
-
key: "
|
|
197
|
+
key: "rsvp_time",
|
|
198
198
|
items: ["text", "icon"],
|
|
199
199
|
},
|
|
200
200
|
]} defaultBackground="#000000" mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
|
|
@@ -519,11 +519,6 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
|
|
|
519
519
|
})}
|
|
520
520
|
</g>
|
|
521
521
|
</g>
|
|
522
|
-
</g>);
|
|
523
|
-
}
|
|
524
|
-
case "bounding-box": {
|
|
525
|
-
return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
|
|
526
|
-
<rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
|
|
527
522
|
</g>);
|
|
528
523
|
}
|
|
529
524
|
case "text":
|
|
@@ -556,6 +551,11 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
|
|
|
556
551
|
</g>
|
|
557
552
|
</g>
|
|
558
553
|
</g>);
|
|
554
|
+
case "bounding-box": {
|
|
555
|
+
return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
|
|
556
|
+
<rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
|
|
557
|
+
</g>);
|
|
558
|
+
}
|
|
559
559
|
default:
|
|
560
560
|
return <g key={id}/>;
|
|
561
561
|
}
|
|
@@ -224,6 +224,7 @@ const BoardTemplate = ({ refs }) => {
|
|
|
224
224
|
const nextExtraComponents = index !== -1
|
|
225
225
|
? extraComponentsState.map((item, i) => i === index ? component : item)
|
|
226
226
|
: [...extraComponentsState, component];
|
|
227
|
+
console.log({ nextExtraComponents });
|
|
227
228
|
setExtraComponentsState(nextExtraComponents);
|
|
228
229
|
dispatch({
|
|
229
230
|
type: "board/setNewExtraComponents",
|
|
@@ -14,8 +14,8 @@ export type TableMatchEvent = {
|
|
|
14
14
|
event: EventHandleType;
|
|
15
15
|
properties: PropertiesProps;
|
|
16
16
|
};
|
|
17
|
-
export type ComponentProps = PropertiesProps | {
|
|
18
|
-
[
|
|
17
|
+
export type ComponentProps<T = PropertiesProps> = T | {
|
|
18
|
+
[K in string]: T;
|
|
19
19
|
};
|
|
20
20
|
export type OnCurrentStateChange = ({ components, extraComponents, }: {
|
|
21
21
|
components: ComponentProps[];
|
|
@@ -68,6 +68,10 @@ export interface LayerViewProps {
|
|
|
68
68
|
onDrop?: (e: React.MouseEvent<SVGSVGElement>, component: ComponentProps) => void;
|
|
69
69
|
onSwitch?: (e: MouseEvent, component: ComponentProps) => void;
|
|
70
70
|
refs?: React.ForwardedRef<RefLayerView>;
|
|
71
|
+
viewStyles?: {
|
|
72
|
+
paddingX?: number;
|
|
73
|
+
paddingY?: number;
|
|
74
|
+
};
|
|
71
75
|
}
|
|
72
76
|
declare const LayerView: (props: LayerViewProps) => React.JSX.Element;
|
|
73
77
|
export default LayerView;
|
|
@@ -5,13 +5,14 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
|
|
|
5
5
|
import Layers from "../../components/layer-v4";
|
|
6
6
|
import { getTranslate } from "../board-v3/utils";
|
|
7
7
|
const LayerView = (props) => {
|
|
8
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags } = props;
|
|
8
|
+
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, } = props;
|
|
9
9
|
const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
|
|
10
10
|
const tableGhost = useRef(null);
|
|
11
11
|
const hoverUnderghostId = useRef(null);
|
|
12
12
|
const transformRef = useRef(null);
|
|
13
13
|
const containerRef = useRef(null);
|
|
14
14
|
const svgRef = useRef(null);
|
|
15
|
+
const hasBoundingBoxRef = useRef(false);
|
|
15
16
|
const [tooltip, setTooltip] = useState({
|
|
16
17
|
x: 0,
|
|
17
18
|
y: 0,
|
|
@@ -76,7 +77,8 @@ const LayerView = (props) => {
|
|
|
76
77
|
});
|
|
77
78
|
}
|
|
78
79
|
if (type === "get" && dataParams) {
|
|
79
|
-
|
|
80
|
+
const mapped = mappingKey ? dataParams[mappingKey] : undefined;
|
|
81
|
+
data = mapped !== undefined ? mapped : dataParams;
|
|
80
82
|
}
|
|
81
83
|
return data;
|
|
82
84
|
};
|
|
@@ -96,7 +98,7 @@ const LayerView = (props) => {
|
|
|
96
98
|
setSelectedTable(seletedTable);
|
|
97
99
|
};
|
|
98
100
|
const boundingBox = useMemo(() => {
|
|
99
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
101
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
100
102
|
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
101
103
|
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
102
104
|
}
|
|
@@ -157,12 +159,15 @@ const LayerView = (props) => {
|
|
|
157
159
|
}
|
|
158
160
|
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 &&
|
|
159
161
|
["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
|
|
160
|
-
minX = minX
|
|
161
|
-
minY = minY
|
|
162
|
+
minX = minX;
|
|
163
|
+
minY = minY;
|
|
162
164
|
}
|
|
163
165
|
const hasBoundingBox = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.some((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
|
|
166
|
+
const paddingY = maxY * (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingY) || 0) + minY * (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingY) || 0);
|
|
167
|
+
const paddingX = maxX * (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingX) || 0) + minX * (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingX) || 0);
|
|
164
168
|
if (hasBoundingBox) {
|
|
165
169
|
const findBoundingBox = extraComponentsEditor.find((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
|
|
170
|
+
hasBoundingBoxRef.current = true;
|
|
166
171
|
return {
|
|
167
172
|
minX: findBoundingBox.x,
|
|
168
173
|
minY: findBoundingBox.y,
|
|
@@ -170,8 +175,6 @@ const LayerView = (props) => {
|
|
|
170
175
|
height: findBoundingBox.height,
|
|
171
176
|
};
|
|
172
177
|
}
|
|
173
|
-
const paddingY = maxY * 0.2 + minY * 0.2;
|
|
174
|
-
const paddingX = maxX * 0.2 + minX * 0.1;
|
|
175
178
|
return {
|
|
176
179
|
minX: minX - paddingX - (minX - paddingX) * 0.5,
|
|
177
180
|
minY: minY - paddingY * 2,
|
|
@@ -497,6 +500,7 @@ const LayerView = (props) => {
|
|
|
497
500
|
handlePan(0, -speedPanning);
|
|
498
501
|
}
|
|
499
502
|
};
|
|
503
|
+
const hasBoundingBox = hasBoundingBoxRef.current;
|
|
500
504
|
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
|
|
501
505
|
overflow: "auto",
|
|
502
506
|
WebkitOverflowScrolling: "touch",
|
|
@@ -518,19 +522,26 @@ const LayerView = (props) => {
|
|
|
518
522
|
<TransformComponent wrapperStyle={{
|
|
519
523
|
width: "100%",
|
|
520
524
|
height: "100%",
|
|
521
|
-
overflow: "visible",
|
|
525
|
+
// overflow: "visible",
|
|
522
526
|
}} contentStyle={{
|
|
523
527
|
width: "100%",
|
|
524
528
|
height: "100%",
|
|
525
529
|
}}>
|
|
526
|
-
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
530
|
+
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
531
|
+
// scale={5}
|
|
532
|
+
overflow="hidden" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
|
|
527
533
|
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
528
534
|
display: "block",
|
|
529
535
|
pointerEvents: "all",
|
|
530
536
|
touchAction: "none",
|
|
531
537
|
userSelect: "none",
|
|
532
538
|
}} {...props.svgProps}>
|
|
533
|
-
<
|
|
539
|
+
<defs>
|
|
540
|
+
<clipPath id="contentCrop">
|
|
541
|
+
<rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
|
|
542
|
+
</clipPath>
|
|
543
|
+
</defs>
|
|
544
|
+
<g id="main-layer" clip-path="url(#contentCrop)">
|
|
534
545
|
<Layers components={[
|
|
535
546
|
...extraComponentsEditor,
|
|
536
547
|
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|