pds-dev-kit-web 2.2.77 → 2.2.79
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/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +1 -1
- package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +24 -4
- package/dist/src/sub/DynamicLayout/DynamicLayout.js +14 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +70 -57
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -52,7 +52,12 @@ function UserDesktopTabBar(_a) {
|
|
|
52
52
|
item.onClick(e);
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
-
return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) {
|
|
55
|
+
return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) {
|
|
56
|
+
if (styleTheme === 'content') {
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
|
|
58
|
+
}
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
|
|
60
|
+
}) })));
|
|
56
61
|
}
|
|
57
62
|
if (textArray) {
|
|
58
63
|
var handleClick_1 = function (value) {
|
|
@@ -75,7 +80,9 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
|
|
|
75
80
|
var styleTheme = _a.styleTheme;
|
|
76
81
|
switch (styleTheme) {
|
|
77
82
|
case 'main':
|
|
78
|
-
return mainStyle;
|
|
83
|
+
return mainStyle;
|
|
84
|
+
case 'content':
|
|
85
|
+
return contentStyle;
|
|
79
86
|
default:
|
|
80
87
|
return mainStyle;
|
|
81
88
|
}
|
|
@@ -99,7 +106,20 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
|
|
|
99
106
|
var isActive = _a.isActive;
|
|
100
107
|
return !isActive && "display: none;";
|
|
101
108
|
});
|
|
102
|
-
var
|
|
109
|
+
var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
|
|
110
|
+
var isActive = _a.isActive, theme = _a.theme;
|
|
111
|
+
return isActive && theme.ui_cpnt_tabbar_base_area;
|
|
112
|
+
}, function (_a) {
|
|
113
|
+
var theme = _a.theme;
|
|
114
|
+
return theme.spacing.spacingF;
|
|
115
|
+
}, function (_a) {
|
|
116
|
+
var theme = _a.theme;
|
|
117
|
+
return theme.ui_19;
|
|
118
|
+
}, function (_a) {
|
|
119
|
+
var isActive = _a.isActive;
|
|
120
|
+
return !isActive && "display: none;";
|
|
121
|
+
});
|
|
122
|
+
var S_TabBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
|
|
103
123
|
var theme = _a.theme;
|
|
104
124
|
return theme.ui_cpnt_tabbar_base_area;
|
|
105
125
|
}, function (_a) {
|
|
@@ -107,4 +127,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObje
|
|
|
107
127
|
return theme.ui_cpnt_divider;
|
|
108
128
|
});
|
|
109
129
|
exports.default = UserDesktopTabBar;
|
|
110
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
130
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -26,7 +26,20 @@ var SectionMatcher_1 = require("./components/SectionMatcher");
|
|
|
26
26
|
var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
|
|
27
27
|
function DynamicLayout(_a) {
|
|
28
28
|
var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
|
|
29
|
-
var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
|
|
29
|
+
var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
|
|
30
|
+
var _a;
|
|
31
|
+
if (!section.display) {
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
if (section.type === 'CUSTOM' && mode !== 'EDIT') {
|
|
35
|
+
var deviceKey = device === 'DESKTOP'
|
|
36
|
+
? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
|
|
37
|
+
: 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
|
|
38
|
+
var isVisible = (_a = section.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_VISIBILITY[deviceKey];
|
|
39
|
+
return isVisible;
|
|
40
|
+
}
|
|
41
|
+
return true;
|
|
42
|
+
})
|
|
30
43
|
.sort(function (a, b) { return a.order - b.order; });
|
|
31
44
|
var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
|
|
32
45
|
return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
|
|
@@ -60,6 +60,7 @@ var deepCopy_1 = __importDefault(require("../../../DynamicLayout/utils/deepCopy"
|
|
|
60
60
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
61
61
|
var components_1 = require("../../components");
|
|
62
62
|
var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
|
|
63
|
+
var S_HiddenCover_1 = require("./components/ComponentBlock/componentBlocks/components/S_HiddenCover");
|
|
63
64
|
var useGroupDrag_1 = require("./hooks/useGroupDrag");
|
|
64
65
|
var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
|
|
65
66
|
var utils_1 = require("./hooks/useGroupDrag/utils");
|
|
@@ -403,63 +404,75 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
|
|
|
403
404
|
}
|
|
404
405
|
makeCollisionOfBulk();
|
|
405
406
|
};
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
407
|
+
var showSectionHiddenCover = (function () {
|
|
408
|
+
if (mode === 'EDIT') {
|
|
409
|
+
var visibilityKey = device === 'DESKTOP'
|
|
410
|
+
? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
|
|
411
|
+
: 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
|
|
412
|
+
var isSectionVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
|
|
413
|
+
// 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
|
|
414
|
+
var shouldShowHiddenCover = !isSectionVisible;
|
|
415
|
+
return shouldShowHiddenCover;
|
|
416
|
+
}
|
|
417
|
+
return false;
|
|
418
|
+
})();
|
|
419
|
+
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(S_gleStyles, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
|
|
420
|
+
minHeight: customSectionStyles.minHeight,
|
|
421
|
+
paddingTop: padding.top,
|
|
422
|
+
paddingBottom: padding.bottom,
|
|
423
|
+
paddingRight: padding.right,
|
|
424
|
+
paddingLeft: padding.left
|
|
425
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ innerRef: innerRef, allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
|
|
426
|
+
width: customSectionStyles.width,
|
|
427
|
+
maxWidth: customSectionStyles.maxWidth,
|
|
428
|
+
minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
|
|
429
|
+
fontSize: "".concat(baseFontSize, "px")
|
|
430
|
+
}, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
|
|
431
|
+
var _a;
|
|
432
|
+
if (each === null) {
|
|
433
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
434
|
+
}
|
|
435
|
+
var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
|
|
436
|
+
if (each.i === 'group' && each.groupLayouts) {
|
|
437
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup", onClick: function (e) {
|
|
438
|
+
e.stopPropagation();
|
|
439
|
+
onClickBulk();
|
|
440
|
+
}, onContextMenu: function (e) {
|
|
441
|
+
e.stopPropagation();
|
|
442
|
+
e.preventDefault();
|
|
443
|
+
onContextMenuCB('group', e);
|
|
444
|
+
} }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
|
|
445
|
+
width: '100%'
|
|
446
|
+
} }, { children: (_a = each.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (layoutItem, index, array) {
|
|
447
|
+
var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === layoutItem.i; });
|
|
448
|
+
if (!matchedCB) {
|
|
449
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
450
|
+
}
|
|
451
|
+
var cbCopy = (0, deepCopy_1.default)(matchedCB);
|
|
452
|
+
cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE =
|
|
453
|
+
'NONE';
|
|
454
|
+
cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] = 'NONE';
|
|
455
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
|
|
456
|
+
e.stopPropagation();
|
|
457
|
+
clickOneCBInBulk(matchedCB.id, array);
|
|
458
|
+
} }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
|
|
459
|
+
}) })) }), each.i));
|
|
460
|
+
}
|
|
461
|
+
if (!matchedCB) {
|
|
462
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
463
|
+
}
|
|
464
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === matchedCB.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
465
|
+
width: '100%',
|
|
466
|
+
height: '100%'
|
|
467
|
+
}, onClick: function (e) {
|
|
468
|
+
e.stopPropagation();
|
|
469
|
+
onClickCB(matchedCB.id);
|
|
470
|
+
}, onContextMenu: function (e) {
|
|
471
|
+
e.stopPropagation();
|
|
472
|
+
e.preventDefault();
|
|
473
|
+
onContextMenuCB(matchedCB.id, e);
|
|
474
|
+
} }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, index: index }) }) })) }), each.i));
|
|
475
|
+
}) })) })) }))] }) }));
|
|
463
476
|
});
|
|
464
477
|
function keepSimilarOrderToPreventRerender(arr) {
|
|
465
478
|
var _a;
|
package/package.json
CHANGED
package/release-note.md
CHANGED