pds-dev-kit-web-test 2.7.4 → 2.7.5
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,6 +9,7 @@ type Props = {
|
|
|
9
9
|
zIndex: number;
|
|
10
10
|
showPinned?: boolean;
|
|
11
11
|
style?: React.CSSProperties;
|
|
12
|
+
isParentGroupPinned: boolean;
|
|
12
13
|
};
|
|
13
|
-
declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
|
|
14
|
+
declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style, isParentGroupPinned }: Props): JSX.Element;
|
|
14
15
|
export default FlexGridItem;
|
|
@@ -24,12 +24,13 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
24
24
|
var ComponentBlockMatcherWithCCB_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcherWithCCB"));
|
|
25
25
|
var gap = 10;
|
|
26
26
|
function FlexGridItem(_a) {
|
|
27
|
-
var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style;
|
|
27
|
+
var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style, isParentGroupPinned = _a.isParentGroupPinned;
|
|
28
28
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
29
29
|
var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
|
|
30
30
|
var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
|
|
31
|
-
var _b = (0, react_1.useState)(false),
|
|
32
|
-
|
|
31
|
+
var _b = (0, react_1.useState)(false), isCBPinned = _b[0], setIsCBPinned = _b[1];
|
|
32
|
+
var isPinned = isParentGroupPinned || isCBPinned;
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isPinned ? defaultHeight : 'none' }, style) }, { children: [showPinned && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isCBPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", disabled: isParentGroupPinned, onClick: function () { return setIsCBPinned(false); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: isParentGroupPinned, type: "button", onClick: function () { return setIsCBPinned(true); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)(ComponentBlockMatcherWithCCB_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index })] })));
|
|
33
34
|
}
|
|
34
35
|
var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 9999999;\n"], ["\n pointer-events: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 9999999;\n"])));
|
|
35
36
|
var GridItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n word-break: break-word;\n"], ["\n height: auto;\n word-break: break-word;\n"])));
|
|
@@ -213,7 +213,8 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
|
|
|
213
213
|
var handleGroupBlockDoubleClick = function (blockId) {
|
|
214
214
|
setEditingGroupBlock(blockId);
|
|
215
215
|
};
|
|
216
|
-
|
|
216
|
+
var _k = (0, react_1.useState)([]), pinnedGBs = _k[0], setPinnedGBs = _k[1];
|
|
217
|
+
var pinnedChildrens = pinnedGBs.map(function (gbId) { return (0, group_1.findAllChildrenCbIds)(pedigree, gbId); }).flat();
|
|
217
218
|
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
|
|
218
219
|
device: device,
|
|
219
220
|
mode: mode,
|
|
@@ -264,13 +265,20 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
|
|
|
264
265
|
var _a;
|
|
265
266
|
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0, style: editableCBIds.includes(cb.id)
|
|
266
267
|
? { pointerEvents: 'none', boxShadow: '0 0 0 3px #e602ff' }
|
|
267
|
-
: { pointerEvents: 'none', opacity: 0.3 }, showPinned: editableCBIds.includes(cb.id) }) }, cb.id));
|
|
268
|
+
: { pointerEvents: 'none', opacity: 0.3 }, showPinned: editableCBIds.includes(cb.id), isParentGroupPinned: pinnedChildrens.includes(cb.id) }) }, cb.id));
|
|
268
269
|
}), groupblocks.map(function (groupblock, gIdx) {
|
|
269
|
-
return ((0, jsx_runtime_1.jsx)(GroupBlockRender, {
|
|
270
|
+
return ((0, jsx_runtime_1.jsx)(GroupBlockRender, { isPinned: pinnedGBs.includes(groupblock.blockId), onTogglePinned: function () {
|
|
271
|
+
setPinnedGBs(function (prev) {
|
|
272
|
+
if (prev.includes(groupblock.blockId)) {
|
|
273
|
+
return prev.filter(function (id) { return id !== groupblock.blockId; });
|
|
274
|
+
}
|
|
275
|
+
return __spreadArray(__spreadArray([], prev, true), [groupblock.blockId], false);
|
|
276
|
+
});
|
|
277
|
+
}, block: groupblock, layouts: layouts, pedigree: pedigree, isEditing: editingGroupBlock === groupblock.blockId, onDoubleClick: function () { return handleGroupBlockDoubleClick(groupblock.blockId); }, onDoubleClickOutside: function () { return setEditingGroupBlock('ROOT'); } }, groupblock.blockId));
|
|
270
278
|
})] })) })) })) }) })) }));
|
|
271
279
|
});
|
|
272
280
|
function GroupBlockRender(_a) {
|
|
273
|
-
var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, isEditing = _a.isEditing, onDoubleClick = _a.onDoubleClick, onDoubleClickOutside = _a.onDoubleClickOutside;
|
|
281
|
+
var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, isEditing = _a.isEditing, isPinned = _a.isPinned, onTogglePinned = _a.onTogglePinned, onDoubleClick = _a.onDoubleClick, onDoubleClickOutside = _a.onDoubleClickOutside;
|
|
274
282
|
var childrenIds = (0, group_1.findAllChildrenCbIds)(pedigree, block.blockId).map(function (i) { return i.toString(); });
|
|
275
283
|
var bounding = (0, renderHelpers_1.getBoundingArea)(layouts.lg, childrenIds);
|
|
276
284
|
(0, react_1.useEffect)(function () {
|
|
@@ -296,20 +304,21 @@ function GroupBlockRender(_a) {
|
|
|
296
304
|
cols: bounding.w,
|
|
297
305
|
rows: bounding.h
|
|
298
306
|
});
|
|
299
|
-
return ((0, jsx_runtime_1.
|
|
307
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
|
300
308
|
gridArea: gridArea,
|
|
301
309
|
position: 'relative',
|
|
302
310
|
width: '100%',
|
|
303
311
|
height: '100%'
|
|
304
|
-
}, onDoubleClick: onDoubleClick }, { children: (0, jsx_runtime_1.jsx)("div", { className: "group", style: {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
+
}, onDoubleClick: onDoubleClick }, { children: [!isEditing && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: onTogglePinned }, { children: "(\uADF8\uB8F9)H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: onTogglePinned }, { children: "(\uADF8\uB8F9)H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)("div", { className: "group", style: {
|
|
313
|
+
position: 'absolute',
|
|
314
|
+
top: 0,
|
|
315
|
+
left: 0,
|
|
316
|
+
right: 0,
|
|
317
|
+
bottom: 0,
|
|
318
|
+
boxShadow: '0 0 0 3px #e602ff'
|
|
319
|
+
} })] })));
|
|
312
320
|
}
|
|
321
|
+
var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 9999999;\n"], ["\n pointer-events: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 9999999;\n"])));
|
|
313
322
|
function getGridAreaFromGroup(position) {
|
|
314
323
|
var x = position.x, y = position.y, cols = position.cols, rows = position.rows;
|
|
315
324
|
var colStart = clamp(x + 1, 1, Math.max(1, 25 - cols));
|
|
@@ -330,7 +339,7 @@ function getGridAreaFromGroup(position) {
|
|
|
330
339
|
function clamp(num, min, max) {
|
|
331
340
|
return Math.max(Math.min(num, max), min);
|
|
332
341
|
}
|
|
333
|
-
var GridContainer = styled_components_1.default.div(
|
|
342
|
+
var GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid; /* Space between grid items */\n gap: 10px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n\n grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n padding: 10px 10px;\n\n * {\n box-sizing: border-box;\n }\n\n .bg-grid-item {\n transition: background-color 0.2s ease;\n }\n\n /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n .bg-grid-row:not(.selected):hover > .bg-grid-item {\n background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n }\n\n /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n .bg-grid-row.selected > .bg-grid-item {\n background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n }\n\n /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n .bg-grid-row.selected:hover > .bg-grid-item {\n background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n }\n"], ["\n display: grid; /* Space between grid items */\n gap: 10px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n\n grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n padding: 10px 10px;\n\n * {\n box-sizing: border-box;\n }\n\n .bg-grid-item {\n transition: background-color 0.2s ease;\n }\n\n /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n .bg-grid-row:not(.selected):hover > .bg-grid-item {\n background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n }\n\n /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n .bg-grid-row.selected > .bg-grid-item {\n background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n }\n\n /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n .bg-grid-row.selected:hover > .bg-grid-item {\n background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
|
|
334
343
|
// 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
|
|
335
344
|
return Array.from({ length: props.sectionRow })
|
|
336
345
|
.map(function (_, index) {
|
|
@@ -342,7 +351,7 @@ var GridContainer = styled_components_1.default.div(templateObject_1 || (templat
|
|
|
342
351
|
)
|
|
343
352
|
.join(' ');
|
|
344
353
|
});
|
|
345
|
-
var S_SectionWrapper = styled_components_1.default.div(
|
|
354
|
+
var S_SectionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
346
355
|
exports.default = react_1.default.memo(GridAutoRowEditor);
|
|
347
356
|
function getDefensiveFontSize(device, width) {
|
|
348
357
|
if (device === 'MOBILE') {
|
|
@@ -350,4 +359,4 @@ function getDefensiveFontSize(device, width) {
|
|
|
350
359
|
}
|
|
351
360
|
return width * (0.0000246 * width - 0.01618);
|
|
352
361
|
}
|
|
353
|
-
var templateObject_1, templateObject_2;
|
|
362
|
+
var templateObject_1, templateObject_2, templateObject_3;
|