pds-dev-kit-web 1.4.20 → 1.4.21
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.js +2 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTO.d.ts +3 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTO.js +8 -10
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts +3 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js +8 -10
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTQ.js +5 -5
- package/dist/src/desktop/layout/LayoutWT/Containers/SubMenuContainer/variation/LeftSubMenu.js +1 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +4 -7
- package/package.json +1 -1
- package/release-note.md +10 -14
|
@@ -42,8 +42,8 @@ var ContentsContainer = function (_a) {
|
|
|
42
42
|
WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
|
|
43
43
|
WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
|
|
44
44
|
WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
|
|
45
|
-
WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
|
|
46
|
-
WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
|
|
45
|
+
WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
46
|
+
WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
47
47
|
WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
|
|
48
48
|
WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
49
49
|
WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
2
|
export declare type WTOProps = {
|
|
3
3
|
content1?: JSX.Element;
|
|
4
4
|
layoutType: 'WTO_1';
|
|
5
5
|
containerColor?: string;
|
|
6
6
|
areaColor?: string;
|
|
7
|
+
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
7
8
|
};
|
|
8
|
-
declare const WTO: ({ content1, layoutType, containerColor, areaColor }: WTOProps) => JSX.Element;
|
|
9
|
+
declare const WTO: ({ content1, layoutType, containerColor, areaColor, container1Ref }: WTOProps) => JSX.Element;
|
|
9
10
|
export default WTO;
|
|
@@ -10,29 +10,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
var react_1 = __importDefault(require("react"));
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var WTO = function (_a) {
|
|
13
|
-
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
|
|
14
|
-
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
|
|
13
|
+
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
|
|
14
|
+
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
|
|
15
15
|
react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
|
|
16
16
|
react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
|
|
17
17
|
};
|
|
18
|
-
var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
18
|
+
var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n width: calc(50% + 184px);\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n width: calc(50% + 184px);\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
|
|
19
19
|
var theme = _a.theme;
|
|
20
20
|
return theme.ui_contentscontainer01_background;
|
|
21
21
|
}, function (_a) {
|
|
22
22
|
var containerColor = _a.containerColor;
|
|
23
23
|
return "background-color: " + containerColor;
|
|
24
24
|
});
|
|
25
|
-
|
|
26
|
-
var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: auto;\n ", ";\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: auto;\n ", ";\n"])), function (_a) {
|
|
27
|
-
var areaColor = _a.areaColor;
|
|
28
|
-
return "background-color: " + areaColor;
|
|
29
|
-
});
|
|
30
|
-
// TODO: Content단에 height: 100%; 추가는 무한 스크롤 대응위한 임시 방편입니다.
|
|
31
|
-
var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n height: 100%;\n"], ["\n ", ";\n height: 100%;\n"])), function (_a) {
|
|
25
|
+
var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n ", ";\n"])), function (_a) {
|
|
32
26
|
var layoutType = _a.layoutType;
|
|
33
27
|
return ({
|
|
34
28
|
WTO_1: 'width: 664px;'
|
|
35
29
|
}[layoutType]);
|
|
30
|
+
}, function (_a) {
|
|
31
|
+
var areaColor = _a.areaColor;
|
|
32
|
+
return "background-color: " + areaColor;
|
|
36
33
|
});
|
|
34
|
+
var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
37
35
|
exports.default = WTO;
|
|
38
36
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
2
|
export declare type WTPProps = {
|
|
3
3
|
content1?: JSX.Element;
|
|
4
4
|
layoutType: 'WTP_1';
|
|
5
5
|
containerColor?: string;
|
|
6
6
|
areaColor?: string;
|
|
7
|
+
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
7
8
|
};
|
|
8
|
-
declare const WTP: ({ content1, layoutType, containerColor, areaColor }: WTPProps) => JSX.Element;
|
|
9
|
+
declare const WTP: ({ content1, layoutType, containerColor, areaColor, container1Ref }: WTPProps) => JSX.Element;
|
|
9
10
|
export default WTP;
|
|
@@ -10,29 +10,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
var react_1 = __importDefault(require("react"));
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var WTP = function (_a) {
|
|
13
|
-
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
|
|
14
|
-
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
|
|
13
|
+
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
|
|
14
|
+
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
|
|
15
15
|
react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
|
|
16
16
|
react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
|
|
17
17
|
};
|
|
18
|
-
var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
18
|
+
var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n width: calc(50% + 184px);\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n width: calc(50% + 184px);\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
|
|
19
19
|
var theme = _a.theme;
|
|
20
20
|
return theme.ui_contentscontainer01_background;
|
|
21
21
|
}, function (_a) {
|
|
22
22
|
var containerColor = _a.containerColor;
|
|
23
23
|
return "background-color: " + containerColor;
|
|
24
24
|
});
|
|
25
|
-
|
|
26
|
-
var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: auto;\n ", ";\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: auto;\n ", ";\n"])), function (_a) {
|
|
27
|
-
var areaColor = _a.areaColor;
|
|
28
|
-
return "background-color: " + areaColor;
|
|
29
|
-
});
|
|
30
|
-
// TODO: Content단에 height: 100%; 추가는 무한 스크롤 대응위한 임시 방편입니다.
|
|
31
|
-
var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n height: 100%;\n"], ["\n ", ";\n height: 100%;\n"])), function (_a) {
|
|
25
|
+
var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
32
26
|
var layoutType = _a.layoutType;
|
|
33
27
|
return ({
|
|
34
28
|
WTP_1: 'width: 664px;'
|
|
35
29
|
}[layoutType]);
|
|
30
|
+
}, function (_a) {
|
|
31
|
+
var areaColor = _a.areaColor;
|
|
32
|
+
return "background-color: " + areaColor;
|
|
36
33
|
});
|
|
34
|
+
var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
37
35
|
exports.default = WTP;
|
|
38
36
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -19,26 +19,26 @@ var WTQ = function (_a) {
|
|
|
19
19
|
react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
|
|
20
20
|
react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
|
|
21
21
|
};
|
|
22
|
-
var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n
|
|
23
|
-
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n
|
|
22
|
+
var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
23
|
+
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: end;\n overflow-x: hidden;\n overflow-y: auto;\n width: calc(50% + 220px);\n ", ";\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: end;\n overflow-x: hidden;\n overflow-y: auto;\n width: calc(50% + 220px);\n ", ";\n"])), function (_a) {
|
|
24
24
|
var theme = _a.theme;
|
|
25
25
|
return theme.ui_contentscontainer01_background;
|
|
26
26
|
}, function (_a) {
|
|
27
27
|
var containerColor = _a.containerColor;
|
|
28
28
|
return "background-color: " + containerColor;
|
|
29
29
|
});
|
|
30
|
-
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n
|
|
30
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n overflow-x: hidden;\n overflow-y: auto;\n width: calc(50% - 220px);\n ", ";\n"], ["\n background-color: ", ";\n overflow-x: hidden;\n overflow-y: auto;\n width: calc(50% - 220px);\n ", ";\n"])), function (_a) {
|
|
31
31
|
var theme = _a.theme;
|
|
32
32
|
return theme.ui_contentscontainer02_background;
|
|
33
33
|
}, function (_a) {
|
|
34
34
|
var containerColor = _a.containerColor;
|
|
35
35
|
return "background-color: " + containerColor;
|
|
36
36
|
});
|
|
37
|
-
var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-bottom: 88px;\n ", ";\n"], ["\n padding-bottom: 88px;\n ", ";\n"])), function (_a) {
|
|
37
|
+
var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-bottom: 88px;\n max-width: 760px;\n width: 760px;\n ", ";\n"], ["\n padding-bottom: 88px;\n max-width: 760px;\n width: 760px;\n ", ";\n"])), function (_a) {
|
|
38
38
|
var areaColor = _a.areaColor;
|
|
39
39
|
return "background-color: " + areaColor;
|
|
40
40
|
});
|
|
41
|
-
var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-bottom: 88px;\n ", ";\n"], ["\n padding-bottom: 88px;\n ", ";\n"])), function (_a) {
|
|
41
|
+
var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-bottom: 88px;\n min-width: 320px;\n width: 320px;\n ", ";\n"], ["\n padding-bottom: 88px;\n min-width: 320px;\n width: 320px;\n ", ";\n"])), function (_a) {
|
|
42
42
|
var areaColor = _a.areaColor;
|
|
43
43
|
return "background-color: " + areaColor;
|
|
44
44
|
});
|
package/dist/src/desktop/layout/LayoutWT/Containers/SubMenuContainer/variation/LeftSubMenu.js
CHANGED
|
@@ -15,7 +15,7 @@ var LeftSubMenu = function (_a) {
|
|
|
15
15
|
react_1.default.createElement(S_LeftSubMenuArea, { areaColor: areaColor },
|
|
16
16
|
react_1.default.createElement(S_LeftSubMenuContent, null, children))));
|
|
17
17
|
};
|
|
18
|
-
var S_LeftSubMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 100%;\n min-width: 296px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n background-color: ", ";\n height: 100%;\n min-width: 296px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
|
|
18
|
+
var S_LeftSubMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n height: 100%;\n min-width: 296px;\n width: calc(50% - 184px);\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n height: 100%;\n min-width: 296px;\n width: calc(50% - 184px);\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
|
|
19
19
|
var theme = _a.theme;
|
|
20
20
|
return theme.ui_pagemenucontainer_background;
|
|
21
21
|
}, function (_a) {
|
|
@@ -192,8 +192,8 @@ var ContainersBox = function (_a) {
|
|
|
192
192
|
WTN_1: '',
|
|
193
193
|
WTN_2: '',
|
|
194
194
|
WTN_3: '',
|
|
195
|
-
WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
|
|
196
|
-
WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
|
|
195
|
+
WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
196
|
+
WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
197
197
|
WTQ_1: '',
|
|
198
198
|
WTS_1: '',
|
|
199
199
|
WTS_2: ''
|
|
@@ -202,13 +202,10 @@ var ContainersBox = function (_a) {
|
|
|
202
202
|
};
|
|
203
203
|
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"])));
|
|
204
204
|
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"])));
|
|
205
|
-
var
|
|
206
|
-
var theme = _a.theme;
|
|
207
|
-
return theme.ui_contentscontainer01_background;
|
|
208
|
-
});
|
|
205
|
+
var flexStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
209
206
|
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) {
|
|
210
207
|
var layoutType = _a.layoutType;
|
|
211
|
-
return layoutType === 'WTO_1' || layoutType === 'WTP_1'
|
|
208
|
+
return (layoutType === 'WTO_1' || layoutType === 'WTP_1') && flexStyle;
|
|
212
209
|
});
|
|
213
210
|
exports.default = ContainersBox;
|
|
214
211
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.4.
|
|
2
|
+
## [v1.4.21]
|
|
3
3
|
|
|
4
|
-
###
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
*
|
|
11
|
-
|
|
12
|
-
*
|
|
13
|
-
* ic_ghost value 추가
|
|
14
|
-
* ic_payment_free_trial value 추가
|
|
15
|
-
* ic_payment_onetime 형태 변경
|
|
16
|
-
* ic_payment_regularly 형태 변경
|
|
4
|
+
### Layout
|
|
5
|
+
* WTO_1
|
|
6
|
+
* container영역 수정
|
|
7
|
+
* 무한 스크롤 대응위한 임시 방편 제거, container1Ref prop 추가
|
|
8
|
+
* WTP_1
|
|
9
|
+
* container영역 수정
|
|
10
|
+
* 무한 스크롤 대응위한 임시 방편 제거, container1Ref prop 추가
|
|
11
|
+
* WTQ_1
|
|
12
|
+
* container영역 수정
|