seat-editor 1.6.21 → 1.6.22
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 +43 -0
- package/dist/app/constant.js +2747 -0
- package/dist/app/layout.d.ts +1 -1
- package/dist/app/{layout.js → layout.jsx} +7 -2
- package/dist/app/new-board/page.d.ts +1 -1
- package/dist/app/new-board/page.jsx +2 -2
- package/dist/app/old-board/page.d.ts +2 -1
- package/dist/app/old-board/{page.js → page.jsx} +215 -82
- package/dist/app/only-view/page.d.ts +1 -1
- package/dist/app/only-view/{page.js → page.jsx} +1 -2
- package/dist/app/page.d.ts +1 -1
- package/dist/app/page.jsx +13 -0
- package/dist/app/test/page.d.ts +2 -1
- package/dist/app/test/{page.js → page.jsx} +5 -3
- package/dist/app/v2/page.d.ts +1 -1
- package/dist/app/v2/page.jsx +13 -0
- package/dist/components/button-tools/index.d.ts +1 -1
- package/dist/components/button-tools/index.jsx +17 -0
- package/dist/components/form-tools/label.d.ts +1 -1
- package/dist/components/form-tools/label.jsx +44 -0
- package/dist/components/form-tools/shape.d.ts +1 -1
- package/dist/components/form-tools/shape.jsx +66 -0
- package/dist/components/input/number-indicator.d.ts +1 -1
- package/dist/components/input/{number-indicator.js → number-indicator.jsx} +11 -2
- package/dist/components/joystick/index.d.ts +2 -1
- package/dist/components/joystick/{index.js → index.jsx} +14 -13
- package/dist/components/layer/index.d.ts +1 -1
- package/dist/components/layer/index.jsx +383 -0
- package/dist/components/layer-v2/index.d.ts +1 -1
- package/dist/components/layer-v2/index.jsx +370 -0
- package/dist/components/lib/index.d.ts +1 -1
- package/dist/components/lib/{index.js → index.jsx} +7 -2
- package/dist/components/modal-preview/index.d.ts +1 -1
- package/dist/components/modal-preview/index.jsx +11 -0
- package/dist/features/board/index.d.ts +1 -1
- package/dist/features/board/{index.js → index.jsx} +90 -31
- package/dist/features/board-v2/index.d.ts +2 -1
- package/dist/features/board-v2/{index.js → index.jsx} +98 -39
- package/dist/features/navbar/index.d.ts +1 -1
- package/dist/features/navbar/index.jsx +5 -0
- package/dist/features/package/index.d.ts +1 -1
- package/dist/features/package/{index.js → index.jsx} +16 -6
- package/dist/features/panel/index.d.ts +1 -1
- package/dist/features/panel/{index.js → index.jsx} +16 -8
- package/dist/features/panel/select-tool.d.ts +1 -1
- package/dist/features/panel/{select-tool.js → select-tool.jsx} +20 -8
- package/dist/features/panel/square-circle-tool.d.ts +1 -1
- package/dist/features/panel/{square-circle-tool.js → square-circle-tool.jsx} +4 -2
- package/dist/features/panel/table-seat-circle.d.ts +1 -1
- package/dist/features/panel/table-seat-circle.jsx +31 -0
- package/dist/features/panel/text-tool.d.ts +1 -1
- package/dist/features/panel/text-tool.jsx +26 -0
- package/dist/features/panel/upload-tool.d.ts +1 -1
- package/dist/features/panel/{upload-tool.js → upload-tool.jsx} +24 -2
- package/dist/features/side-tool/index.d.ts +1 -1
- package/dist/features/side-tool/{index.js → index.jsx} +90 -71
- package/dist/features/view/index.d.ts +1 -1
- package/dist/features/view-only/index.d.ts +1 -1
- package/dist/features/view-only/{index.js → index.jsx} +44 -35
- package/dist/provider/antd-provider.jsx +46 -0
- package/dist/provider/redux-provider.d.ts +1 -1
- package/dist/provider/{redux-provider.js → redux-provider.jsx} +1 -2
- package/dist/provider/store-provider.d.ts +1 -1
- package/dist/provider/{store-provider.js → store-provider.jsx} +3 -2
- package/package.json +1 -1
- package/dist/app/new-board/page.js +0 -34
- package/dist/app/page.js +0 -8
- package/dist/app/v2/page.js +0 -8
- package/dist/components/button-tools/index.js +0 -11
- package/dist/components/form-tools/label.js +0 -7
- package/dist/components/form-tools/shape.js +0 -25
- package/dist/components/layer/index.js +0 -295
- package/dist/components/layer-v2/index.js +0 -282
- package/dist/components/modal-preview/index.js +0 -10
- package/dist/features/navbar/index.js +0 -6
- package/dist/features/panel/table-seat-circle.js +0 -9
- package/dist/features/panel/text-tool.js +0 -7
- package/dist/features/view/index.js +0 -221
- package/dist/provider/antd-provider.js +0 -43
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { ColorPicker, Flex, Form, InputNumber } from "antd";
|
|
4
|
-
import SectionLabel from "../../components/form-tools/label";
|
|
5
|
-
import SectionShape from "../../components/form-tools/shape";
|
|
6
|
-
const SeatCircle = () => {
|
|
7
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
|
|
8
|
-
};
|
|
9
|
-
export default SeatCircle;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { ColorPicker, Form, Input, InputNumber } from "antd";
|
|
4
|
-
const TextTool = () => {
|
|
5
|
-
return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { label: "Name", name: "shape", className: "w-full hidden", children: _jsx(Input, { defaultValue: "text" }) }), _jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "x", label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "y", label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }));
|
|
6
|
-
};
|
|
7
|
-
export default TextTool;
|
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use client";
|
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
import { useEffect, useMemo, useRef, useState } from "react";
|
|
5
|
-
import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
|
|
6
|
-
import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
|
|
7
|
-
import Layers from "../../components/layer";
|
|
8
|
-
import { isEqual } from "lodash";
|
|
9
|
-
const LayerView = (props) => {
|
|
10
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
|
|
11
|
-
const transformRef = useRef(null);
|
|
12
|
-
const containerRef = useRef(null);
|
|
13
|
-
const svgRef = useRef(null);
|
|
14
|
-
const [scale, setScale] = useState(1);
|
|
15
|
-
const [selectedTable, setSelectedTable] = useState(null);
|
|
16
|
-
const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
|
|
17
|
-
const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
|
|
18
|
-
const dispatch = useAppDispatch();
|
|
19
|
-
const convertComponentProps = () => {
|
|
20
|
-
let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
|
|
21
|
-
if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
|
|
22
|
-
return Object.assign({}, item === null || item === void 0 ? void 0 : item[mappingKey]);
|
|
23
|
-
}
|
|
24
|
-
return item;
|
|
25
|
-
});
|
|
26
|
-
return mappingData;
|
|
27
|
-
};
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
if (componentProps) {
|
|
30
|
-
if (!isEqual(componentsEditor, convertComponentProps())) {
|
|
31
|
-
let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
|
|
32
|
-
if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
|
|
33
|
-
return Object.assign({}, item[props.mappingKey]);
|
|
34
|
-
}
|
|
35
|
-
return item;
|
|
36
|
-
});
|
|
37
|
-
dispatch({
|
|
38
|
-
type: "board/setNewComponents",
|
|
39
|
-
payload: mappingData,
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
if (extraComponentsEditor) {
|
|
44
|
-
if (!isEqual(extraComponentsEditor, extraComponentProps)) {
|
|
45
|
-
dispatch({
|
|
46
|
-
type: "board/setNewExtraComponents",
|
|
47
|
-
payload: extraComponentProps,
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
if (defaultBackground) {
|
|
52
|
-
dispatch({
|
|
53
|
-
type: "board/setBackgroundColor",
|
|
54
|
-
payload: defaultBackground,
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
}, [componentProps, extraComponentProps, defaultBackground]);
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
onCurrentStateChange &&
|
|
60
|
-
onCurrentStateChange({
|
|
61
|
-
components: componentsEditor,
|
|
62
|
-
extraComponents: extraComponentsEditor,
|
|
63
|
-
});
|
|
64
|
-
}, [componentsEditor, extraComponentsEditor]);
|
|
65
|
-
const handleSelectComponent = (items) => {
|
|
66
|
-
const find = componentsEditor.find((item) => {
|
|
67
|
-
if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
|
|
68
|
-
return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
|
|
69
|
-
}
|
|
70
|
-
return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
|
|
71
|
-
});
|
|
72
|
-
onSelectComponent && onSelectComponent(find);
|
|
73
|
-
setSelectedTable(find);
|
|
74
|
-
};
|
|
75
|
-
const boundingBox = useMemo(() => {
|
|
76
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
77
|
-
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
78
|
-
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
79
|
-
}
|
|
80
|
-
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
81
|
-
componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
|
|
82
|
-
var _a, _b, _c, _d;
|
|
83
|
-
const hasMappingKey = mappingKey && _[mappingKey];
|
|
84
|
-
let values = hasMappingKey ? _[mappingKey] : _;
|
|
85
|
-
if (!values)
|
|
86
|
-
return;
|
|
87
|
-
if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
|
|
88
|
-
minX = Math.min(minX, values.x);
|
|
89
|
-
minY = Math.min(minY, values.y);
|
|
90
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
91
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
92
|
-
}
|
|
93
|
-
if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
|
|
94
|
-
minX = Math.min(minX, values.x);
|
|
95
|
-
minY = Math.min(minY, values.y);
|
|
96
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
97
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
98
|
-
}
|
|
99
|
-
if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
|
|
100
|
-
minX = Math.min(minX, values.x);
|
|
101
|
-
minY = Math.min(minY, values.y);
|
|
102
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
103
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
104
|
-
}
|
|
105
|
-
if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
|
|
106
|
-
minX = Math.min(minX, values.x);
|
|
107
|
-
minY = Math.min(minY, values.y);
|
|
108
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
109
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
|
|
113
|
-
var _a, _b;
|
|
114
|
-
if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
|
|
115
|
-
minX = Math.min(minX, values.x);
|
|
116
|
-
minY = Math.min(minY, values.y);
|
|
117
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
118
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
119
|
-
}
|
|
120
|
-
if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
|
|
121
|
-
minX = Math.min(minX, values.x);
|
|
122
|
-
minY = Math.min(minY, values.y);
|
|
123
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
124
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
let backgroundHasOne = false;
|
|
128
|
-
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 &&
|
|
129
|
-
((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
|
|
130
|
-
backgroundHasOne = true;
|
|
131
|
-
minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
|
|
132
|
-
minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
|
|
133
|
-
maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
|
|
134
|
-
maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
|
|
135
|
-
}
|
|
136
|
-
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 && ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
|
|
137
|
-
minX = minX - minX * 0.5;
|
|
138
|
-
minY = minY - minY * 0.5;
|
|
139
|
-
}
|
|
140
|
-
return {
|
|
141
|
-
minX: backgroundHasOne ? minX : minX - minX * 0.5,
|
|
142
|
-
minY: backgroundHasOne ? minY : minY - minY * 0.5,
|
|
143
|
-
width: maxX,
|
|
144
|
-
height: maxY,
|
|
145
|
-
};
|
|
146
|
-
}, [componentsEditor, extraComponentsEditor]);
|
|
147
|
-
const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
|
|
148
|
-
return elementEditor === null || elementEditor === void 0 ? void 0 : elementEditor.map((editorItem, i) => {
|
|
149
|
-
var _a, _b, _c, _d;
|
|
150
|
-
const isUsingMapping = mappingKey &&
|
|
151
|
-
typeof editorItem[mappingKey] === "object" &&
|
|
152
|
-
editorItem[mappingKey] !== null;
|
|
153
|
-
const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
|
|
154
|
-
if (colorMatchKey) {
|
|
155
|
-
if (isUsingMapping) {
|
|
156
|
-
return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
|
|
157
|
-
}
|
|
158
|
-
else {
|
|
159
|
-
return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
return finalProps;
|
|
163
|
-
});
|
|
164
|
-
};
|
|
165
|
-
const [fingerCount, setFingerCount] = useState(0);
|
|
166
|
-
useEffect(() => {
|
|
167
|
-
const container = document.getElementById("workspace");
|
|
168
|
-
const handleTouchStart = (e) => {
|
|
169
|
-
const count = e.touches.length;
|
|
170
|
-
setFingerCount(count);
|
|
171
|
-
};
|
|
172
|
-
const handleTouchEnd = () => {
|
|
173
|
-
setFingerCount(0);
|
|
174
|
-
};
|
|
175
|
-
if (container) {
|
|
176
|
-
container.addEventListener("touchstart", handleTouchStart);
|
|
177
|
-
container.addEventListener("touchend", handleTouchEnd);
|
|
178
|
-
}
|
|
179
|
-
return () => {
|
|
180
|
-
if (container) {
|
|
181
|
-
container.removeEventListener("touchstart", handleTouchStart);
|
|
182
|
-
container.removeEventListener("touchend", handleTouchEnd);
|
|
183
|
-
}
|
|
184
|
-
};
|
|
185
|
-
}, []);
|
|
186
|
-
return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
|
|
187
|
-
height: "100vh",
|
|
188
|
-
overflow: "auto",
|
|
189
|
-
WebkitOverflowScrolling: "touch",
|
|
190
|
-
touchAction: "pan-y",
|
|
191
|
-
} }, props.containerProps, { children: _jsx(TransformWrapper, Object.assign({ ref: transformRef }, props.transformProps, { disabled: fingerCount === 1 && scale === 1, disablePadding: true,
|
|
192
|
-
// panning={{
|
|
193
|
-
// disabled: false,
|
|
194
|
-
// velocityDisabled: true,
|
|
195
|
-
// }}
|
|
196
|
-
// limitToBounds={false}
|
|
197
|
-
// doubleClick={{ disabled: true }}
|
|
198
|
-
// pinch={{ disabled: false }}
|
|
199
|
-
// wheel={{ disabled: true }}
|
|
200
|
-
// disabled={true}
|
|
201
|
-
// disablePadding={true}
|
|
202
|
-
centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1,
|
|
203
|
-
// pinch={{ step: 1 }}
|
|
204
|
-
smooth: true, children: _jsx(TransformComponent, { wrapperStyle: {
|
|
205
|
-
width: "100%",
|
|
206
|
-
height: "100%",
|
|
207
|
-
overflow: "visible",
|
|
208
|
-
}, contentStyle: {
|
|
209
|
-
width: "100%",
|
|
210
|
-
height: "100%",
|
|
211
|
-
}, children: _jsx("svg", Object.assign({}, props.svgProps, { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
|
|
212
|
-
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
213
|
-
display: "block",
|
|
214
|
-
pointerEvents: "auto",
|
|
215
|
-
// touchAction: "pan-y",
|
|
216
|
-
}, children: _jsx(Layers, { mode: "view", components: [
|
|
217
|
-
...((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) > 0 ? extraComponentsEditor : []),
|
|
218
|
-
...renderElements(componentsEditor, mappingKey, colorMatchKey),
|
|
219
|
-
], onClick: handleSelectComponent, selectedTable: selectedTable, selectedTableColor: selectedTableColor }) })) }) })) })));
|
|
220
|
-
};
|
|
221
|
-
export default LayerView;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect } from "react";
|
|
4
|
-
import { ConfigProvider } from "antd";
|
|
5
|
-
import { AntdRegistry } from "@ant-design/nextjs-registry";
|
|
6
|
-
import { useAppSelector, useAppDispatch } from "../hooks/use-redux";
|
|
7
|
-
export const AntdProvider = ({ children, themeColor }) => {
|
|
8
|
-
const dispatch = useAppDispatch();
|
|
9
|
-
const theme = useAppSelector((state) => state.theme);
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (themeColor !== theme.primaryColor) {
|
|
12
|
-
dispatch({
|
|
13
|
-
type: "theme/setPrimaryColor",
|
|
14
|
-
payload: themeColor
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
}, [themeColor]);
|
|
18
|
-
return (_jsx(AntdRegistry, { children: _jsx(ConfigProvider, { theme: {
|
|
19
|
-
token: {
|
|
20
|
-
colorPrimary: themeColor,
|
|
21
|
-
},
|
|
22
|
-
// token: {
|
|
23
|
-
// colorPrimary: theme.theme["--primary-color"],
|
|
24
|
-
// colorPrimaryBorderHover: theme.theme["--primary-color"],
|
|
25
|
-
// fontFamily: "var(--font-inter), sans-serif",
|
|
26
|
-
// colorError: theme.theme["--danger"],
|
|
27
|
-
// controlOutlineWidth: 4,
|
|
28
|
-
// controlOutline: theme.theme["--surface-color"],
|
|
29
|
-
// colorBgContainerDisabled: "var(--netral-03)",
|
|
30
|
-
// colorTextPlaceholder: "var(--netral-06)",
|
|
31
|
-
// },
|
|
32
|
-
components: {
|
|
33
|
-
Form: {
|
|
34
|
-
labelFontSize: 14,
|
|
35
|
-
fontWeightStrong: 500,
|
|
36
|
-
itemMarginBottom: 12,
|
|
37
|
-
},
|
|
38
|
-
Button: {
|
|
39
|
-
colorPrimary: themeColor
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
}, children: children }) }));
|
|
43
|
-
};
|