pds-dev-kit-web 1.3.22 → 1.3.23

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.
@@ -4,6 +4,7 @@ declare type DesktopBasicModalProps = {
4
4
  titleText: PDSTextType;
5
5
  contentText?: PDSTextType;
6
6
  bodySpacingMode?: 'none' | 'use';
7
+ bodyOverflowType?: 'auto' | 'visible';
7
8
  btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
8
9
  mBtn1Text: PDSTextType;
9
10
  mBtn2Text?: PDSTextType;
@@ -20,5 +21,5 @@ declare type DesktopBasicModalProps = {
20
21
  onClickMBtn3?: () => void;
21
22
  children?: React.ReactNode;
22
23
  };
23
- declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
24
+ declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, bodyOverflowType, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
24
25
  export default DesktopBasicModal;
@@ -33,7 +33,7 @@ var hybrid_1 = require("../../../hybrid");
33
33
  var MainButton_1 = require("../MainButton");
34
34
  var TextLabel_1 = require("../TextLabel");
35
35
  function DesktopBasicModal(_a) {
36
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.btnMode, btnMode = _c === void 0 ? 'mbtn_amount2' : _c, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _d = _a.mBtn1State, mBtn1State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn2State, mBtn2State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn3State, mBtn3State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn1Type, mBtn1Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn2Type, mBtn2Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn3Type, mBtn3Type = _j === void 0 ? 'button' : _j, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _k = _a.size, size = _k === void 0 ? 'large' : _k, children = _a.children;
36
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, children = _a.children;
37
37
  var container = (0, react_1.useState)(function () {
38
38
  var modalRoot = document.createElement('div');
39
39
  modalRoot.setAttribute('id', 'DesktopBasicModal');
@@ -57,7 +57,7 @@ function DesktopBasicModal(_a) {
57
57
  react_1.default.createElement(S_ModalWrapper, { size: size },
58
58
  react_1.default.createElement(S_Header, null,
59
59
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
60
- react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
60
+ react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType },
61
61
  contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
62
62
  children && children),
63
63
  react_1.default.createElement(hybrid_1.Divider, null),
@@ -108,7 +108,7 @@ var S_Header = styled_components_1.default.div(templateObject_6 || (templateObje
108
108
  var theme = _a.theme;
109
109
  return theme.spacing.spacingE;
110
110
  });
111
- var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n overflow: auto;\n\n ", "\n"], ["\n flex: 1;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n overflow: auto;\n\n ", "\n"])), function (_a) {
111
+ var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n overflow: ", ";\n\n ", "\n"], ["\n flex: 1;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n overflow: ", ";\n\n ", "\n"])), function (_a) {
112
112
  var theme = _a.theme;
113
113
  return theme.spacing.spacingF;
114
114
  }, function (_a) {
@@ -120,6 +120,9 @@ var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject
120
120
  }, function (_a) {
121
121
  var theme = _a.theme;
122
122
  return theme.spacing.spacingD;
123
+ }, function (_a) {
124
+ var bodyOverflowType = _a.bodyOverflowType;
125
+ return bodyOverflowType;
123
126
  }, function (_a) {
124
127
  var bodySpacingMode = _a.bodySpacingMode;
125
128
  return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 0;\n margin-left: 0;\n margin-right: 0;\n "], ["\n margin-bottom: 0;\n margin-left: 0;\n margin-right: 0;\n "])));
@@ -3,11 +3,12 @@ import { PDSTextType } from '../../../common';
3
3
  declare type MobileBasicModalProps = {
4
4
  titleText: PDSTextType;
5
5
  bodySpacingMode?: 'none' | 'use';
6
+ bodyOverflowType?: 'auto' | 'visible';
6
7
  contentText?: PDSTextType;
7
8
  mBtnText?: PDSTextType;
8
9
  onClickMBtn?: () => void;
9
10
  onClickXMarkIcon?: () => void;
10
11
  children?: React.ReactNode;
11
12
  };
12
- declare function MobileBasicModal({ titleText, bodySpacingMode, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
13
+ declare function MobileBasicModal({ titleText, bodySpacingMode, bodyOverflowType, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
13
14
  export default MobileBasicModal;
@@ -33,7 +33,7 @@ var IconButton_1 = require("../IconButton");
33
33
  var MainButton_1 = require("../MainButton");
34
34
  var TextLabel_1 = require("../TextLabel");
35
35
  function MobileBasicModal(_a) {
36
- var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
36
+ var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
37
37
  var container = (0, react_1.useState)(function () {
38
38
  var modalRoot = document.createElement('div');
39
39
  modalRoot.setAttribute('id', 'MobileBasicModal');
@@ -56,7 +56,7 @@ function MobileBasicModal(_a) {
56
56
  react_1.default.createElement(S_TitleWrapper, null,
57
57
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
58
58
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon })),
59
- react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
59
+ react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType },
60
60
  contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
61
61
  children && children),
62
62
  react_1.default.createElement(S_Footer, null, mBtnText && react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "rlarge", onClick: onClickMBtn })))), container);
@@ -79,7 +79,7 @@ var S_Header = styled_components_1.default.div(templateObject_3 || (templateObje
79
79
  var theme = _a.theme;
80
80
  return theme.spacing.spacingC;
81
81
  });
82
- var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n max-height: 480px;\n overflow-y: scroll;\n padding-top: ", ";\n\n ", "\n"], ["\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n max-height: 480px;\n overflow-y: scroll;\n padding-top: ", ";\n\n ", "\n"])), function (_a) {
82
+ var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n max-height: 480px;\n overflow-y: ", ";\n padding-top: ", ";\n\n ", "\n"], ["\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n max-height: 480px;\n overflow-y: ", ";\n padding-top: ", ";\n\n ", "\n"])), function (_a) {
83
83
  var theme = _a.theme;
84
84
  return theme.spacing.spacingE;
85
85
  }, function (_a) {
@@ -88,6 +88,9 @@ var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject
88
88
  }, function (_a) {
89
89
  var theme = _a.theme;
90
90
  return theme.spacing.spacingE;
91
+ }, function (_a) {
92
+ var bodyOverflowType = _a.bodyOverflowType;
93
+ return bodyOverflowType;
91
94
  }, function (_a) {
92
95
  var theme = _a.theme;
93
96
  return theme.spacing.spacingC;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.3.22",
3
+ "version": "1.3.23",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,9 +1,8 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.3.22]
2
+ ## [v1.3.23]
3
3
 
4
- ### Layout
5
- * WTS_1
6
- * content1의 min-height값 제거
7
-
8
- ### Color
9
- * 컬러 키 값 22.05.27 12시 40분 기준 싱크
4
+ ### Component
5
+ * DesktopBasicModal
6
+ * bodyOverflowType prop 추가 (systemUI구현 전 임시조치)
7
+ * MobileBasicModal
8
+ * bodyOverflowType prop 추가 (systemUI구현 전 임시조치)