pds-dev-kit-web 1.3.10 → 1.3.11

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.
Files changed (6) hide show
  1. package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts +2 -1
  2. package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js +18 -15
  3. package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.d.ts +2 -1
  4. package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.js +18 -15
  5. package/package.json +1 -1
  6. package/release-note.md +5 -7
package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts CHANGED
@@ -3,6 +3,7 @@ import { PDSTextType } from '../../../common';
3
3
  declare type DesktopBasicModalProps = {
4
4
  titleText: PDSTextType;
5
5
  contentText?: PDSTextType;
6
+ bodySpacingMode?: 'none' | 'use';
6
7
  btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
7
8
  mBtn1Text: PDSTextType;
8
9
  mBtn2Text?: PDSTextType;
@@ -19,5 +20,5 @@ declare type DesktopBasicModalProps = {
19
20
  onClickMBtn3?: () => void;
20
21
  children?: React.ReactNode;
21
22
  };
22
- declare function DesktopBasicModal({ titleText, contentText, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
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;
23
24
  export default DesktopBasicModal;
package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js CHANGED
@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_dom_1 = __importDefault(require("react-dom"));
31
- var styled_components_1 = __importDefault(require("styled-components"));
31
+ var styled_components_1 = __importStar(require("styled-components"));
32
32
  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.btnMode, btnMode = _b === void 0 ? 'mbtn_amount2' : _b, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _c = _a.mBtn1State, mBtn1State = _c === void 0 ? 'normal' : _c, _d = _a.mBtn2State, mBtn2State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn3State, mBtn3State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn1Type, mBtn1Type = _f === void 0 ? 'button' : _f, _g = _a.mBtn2Type, mBtn2Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn3Type, mBtn3Type = _h === void 0 ? 'button' : _h, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _j = _a.size, size = _j === void 0 ? 'large' : _j, children = _a.children;
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;
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, null,
60
+ react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
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),
@@ -87,7 +87,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
87
87
  medium: '688px',
88
88
  small: '400px'
89
89
  };
90
- return sizes[size];
90
+ return size && sizes[size];
91
91
  });
92
92
  var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
93
93
  var theme = _a.theme;
@@ -98,30 +98,33 @@ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_4 || (templat
98
98
  return theme.spacing.spacingB;
99
99
  });
100
100
  var S_Right = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
101
- var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0 ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n"], ["\n margin: 0 ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
101
+ var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0 ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin: 0 ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n"])), function (_a) {
102
102
  var theme = _a.theme;
103
103
  return theme.spacing.spacingE;
104
104
  }, function (_a) {
105
105
  var theme = _a.theme;
106
- return theme.spacing.spacingE;
106
+ return theme.spacing.spacingC;
107
107
  }, function (_a) {
108
108
  var theme = _a.theme;
109
- return theme.spacing.spacingC;
109
+ return theme.spacing.spacingE;
110
110
  });
111
- var S_Body = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n overflow: auto;\n"], ["\n flex: 1;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n overflow: auto;\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: 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) {
112
112
  var theme = _a.theme;
113
- return theme.spacing.spacingD;
113
+ return theme.spacing.spacingF;
114
114
  }, function (_a) {
115
115
  var theme = _a.theme;
116
116
  return theme.spacing.spacingE;
117
117
  }, function (_a) {
118
118
  var theme = _a.theme;
119
- return theme.spacing.spacingF;
119
+ return theme.spacing.spacingE;
120
120
  }, function (_a) {
121
121
  var theme = _a.theme;
122
- return theme.spacing.spacingE;
122
+ return theme.spacing.spacingD;
123
+ }, function (_a) {
124
+ var bodySpacingMode = _a.bodySpacingMode;
125
+ 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 "])));
123
126
  });
124
- var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_a) {
127
+ var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
125
128
  var theme = _a.theme;
126
129
  return theme.spacing.spacingD;
127
130
  }, function (_a) {
@@ -129,10 +132,10 @@ var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObje
129
132
  return theme.spacing.spacingE;
130
133
  }, function (_a) {
131
134
  var theme = _a.theme;
132
- return theme.spacing.spacingD;
135
+ return theme.spacing.spacingE;
133
136
  }, function (_a) {
134
137
  var theme = _a.theme;
135
- return theme.spacing.spacingE;
138
+ return theme.spacing.spacingD;
136
139
  });
137
140
  exports.default = DesktopBasicModal;
138
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
141
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.d.ts CHANGED
@@ -2,11 +2,12 @@ import React from 'react';
2
2
  import { PDSTextType } from '../../../common';
3
3
  declare type MobileBasicModalProps = {
4
4
  titleText: PDSTextType;
5
+ bodySpacingMode?: 'none' | 'use';
5
6
  contentText?: PDSTextType;
6
7
  mBtnText?: PDSTextType;
7
8
  onClickMBtn?: () => void;
8
9
  onClickXMarkIcon?: () => void;
9
10
  children?: React.ReactNode;
10
11
  };
11
- declare function MobileBasicModal({ titleText, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
12
+ declare function MobileBasicModal({ titleText, bodySpacingMode, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
12
13
  export default MobileBasicModal;
package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.js CHANGED
@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_dom_1 = __importDefault(require("react-dom"));
31
- var styled_components_1 = __importDefault(require("styled-components"));
31
+ var styled_components_1 = __importStar(require("styled-components"));
32
32
  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, 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, 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, null,
59
+ react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
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);
@@ -65,7 +65,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
65
65
  var theme = _a.theme;
66
66
  return theme.ui_cpnt_modal_dimmed;
67
67
  });
68
- var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n max-height: 720px;\n width: calc(100% - 48px);\n max-width: 560px;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n max-height: 720px;\n width: calc(100% - 48px);\n max-width: 560px;\n"])), function (_a) {
68
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n left: 50%;\n max-height: 720px;\n max-width: 560px;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: calc(100% - 48px);\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n left: 50%;\n max-height: 720px;\n max-width: 560px;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: calc(100% - 48px);\n"])), function (_a) {
69
69
  var theme = _a.theme;
70
70
  return theme.ui_cpnt_modal_base;
71
71
  }, function (_a) {
@@ -75,13 +75,13 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
75
75
  var theme = _a.theme;
76
76
  return theme.boxShadow.elevation4;
77
77
  });
78
- var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: ", ";\n display: flex;\n justify-content: space-between;\n"], ["\n padding-bottom: ", ";\n display: flex;\n justify-content: space-between;\n"])), function (_a) {
78
+ var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n"])), function (_a) {
79
79
  var theme = _a.theme;
80
80
  return theme.spacing.spacingC;
81
81
  });
82
- var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-top: ", ";\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n overflow-y: scroll;\n max-height: 480px;\n"], ["\n padding-top: ", ";\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n overflow-y: scroll;\n max-height: 480px;\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: 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) {
83
83
  var theme = _a.theme;
84
- return theme.spacing.spacingC;
84
+ return theme.spacing.spacingE;
85
85
  }, function (_a) {
86
86
  var theme = _a.theme;
87
87
  return theme.spacing.spacingE;
@@ -90,11 +90,14 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
90
90
  return theme.spacing.spacingE;
91
91
  }, function (_a) {
92
92
  var theme = _a.theme;
93
- return theme.spacing.spacingE;
93
+ return theme.spacing.spacingC;
94
+ }, function (_a) {
95
+ var bodySpacingMode = _a.bodySpacingMode;
96
+ return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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 "])));
94
97
  });
95
- var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding-top: ", ";\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n padding-top: ", ";\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
98
+ var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
96
99
  var theme = _a.theme;
97
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
98
101
  }, function (_a) {
99
102
  var theme = _a.theme;
100
103
  return theme.spacing.spacingE;
@@ -103,17 +106,17 @@ var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObje
103
106
  return theme.spacing.spacingE;
104
107
  }, function (_a) {
105
108
  var theme = _a.theme;
106
- return theme.spacing.spacingE;
109
+ return theme.spacing.spacingD;
107
110
  });
108
- var S_TitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n margin-left: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n margin-left: ", ";\n"])), function (_a) {
111
+ var S_TitleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
109
112
  var theme = _a.theme;
110
- return theme.spacing.spacingB;
113
+ return theme.spacing.spacingE;
111
114
  }, function (_a) {
112
115
  var theme = _a.theme;
113
- return theme.spacing.spacingE;
116
+ return theme.spacing.spacingB;
114
117
  }, function (_a) {
115
118
  var theme = _a.theme;
116
119
  return theme.spacing.spacingE;
117
120
  });
118
121
  exports.default = MobileBasicModal;
119
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
122
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.3.10",
3
+ "version": "1.3.11",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,10 +1,8 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.3.10]
2
+ ## [v1.3.11]
3
3
 
4
4
  ### Component
5
- * AdminList
6
- * 벌크액션바 정상 작동 위해 maintinIds를 디펜던시에 추가
7
-
8
- ### Color
9
- * 커스텀 컬러 작동을 위해 palette를 받을 수 있도록 수정
10
- * 컬러 키 값 22.05.02 22시 15분 기준 싱크
5
+ * DesktopBasicModal
6
+ * bodySpacingMode prop 추가
7
+ * MobileBasicModal
8
+ * bodySpacingMode prop 추가