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.
- package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts +2 -1
- package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js +6 -3
- package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.d.ts +2 -1
- package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.js +6 -3
- package/package.json +1 -1
- package/release-note.md +6 -7
|
@@ -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 =
|
|
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:
|
|
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:
|
|
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
package/release-note.md
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.3.
|
|
2
|
+
## [v1.3.23]
|
|
3
3
|
|
|
4
|
-
###
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* 컬러 키 값 22.05.27 12시 40분 기준 싱크
|
|
4
|
+
### Component
|
|
5
|
+
* DesktopBasicModal
|
|
6
|
+
* bodyOverflowType prop 추가 (systemUI구현 전 임시조치)
|
|
7
|
+
* MobileBasicModal
|
|
8
|
+
* bodyOverflowType prop 추가 (systemUI구현 전 임시조치)
|