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.
@@ -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
- /// <reference types="react" />
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 align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
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
- // TODO: Area단에 height: 100%; overflow: auto; 추가와 padding-bottom: 88px; 삭제 것은 무한 스크롤 대응위한 임시 방편입니다.
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
- /// <reference types="react" />
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 align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: 664px;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
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
- // TODO: Area단에 height: 100%; overflow: auto; 추가와 padding-bottom: 88px; 삭제 것은 무한 스크롤 대응위한 임시 방편입니다.
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 justify-content: center;\n"], ["\n display: flex;\n height: 100%;\n justify-content: center;\n"])));
23
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n max-width: 760px;\n overflow-x: hidden;\n overflow-y: auto;\n flex: 1;\n height: 100%;\n width: 760px;\n ", ";\n"], ["\n background-color: ", ";\n max-width: 760px;\n overflow-x: hidden;\n overflow-y: auto;\n flex: 1;\n height: 100%;\n width: 760px;\n ", ";\n"])), function (_a) {
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 min-width: 320px;\n overflow-x: hidden;\n overflow-y: auto;\n height: 100%;\n width: 320px;\n ", ";\n"], ["\n background-color: ", ";\n min-width: 320px;\n overflow-x: hidden;\n overflow-y: auto;\n height: 100%;\n width: 320px;\n ", ";\n"])), function (_a) {
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
  });
@@ -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 centerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n // TODO: WTO_1, WTP_1, WTQ_1 \uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n background-color: ", ";\n"], ["\n display: flex;\n justify-content: center;\n // TODO: WTO_1, WTP_1, WTQ_1 \uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n background-color: ", ";\n"])), function (_a) {
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' || layoutType === 'WTQ_1' ? centerStyle : '';
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.20",
3
+ "version": "1.4.21",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,16 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.20]
2
+ ## [v1.4.21]
3
3
 
4
- ### Component
5
- * Divider
6
- * vertical로 쓰일 경우 배경색 추가
7
- * DynamicDesktopNavBar
8
- * 활성화 관련 개선
9
- * 자체적으로 BY_CLICK와 BY_URL 상태를 가지도록 변경
10
- * Select
11
- * value를 사용할 경우 초기값이 '' 나 0으로 올때에 대한 방어 처리
12
- * Icon
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영역 수정