pds-dev-kit-web-test 0.3.3 → 0.3.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.
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +5 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +4 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTX.d.ts +21 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTX.js +131 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTY.d.ts +18 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTY.js +109 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/index.d.ts +2 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/index.js +5 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +5 -2
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +15 -7
- package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +1 -3
- package/package.json +1 -1
- package/release-note.md +4 -6
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts
CHANGED
|
@@ -3,14 +3,17 @@ import type { MutableRefObject } from 'react';
|
|
|
3
3
|
export type ContentsContainerProps = {
|
|
4
4
|
content1?: JSX.Element;
|
|
5
5
|
content2?: JSX.Element;
|
|
6
|
-
|
|
6
|
+
content3?: JSX.Element;
|
|
7
|
+
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1' | 'WTY_1';
|
|
7
8
|
containerColor?: string;
|
|
8
9
|
areaColor?: string;
|
|
9
10
|
isLoadingContainer1?: boolean;
|
|
10
11
|
isLoadingContainer2?: boolean;
|
|
12
|
+
isLoadingContainer3?: boolean;
|
|
11
13
|
overrideContainer1ColorKey?: UiColors;
|
|
12
14
|
overrideContainer2ColorKey?: UiColors;
|
|
15
|
+
overrideContainer3ColorKey?: UiColors;
|
|
13
16
|
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
14
17
|
};
|
|
15
|
-
declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey, container1Ref }: ContentsContainerProps) => JSX.Element;
|
|
18
|
+
declare const ContentsContainer: ({ content1, content2, content3, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref }: ContentsContainerProps) => JSX.Element;
|
|
16
19
|
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, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, 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;
|
|
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 })),
|
|
@@ -51,7 +51,9 @@ var ContentsContainer = function (_a) {
|
|
|
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
53
|
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 })),
|
|
54
|
-
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 }))
|
|
54
|
+
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 })),
|
|
55
|
+
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 })),
|
|
56
|
+
WTY_1: ((0, jsx_runtime_1.jsx)(variation_1.WTY, { layoutType: "WTY_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }))
|
|
55
57
|
}[layoutType] }));
|
|
56
58
|
};
|
|
57
59
|
exports.default = ContentsContainer;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { UiColors } from '../../../../../../common';
|
|
3
|
+
export type WTXProps = {
|
|
4
|
+
content1?: JSX.Element;
|
|
5
|
+
content2?: JSX.Element;
|
|
6
|
+
content3?: JSX.Element;
|
|
7
|
+
layoutType?: 'WTX_1';
|
|
8
|
+
containerColor?: string;
|
|
9
|
+
areaColor?: string;
|
|
10
|
+
isLoadingContainer1?: boolean;
|
|
11
|
+
isLoadingContainer2?: boolean;
|
|
12
|
+
isLoadingContainer3?: boolean;
|
|
13
|
+
overrideContainer1ColorKey?: UiColors;
|
|
14
|
+
overrideContainer2ColorKey?: UiColors;
|
|
15
|
+
overrideContainer3ColorKey?: UiColors;
|
|
16
|
+
};
|
|
17
|
+
export type StyleProps = {
|
|
18
|
+
$contentsArea3Width?: number;
|
|
19
|
+
};
|
|
20
|
+
declare const WTX: ({ content1, content2, content3, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey }: WTXProps) => JSX.Element;
|
|
21
|
+
export default WTX;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
|
+
var react_1 = require("react");
|
|
43
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
|
+
var components_1 = require("../../../../../../common/components");
|
|
45
|
+
var WTX = function (_a) {
|
|
46
|
+
var _b, _c;
|
|
47
|
+
var content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTX_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey;
|
|
48
|
+
var contentsArea3Ref = (0, react_1.useRef)(null);
|
|
49
|
+
var _e = (0, react_1.useState)((_c = (_b = contentsArea3Ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 720), contentsArea3Width = _e[0], setContentsArea3Width = _e[1];
|
|
50
|
+
var handleResize = function () {
|
|
51
|
+
if (contentsArea3Ref === null || contentsArea3Ref.current === null) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
setContentsArea3Width(contentsArea3Ref.current.offsetWidth);
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
@when : 브라우저 화면 사이즈가 변경될 때
|
|
58
|
+
@expected : contentsArea2의 너비를 contentsArea3Width에 저장합니다.
|
|
59
|
+
@clear : 이벤트 등록을 해제합니다.
|
|
60
|
+
*/
|
|
61
|
+
(0, react_1.useEffect)(function () {
|
|
62
|
+
window.addEventListener('resize', handleResize);
|
|
63
|
+
return function () {
|
|
64
|
+
window.removeEventListener('resize', handleResize);
|
|
65
|
+
};
|
|
66
|
+
}, []);
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((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": "WTX", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, "$contentsArea3Width": contentsArea3Width }, { children: (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": "WTX", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTX", 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": "WTX", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey, "$contentsArea3Width": contentsArea3Width }, { 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": "WTX", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTX", layoutType: layoutType }, { children: content2 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer3, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTX", layoutType: layoutType, containerColor: containerColor, overrideContainer3ColorKey: overrideContainer3ColorKey, "$contentsArea3Width": contentsArea3Width }, { children: isLoadingContainer3 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea3, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTX", layoutType: layoutType, areaColor: areaColor, ref: contentsArea3Ref }, { children: (0, jsx_runtime_1.jsx)(S_content3, __assign({ "x-pds-name": "content3", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTX", layoutType: layoutType }, { children: content3 })) }))) }))] }));
|
|
68
|
+
};
|
|
69
|
+
var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
70
|
+
var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
|
|
71
|
+
return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
|
|
72
|
+
});
|
|
73
|
+
var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
74
|
+
var theme = _a.theme, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
|
|
75
|
+
return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
|
|
76
|
+
});
|
|
77
|
+
var overrideStyleContainer3 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
78
|
+
var theme = _a.theme, overrideContainer3ColorKey = _a.overrideContainer3ColorKey;
|
|
79
|
+
return overrideContainer3ColorKey && theme[overrideContainer3ColorKey];
|
|
80
|
+
});
|
|
81
|
+
var S_Box = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
82
|
+
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n /* height: 100%; */\n display: flex;\n justify-content: flex-end;\n min-width: 240px;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n /* height: 100%; */\n display: flex;\n justify-content: flex-end;\n min-width: 240px;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", "\n"])), function (_a) {
|
|
83
|
+
var theme = _a.theme;
|
|
84
|
+
return theme.ui_contentscontainer01_background;
|
|
85
|
+
}, function (_a) {
|
|
86
|
+
var $contentsArea3Width = _a.$contentsArea3Width;
|
|
87
|
+
return "calc(50% - 240px - (".concat($contentsArea3Width, "px - 240px) / 2)");
|
|
88
|
+
}, function (_a) {
|
|
89
|
+
var containerColor = _a.containerColor;
|
|
90
|
+
return "background-color: ".concat(containerColor);
|
|
91
|
+
}, overrideStyleContainer1);
|
|
92
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n border-left: 1px solid ", ";\n display: flex;\n height: 100%;\n justify-content: flex-end;\n width: 480px;\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n border-left: 1px solid ", ";\n display: flex;\n height: 100%;\n justify-content: flex-end;\n width: 480px;\n ", ";\n\n ", "\n"])), function (_a) {
|
|
93
|
+
var theme = _a.theme;
|
|
94
|
+
return theme.ui_contentscontainer01_background;
|
|
95
|
+
}, function (_a) {
|
|
96
|
+
var theme = _a.theme;
|
|
97
|
+
return theme.ui_container_divider;
|
|
98
|
+
}, function (_a) {
|
|
99
|
+
var containerColor = _a.containerColor;
|
|
100
|
+
return "background-color: ".concat(containerColor);
|
|
101
|
+
}, overrideStyleContainer2);
|
|
102
|
+
var S_ContentsContainer3 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
103
|
+
var theme = _a.theme;
|
|
104
|
+
return theme.ui_contentscontainer02_background;
|
|
105
|
+
}, function (_a) {
|
|
106
|
+
var theme = _a.theme;
|
|
107
|
+
return theme.ui_container_divider;
|
|
108
|
+
}, function (_a) {
|
|
109
|
+
var $contentsArea3Width = _a.$contentsArea3Width;
|
|
110
|
+
return "calc(50% - 240px + (".concat($contentsArea3Width, "px - 240px) / 2)");
|
|
111
|
+
}, function (_a) {
|
|
112
|
+
var containerColor = _a.containerColor;
|
|
113
|
+
return "background-color: ".concat(containerColor);
|
|
114
|
+
}, overrideStyleContainer3);
|
|
115
|
+
var S_ContentsArea1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n max-width: 240px;\n padding-bottom: 88px;\n width: 240px;\n\n ", ";\n"], ["\n max-width: 240px;\n padding-bottom: 88px;\n width: 240px;\n\n ", ";\n"])), function (_a) {
|
|
116
|
+
var areaColor = _a.areaColor;
|
|
117
|
+
return "background-color: ".concat(areaColor);
|
|
118
|
+
});
|
|
119
|
+
var S_ContentsArea2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n max-width: 480px;\n padding-left: 24px;\n padding-right: 24px;\n width: 480px;\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n max-width: 480px;\n padding-left: 24px;\n padding-right: 24px;\n width: 480px;\n ", ";\n"])), function (_a) {
|
|
120
|
+
var areaColor = _a.areaColor;
|
|
121
|
+
return "background-color: ".concat(areaColor);
|
|
122
|
+
});
|
|
123
|
+
var S_ContentsArea3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 100%;\n max-width: 680px;\n min-width: 480px;\n width: 60%;\n ", ";\n"], ["\n height: 100%;\n max-width: 680px;\n min-width: 480px;\n width: 60%;\n ", ";\n"])), function (_a) {
|
|
124
|
+
var areaColor = _a.areaColor;
|
|
125
|
+
return "background-color: ".concat(areaColor);
|
|
126
|
+
});
|
|
127
|
+
var S_Content1 = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 240px;\n"], ["\n width: 240px;\n"])));
|
|
128
|
+
var S_Content2 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
|
129
|
+
var S_content3 = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
|
130
|
+
exports.default = WTX;
|
|
131
|
+
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;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { UiColors } from '../../../../../../common';
|
|
3
|
+
export type WTYProps = {
|
|
4
|
+
content1?: JSX.Element;
|
|
5
|
+
content2?: JSX.Element;
|
|
6
|
+
layoutType?: 'WTY_1';
|
|
7
|
+
containerColor?: string;
|
|
8
|
+
areaColor?: string;
|
|
9
|
+
isLoadingContainer1?: boolean;
|
|
10
|
+
isLoadingContainer2?: boolean;
|
|
11
|
+
overrideContainer1ColorKey?: UiColors;
|
|
12
|
+
overrideContainer2ColorKey?: UiColors;
|
|
13
|
+
};
|
|
14
|
+
export type StyleProps = {
|
|
15
|
+
$contentsArea2Width?: number;
|
|
16
|
+
};
|
|
17
|
+
declare const WTY: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: WTYProps) => JSX.Element;
|
|
18
|
+
export default WTY;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
|
+
var react_1 = require("react");
|
|
43
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
|
+
var components_1 = require("../../../../../../common/components");
|
|
45
|
+
var WTY = function (_a) {
|
|
46
|
+
var _b, _c;
|
|
47
|
+
var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTY_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
|
|
48
|
+
var contentsArea2Ref = (0, react_1.useRef)(null);
|
|
49
|
+
var _e = (0, react_1.useState)((_c = (_b = contentsArea2Ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 720), contentsArea2Width = _e[0], setContentsArea2Width = _e[1];
|
|
50
|
+
var handleResize = function () {
|
|
51
|
+
if (contentsArea2Ref === null || contentsArea2Ref.current === null) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
setContentsArea2Width(contentsArea2Ref.current.offsetWidth);
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
@when : 브라우저 화면 사이즈가 변경될 때
|
|
58
|
+
@expected : contentsArea2의 너비를 contentsArea2Width에 저장합니다.
|
|
59
|
+
@clear : 이벤트 등록을 해제합니다.
|
|
60
|
+
*/
|
|
61
|
+
(0, react_1.useEffect)(function () {
|
|
62
|
+
window.addEventListener('resize', handleResize);
|
|
63
|
+
return function () {
|
|
64
|
+
window.removeEventListener('resize', handleResize);
|
|
65
|
+
};
|
|
66
|
+
}, []);
|
|
67
|
+
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": "WTY", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, "$contentsArea2Width": contentsArea2Width }, { 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": "WTY", layoutType: layoutType, areaColor: areaColor }, { 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": "WTY", 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": "WTY", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey, "$contentsArea2Width": contentsArea2Width }, { 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": "WTY", 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": "WTY", layoutType: layoutType }, { children: content2 })) }))) }))] }));
|
|
68
|
+
};
|
|
69
|
+
var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
70
|
+
var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
|
|
71
|
+
return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
|
|
72
|
+
});
|
|
73
|
+
var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
74
|
+
var theme = _a.theme, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
|
|
75
|
+
return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
|
|
76
|
+
});
|
|
77
|
+
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 S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 100%;\n\n /* justify-content: flex-end; */\n /* margin: 0; */\n /* overflow-x: hidden; */\n /* overflow-y: auto; */\n width: 480px;\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 100%;\n\n /* justify-content: flex-end; */\n /* margin: 0; */\n /* overflow-x: hidden; */\n /* overflow-y: auto; */\n width: 480px;\n ", ";\n\n ", "\n"])), function (_a) {
|
|
79
|
+
var theme = _a.theme;
|
|
80
|
+
return theme.ui_contentscontainer01_background;
|
|
81
|
+
}, function (_a) {
|
|
82
|
+
var containerColor = _a.containerColor;
|
|
83
|
+
return "background-color: ".concat(containerColor);
|
|
84
|
+
}, overrideStyleContainer1);
|
|
85
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex: 1;\n /* width: ", "; */\n height: 100%;\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex: 1;\n /* width: ", "; */\n height: 100%;\n ", ";\n\n ", "\n"])), function (_a) {
|
|
86
|
+
var theme = _a.theme;
|
|
87
|
+
return theme.ui_contentscontainer02_background;
|
|
88
|
+
}, function (_a) {
|
|
89
|
+
var theme = _a.theme;
|
|
90
|
+
return theme.ui_container_divider;
|
|
91
|
+
}, function (_a) {
|
|
92
|
+
var $contentsArea2Width = _a.$contentsArea2Width;
|
|
93
|
+
return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
|
|
94
|
+
}, function (_a) {
|
|
95
|
+
var containerColor = _a.containerColor;
|
|
96
|
+
return "background-color: ".concat(containerColor);
|
|
97
|
+
}, overrideStyleContainer2);
|
|
98
|
+
var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n /* padding-bottom: 88px; */\n max-width: 480px;\n padding-left: 24px;\n padding-right: 24px;\n width: 480px;\n\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n /* padding-bottom: 88px; */\n max-width: 480px;\n padding-left: 24px;\n padding-right: 24px;\n width: 480px;\n\n ", ";\n"])), function (_a) {
|
|
99
|
+
var areaColor = _a.areaColor;
|
|
100
|
+
return "background-color: ".concat(areaColor);
|
|
101
|
+
});
|
|
102
|
+
var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n /* max-width: 680px;/ */\n min-width: 480px;\n /* width: 60%; */\n ", ";\n"], ["\n height: 100%;\n /* max-width: 680px;/ */\n min-width: 480px;\n /* width: 60%; */\n ", ";\n"])), function (_a) {
|
|
103
|
+
var areaColor = _a.areaColor;
|
|
104
|
+
return "background-color: ".concat(areaColor);
|
|
105
|
+
});
|
|
106
|
+
var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
|
107
|
+
var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
|
108
|
+
exports.default = WTY;
|
|
109
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.WTW = exports.WTV = exports.WTU = exports.WTT = exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
|
|
6
|
+
exports.WTY = exports.WTX = exports.WTW = exports.WTV = exports.WTU = exports.WTT = exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
|
|
7
7
|
var WTA_1 = require("./WTA");
|
|
8
8
|
Object.defineProperty(exports, "WTA", { enumerable: true, get: function () { return __importDefault(WTA_1).default; } });
|
|
9
9
|
var WTB_1 = require("./WTB");
|
|
@@ -48,3 +48,7 @@ var WTV_1 = require("./WTV");
|
|
|
48
48
|
Object.defineProperty(exports, "WTV", { enumerable: true, get: function () { return __importDefault(WTV_1).default; } });
|
|
49
49
|
var WTW_1 = require("./WTW");
|
|
50
50
|
Object.defineProperty(exports, "WTW", { enumerable: true, get: function () { return __importDefault(WTW_1).default; } });
|
|
51
|
+
var WTX_1 = require("./WTX");
|
|
52
|
+
Object.defineProperty(exports, "WTX", { enumerable: true, get: function () { return __importDefault(WTX_1).default; } });
|
|
53
|
+
var WTY_1 = require("./WTY");
|
|
54
|
+
Object.defineProperty(exports, "WTY", { enumerable: true, get: function () { return __importDefault(WTY_1).default; } });
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
import type { UiColors } from '../../../../common';
|
|
2
2
|
import type { MutableRefObject } from 'react';
|
|
3
3
|
export type ContainersBoxProps = {
|
|
4
|
-
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1';
|
|
4
|
+
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1' | 'WTY_1';
|
|
5
5
|
pageMenuContent?: JSX.Element;
|
|
6
6
|
tabMenuContent?: JSX.Element;
|
|
7
7
|
subMenuContent?: JSX.Element;
|
|
8
8
|
content1?: JSX.Element;
|
|
9
9
|
content2?: JSX.Element;
|
|
10
|
+
content3?: JSX.Element;
|
|
10
11
|
children?: React.ReactNode;
|
|
11
12
|
containerColor?: string;
|
|
12
13
|
areaColor?: string;
|
|
13
14
|
isLoadingContainer1?: boolean;
|
|
14
15
|
isLoadingContainer2?: boolean;
|
|
16
|
+
isLoadingContainer3?: boolean;
|
|
15
17
|
overrideContainer1ColorKey?: UiColors;
|
|
16
18
|
overrideContainer2ColorKey?: UiColors;
|
|
19
|
+
overrideContainer3ColorKey?: UiColors;
|
|
17
20
|
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
18
21
|
};
|
|
19
|
-
declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey, container1Ref }: ContainersBoxProps) => JSX.Element;
|
|
22
|
+
declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, content3, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref }: ContainersBoxProps) => JSX.Element;
|
|
20
23
|
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, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, 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;
|
|
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, {}),
|
|
@@ -90,7 +90,9 @@ var ContainersBox = function (_a) {
|
|
|
90
90
|
WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
91
91
|
WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
92
92
|
WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
93
|
-
WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
|
|
93
|
+
WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
94
|
+
WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
95
|
+
WTY_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent }))
|
|
94
96
|
}[layoutType], (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [{
|
|
95
97
|
WTA_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_480", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
96
98
|
WTA_2: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_600", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
@@ -138,7 +140,9 @@ var ContainersBox = function (_a) {
|
|
|
138
140
|
WTT_2: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
139
141
|
WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
140
142
|
WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
141
|
-
WTW_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor }))
|
|
143
|
+
WTW_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
144
|
+
WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
145
|
+
WTY_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
|
|
142
146
|
}[layoutType], {
|
|
143
147
|
WTA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
144
148
|
WTA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
@@ -186,7 +190,9 @@ var ContainersBox = function (_a) {
|
|
|
186
190
|
WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
187
191
|
WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
188
192
|
WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
189
|
-
WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
|
|
193
|
+
WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
194
|
+
WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
|
|
195
|
+
WTY_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
|
|
190
196
|
}[layoutType], (0, jsx_runtime_1.jsxs)(S_BottomWrapper, __assign({ layoutType: layoutType }, { children: [{
|
|
191
197
|
WTA_1: '',
|
|
192
198
|
WTA_2: '',
|
|
@@ -234,10 +240,12 @@ var ContainersBox = function (_a) {
|
|
|
234
240
|
WTT_2: '',
|
|
235
241
|
WTU_1: '',
|
|
236
242
|
WTV_1: '',
|
|
237
|
-
WTW_1: ''
|
|
238
|
-
|
|
243
|
+
WTW_1: '',
|
|
244
|
+
WTX_1: '',
|
|
245
|
+
WTY_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 })] }))] })] }));
|
|
239
247
|
};
|
|
240
|
-
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"])));
|
|
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 /* justify-content: center; */\n"], ["\n align-items: flex-start;\n display: flex;\n height: 100%;\n /* justify-content: center; */\n"])));
|
|
241
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"])));
|
|
242
250
|
var flexStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
243
251
|
var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"], ["\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"])), function (_a) {
|
|
@@ -90,8 +90,7 @@ function CustomSection(props) {
|
|
|
90
90
|
}), rows = _g.rows, width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
|
|
91
91
|
var customSectionStyles = {
|
|
92
92
|
minHeight: "".concat(minHeight, "vh"),
|
|
93
|
-
width: '100%',
|
|
94
|
-
maxWidth: isFullWidth ? '' : "".concat(width, "px")
|
|
93
|
+
width: isFullWidth ? '100%' : "".concat(width, "px")
|
|
95
94
|
};
|
|
96
95
|
var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
|
|
97
96
|
var onClickCB = function (id) {
|
|
@@ -205,7 +204,6 @@ function CustomSection(props) {
|
|
|
205
204
|
paddingLeft: padding.left
|
|
206
205
|
} }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
|
|
207
206
|
width: customSectionStyles.width,
|
|
208
|
-
maxWidth: customSectionStyles.maxWidth,
|
|
209
207
|
minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
|
|
210
208
|
fontSize: "".concat(baseFontSize, "px")
|
|
211
209
|
}, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
package/package.json
CHANGED
package/release-note.md
CHANGED