pds-dev-kit-web-test 2.7.482 → 2.7.483
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/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +2 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +2 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts +3 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js +35 -57
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +2 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +2 -2
- package/dist/src/desktop/layout/LayoutWT/LayoutWT.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js +3 -0
- package/package.json +1 -1
- package/release-note.md +2 -2
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export type ContentsContainerProps = {
|
|
|
14
14
|
overrideContainer2ColorKey?: UiColors;
|
|
15
15
|
overrideContainer3ColorKey?: UiColors;
|
|
16
16
|
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
17
|
+
showDivider?: boolean;
|
|
17
18
|
};
|
|
18
|
-
declare const ContentsContainer: ({ content1, content2, content3, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref }: ContentsContainerProps) => JSX.Element;
|
|
19
|
+
declare const ContentsContainer: ({ content1, content2, content3, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref, showDivider }: ContentsContainerProps) => JSX.Element;
|
|
19
20
|
export default ContentsContainer;
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
var variation_1 = require("./variation");
|
|
5
5
|
var ContentsContainer = function (_a) {
|
|
6
|
-
var content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref;
|
|
6
|
+
var content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref, showDivider = _a.showDivider;
|
|
7
7
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
|
|
8
8
|
WTA_1: ((0, jsx_runtime_1.jsx)(variation_1.WTA, { layoutType: "WTA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
|
|
9
9
|
WTA_2: ((0, jsx_runtime_1.jsx)(variation_1.WTA, { layoutType: "WTA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
|
|
@@ -50,7 +50,7 @@ var ContentsContainer = function (_a) {
|
|
|
50
50
|
WTT_1: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
|
|
51
51
|
WTT_2: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
|
|
52
52
|
WTU_1: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
|
|
53
|
-
WTU_2: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
|
|
53
|
+
WTU_2: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, showDivider: showDivider })),
|
|
54
54
|
WTV_1: ((0, jsx_runtime_1.jsx)(variation_1.WTV, { layoutType: "WTV_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
|
|
55
55
|
WTW_1: ((0, jsx_runtime_1.jsx)(variation_1.WTW, { layoutType: "WTW_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
|
|
56
56
|
WTX_1: ((0, jsx_runtime_1.jsx)(variation_1.WTX, { layoutType: "WTX_1", content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey }))
|
|
@@ -10,9 +10,10 @@ export type WTUProps = {
|
|
|
10
10
|
isLoadingContainer2?: boolean;
|
|
11
11
|
overrideContainer1ColorKey?: UiColors;
|
|
12
12
|
overrideContainer2ColorKey?: UiColors;
|
|
13
|
+
showDivider?: boolean;
|
|
13
14
|
};
|
|
14
15
|
export type StyleProps = {
|
|
15
|
-
$
|
|
16
|
+
$contentsAreaWidth?: number;
|
|
16
17
|
};
|
|
17
|
-
declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: WTUProps) => JSX.Element;
|
|
18
|
+
declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey, showDivider }: WTUProps) => JSX.Element;
|
|
18
19
|
export default WTU;
|
|
@@ -43,28 +43,30 @@ var react_1 = require("react");
|
|
|
43
43
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
44
|
var components_1 = require("../../../../../../common/components");
|
|
45
45
|
var WTU = function (_a) {
|
|
46
|
-
var _b, _c;
|
|
47
|
-
var
|
|
46
|
+
var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTU_1' : _b, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, _c = _a.showDivider, showDivider = _c === void 0 ? true : _c;
|
|
47
|
+
var contentsArea1Ref = (0, react_1.useRef)(null);
|
|
48
48
|
var contentsArea2Ref = (0, react_1.useRef)(null);
|
|
49
|
-
var
|
|
50
|
-
var handleResize = function () {
|
|
51
|
-
if (contentsArea2Ref === null || contentsArea2Ref.current === null) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
setContentsArea2Width(contentsArea2Ref.current.offsetWidth);
|
|
55
|
-
};
|
|
49
|
+
var _d = (0, react_1.useState)(720), contentsAreaWidth = _d[0], setContentsAreaWidth = _d[1];
|
|
56
50
|
/**
|
|
57
51
|
@when : 브라우저 화면 사이즈가 변경될 때
|
|
58
|
-
@expected :
|
|
52
|
+
@expected : 레이아웃 타입에 따라 적절한 ContentsArea의 너비를 contentsAreaWidth에 저장합니다.
|
|
59
53
|
@clear : 이벤트 등록을 해제합니다.
|
|
60
54
|
*/
|
|
61
55
|
(0, react_1.useEffect)(function () {
|
|
56
|
+
handleResize();
|
|
62
57
|
window.addEventListener('resize', handleResize);
|
|
63
58
|
return function () {
|
|
64
59
|
window.removeEventListener('resize', handleResize);
|
|
65
60
|
};
|
|
66
|
-
}, []);
|
|
67
|
-
|
|
61
|
+
}, [layoutType]);
|
|
62
|
+
var handleResize = function () {
|
|
63
|
+
var targetRef = layoutType === 'WTU_1' ? contentsArea2Ref : contentsArea1Ref;
|
|
64
|
+
if (targetRef === null || targetRef.current === null) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
setContentsAreaWidth(targetRef.current.offsetWidth);
|
|
68
|
+
};
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, "$contentsAreaWidth": contentsAreaWidth }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, areaColor: areaColor, ref: contentsArea1Ref }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey, showDivider: showDivider, "$contentsAreaWidth": contentsAreaWidth }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType }, { children: content2 })) }))) }))] }));
|
|
68
70
|
};
|
|
69
71
|
var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
70
72
|
var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
|
|
@@ -75,60 +77,36 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
|
|
|
75
77
|
return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
|
|
76
78
|
});
|
|
77
79
|
var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
78
|
-
var
|
|
79
|
-
var $contentsArea2Width = _a.$contentsArea2Width;
|
|
80
|
-
return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
|
|
81
|
-
});
|
|
82
|
-
var WTU_2Container1Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
83
|
-
var $contentsArea2Width = _a.$contentsArea2Width;
|
|
84
|
-
return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
|
|
85
|
-
});
|
|
86
|
-
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
80
|
+
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
87
81
|
var theme = _a.theme;
|
|
88
82
|
return theme.ui_contentscontainer01_background;
|
|
89
83
|
}, function (_a) {
|
|
90
|
-
var $
|
|
91
|
-
return
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
return ({
|
|
95
|
-
WTU_1: WTU_1Container1Style,
|
|
96
|
-
WTU_2: WTU_2Container1Style
|
|
97
|
-
}[layoutType]);
|
|
84
|
+
var layoutType = _a.layoutType, $contentsAreaWidth = _a.$contentsAreaWidth;
|
|
85
|
+
return layoutType === 'WTU_1'
|
|
86
|
+
? "calc(50% - (".concat($contentsAreaWidth, "px - 480px) / 2)")
|
|
87
|
+
: "calc(50% + (".concat($contentsAreaWidth, "px - 480px) / 2)");
|
|
98
88
|
}, function (_a) {
|
|
99
89
|
var containerColor = _a.containerColor;
|
|
100
90
|
return "background-color: ".concat(containerColor);
|
|
101
91
|
}, overrideStyleContainer1);
|
|
102
|
-
var
|
|
103
|
-
var $contentsArea2Width = _a.$contentsArea2Width;
|
|
104
|
-
return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
|
|
105
|
-
});
|
|
106
|
-
var WTU_2Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
107
|
-
var $contentsArea2Width = _a.$contentsArea2Width;
|
|
108
|
-
return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
|
|
109
|
-
});
|
|
110
|
-
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
92
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: ", ";\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: ", ";\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", "\n"])), function (_a) {
|
|
111
93
|
var theme = _a.theme;
|
|
112
94
|
return theme.ui_contentscontainer02_background;
|
|
113
95
|
}, function (_a) {
|
|
114
|
-
var theme = _a.theme;
|
|
115
|
-
return theme.ui_container_divider;
|
|
116
|
-
}, function (_a) {
|
|
117
|
-
var $contentsArea2Width = _a.$contentsArea2Width;
|
|
118
|
-
return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
|
|
96
|
+
var showDivider = _a.showDivider, theme = _a.theme;
|
|
97
|
+
return showDivider ? "1px solid ".concat(theme.ui_container_divider) : 'none';
|
|
119
98
|
}, function (_a) {
|
|
120
|
-
var layoutType = _a.layoutType;
|
|
121
|
-
return
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}[layoutType]);
|
|
99
|
+
var layoutType = _a.layoutType, $contentsAreaWidth = _a.$contentsAreaWidth;
|
|
100
|
+
return layoutType === 'WTU_1'
|
|
101
|
+
? "calc(50% + (".concat($contentsAreaWidth, "px - 480px) / 2)")
|
|
102
|
+
: "calc(50% - (".concat($contentsAreaWidth, "px - 480px) / 2)");
|
|
125
103
|
}, function (_a) {
|
|
126
104
|
var containerColor = _a.containerColor;
|
|
127
105
|
return "background-color: ".concat(containerColor);
|
|
128
106
|
}, overrideStyleContainer2);
|
|
129
|
-
var WTU_1ContentsArea1 = (0, styled_components_1.css)(
|
|
130
|
-
var WTU_2ContentsArea1 = (0, styled_components_1.css)(
|
|
131
|
-
var S_ContentsArea1 = styled_components_1.default.div(
|
|
107
|
+
var WTU_1ContentsArea1 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
|
|
108
|
+
var WTU_2ContentsArea1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
|
|
109
|
+
var S_ContentsArea1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
132
110
|
var layoutType = _a.layoutType;
|
|
133
111
|
return ({
|
|
134
112
|
WTU_1: WTU_1ContentsArea1,
|
|
@@ -138,9 +116,9 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_12 || (temp
|
|
|
138
116
|
var areaColor = _a.areaColor;
|
|
139
117
|
return "background-color: ".concat(areaColor);
|
|
140
118
|
});
|
|
141
|
-
var WTU_1ContentsArea2 = (0, styled_components_1.css)(
|
|
142
|
-
var WTU_2ContentsArea2 = (0, styled_components_1.css)(
|
|
143
|
-
var S_ContentsArea2 = styled_components_1.default.div(
|
|
119
|
+
var WTU_1ContentsArea2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
|
|
120
|
+
var WTU_2ContentsArea2 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
|
|
121
|
+
var S_ContentsArea2 = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
144
122
|
var layoutType = _a.layoutType;
|
|
145
123
|
return ({
|
|
146
124
|
WTU_1: WTU_1ContentsArea2,
|
|
@@ -150,7 +128,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_15 || (temp
|
|
|
150
128
|
var areaColor = _a.areaColor;
|
|
151
129
|
return "background-color: ".concat(areaColor);
|
|
152
130
|
});
|
|
153
|
-
var S_Content1 = styled_components_1.default.div(
|
|
154
|
-
var S_Content2 = styled_components_1.default.div(
|
|
131
|
+
var S_Content1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
|
132
|
+
var S_Content2 = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
|
155
133
|
exports.default = WTU;
|
|
156
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13
|
|
134
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
@@ -18,6 +18,7 @@ export type ContainersBoxProps = {
|
|
|
18
18
|
overrideContainer2ColorKey?: UiColors;
|
|
19
19
|
overrideContainer3ColorKey?: UiColors;
|
|
20
20
|
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
21
|
+
showDivider?: boolean;
|
|
21
22
|
};
|
|
22
|
-
declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, content3, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref }: ContainersBoxProps) => JSX.Element;
|
|
23
|
+
declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, content3, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref, showDivider }: ContainersBoxProps) => JSX.Element;
|
|
23
24
|
export default ContainersBox;
|
|
@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
42
42
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
43
|
var Containers_1 = require("../Containers");
|
|
44
44
|
var ContainersBox = function (_a) {
|
|
45
|
-
var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref;
|
|
45
|
+
var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref, showDivider = _a.showDivider;
|
|
46
46
|
return ((0, jsx_runtime_1.jsxs)(S_ContainersBox, { children: [{
|
|
47
47
|
WTA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
48
48
|
WTA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
@@ -243,7 +243,7 @@ var ContainersBox = function (_a) {
|
|
|
243
243
|
WTV_1: '',
|
|
244
244
|
WTW_1: '',
|
|
245
245
|
WTX_1: ''
|
|
246
|
-
}[layoutType], (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey, container1Ref: container1Ref })] }))] })] }));
|
|
246
|
+
}[layoutType], (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey, container1Ref: container1Ref, showDivider: showDivider })] }))] })] }));
|
|
247
247
|
};
|
|
248
248
|
var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n height: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n height: 100%;\n"])));
|
|
249
249
|
var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"])));
|
|
@@ -22,6 +22,7 @@ var Image_1 = __importDefault(require("../sections/CustomSection/components/Comp
|
|
|
22
22
|
var RichText_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/RichText");
|
|
23
23
|
var Text_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text"));
|
|
24
24
|
var Twitter_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter"));
|
|
25
|
+
var VideoPlayer_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer");
|
|
25
26
|
var Youtube_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube");
|
|
26
27
|
var newUtils_1 = require("../sections/CustomSection/newUtils");
|
|
27
28
|
var types_1 = require("../sections/CustomSection/types");
|
|
@@ -46,6 +47,8 @@ function ComponentBlockMatcher(_a) {
|
|
|
46
47
|
return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
|
|
47
48
|
case types_1.CB_ALL_CODES.CB_EMBED:
|
|
48
49
|
return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
|
|
50
|
+
case types_1.CB_ALL_CODES.CB_VIDEOPLAYER:
|
|
51
|
+
return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, __assign({}, propsWithValue, { index: index }));
|
|
49
52
|
case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
|
|
50
53
|
return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
|
|
51
54
|
}
|
package/package.json
CHANGED