pds-dev-kit-web 2.2.179 → 2.2.181

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 (4) hide show
  1. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts +17 -2
  2. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +35 -5
  3. package/package.json +1 -1
  4. package/release-note.md +2 -2
package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts CHANGED
@@ -1,10 +1,25 @@
1
1
  /// <reference types="react" />
2
+ import type { PDSTextType } from '../../../common/types';
2
3
  type DesktopHeadlessModalProps = {
3
4
  body: React.ReactNode;
4
- size?: 'large' | 'medium' | 'small' | 'rlarge';
5
+ size?: 'large' | 'medium' | 'small' | 'rlarge' | 'xlarge';
5
6
  dimmedClickCloseMode?: 'use' | 'none';
6
7
  scrollVisibleType?: 'hidden' | 'moving' | 'visible';
8
+ footerMode?: 'use' | 'none';
9
+ btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
10
+ mBtn1Text?: PDSTextType;
11
+ mBtn2Text?: PDSTextType;
12
+ mBtn3Text?: PDSTextType;
13
+ mBtn1State?: 'normal' | 'disabled';
14
+ mBtn2State?: 'normal' | 'disabled';
15
+ mBtn3State?: 'normal' | 'disabled';
16
+ mBtn1Type?: 'button' | 'submit';
17
+ mBtn2Type?: 'button' | 'submit';
18
+ mBtn3Type?: 'button' | 'submit';
19
+ onClickMBtn1?: () => void;
20
+ onClickMBtn2?: () => void;
21
+ onClickMBtn3?: () => void;
7
22
  onClose?: () => void;
8
23
  };
9
- declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): import("react").ReactPortal;
24
+ declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose, footerMode, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: DesktopHeadlessModalProps): import("react").ReactPortal;
10
25
  export default DesktopHeadlessModal;
package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js CHANGED
@@ -44,11 +44,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
44
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
45
  var react_1 = require("react");
46
46
  var react_dom_1 = __importDefault(require("react-dom"));
47
+ var components_1 = require("../../components");
47
48
  var styled_components_1 = __importStar(require("styled-components"));
48
49
  var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
49
50
  var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
50
51
  function DesktopHeadlessModal(_a) {
51
- var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, onClose = _a.onClose;
52
+ var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, onClose = _a.onClose, _e = _a.footerMode, footerMode = _e === void 0 ? 'none' : _e, _f = _a.btnMode, btnMode = _f === void 0 ? 'mbtn_amount2' : _f, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _g = _a.mBtn1State, mBtn1State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.mBtn3State, mBtn3State = _j === void 0 ? 'normal' : _j, _k = _a.mBtn1Type, mBtn1Type = _k === void 0 ? 'button' : _k, _l = _a.mBtn2Type, mBtn2Type = _l === void 0 ? 'button' : _l, _m = _a.mBtn3Type, mBtn3Type = _m === void 0 ? 'button' : _m, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
52
53
  var container = (0, react_1.useState)(function () {
53
54
  var modalRoot = document.createElement('div');
54
55
  modalRoot.setAttribute('id', 'DesktopHeadlessModal');
@@ -87,13 +88,16 @@ function DesktopHeadlessModal(_a) {
87
88
  clearTimeout(isScrolling);
88
89
  };
89
90
  }, []);
90
- return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsx)(S_ModalWrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body })) }))] }), container);
91
+ var btn1Mode = ['mbtn_amount1', 'mbtn_amount2', 'mbtn_amount3'];
92
+ var btn2Mode = ['mbtn_amount2', 'mbtn_amount3'];
93
+ var btn3Mode = ['mbtn_amount3'];
94
+ return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body })), footerMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && mBtn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && mBtn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 })) }), btn1Mode.includes(btnMode) && mBtn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 }))] })] }))] }))] }), container);
91
95
  }
92
96
  var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"], ["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"])), function (_a) {
93
97
  var theme = _a.theme;
94
98
  return theme.ui_cpnt_modal_dimmed;
95
99
  }, animationStyle_1.modalOverlayOnAni);
96
- var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n left: 50%;\n max-height: 80vh;\n min-width: ", ";\n pointer-events: auto;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n left: 50%;\n max-height: 80vh;\n min-width: ", ";\n pointer-events: auto;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n\n ", "\n"])), function (_a) {
100
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n max-height: 80vh;\n min-width: ", ";\n pointer-events: auto;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n max-height: 80vh;\n min-width: ", ";\n pointer-events: auto;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n\n ", "\n"])), function (_a) {
97
101
  var theme = _a.theme;
98
102
  return theme.ui_cpnt_modal_base;
99
103
  }, function (_a) {
@@ -111,7 +115,8 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
111
115
  small: '400px',
112
116
  medium: '688px',
113
117
  large: '960px',
114
- rlarge: '60vw'
118
+ rlarge: '60vw',
119
+ xlarge: '1200px'
115
120
  };
116
121
  return sizes[size];
117
122
  }, animationStyle_1.modalOnAni);
@@ -128,5 +133,30 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
128
133
  var scrollVisibleType = _a.scrollVisibleType;
129
134
  return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
130
135
  });
136
+ var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
137
+ var theme = _a.theme;
138
+ return theme.spacing.spacingB;
139
+ });
140
+ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
141
+ var theme = _a.theme;
142
+ return theme.spacing.spacingB;
143
+ });
144
+ var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
145
+ var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border-top: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n border-top: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
146
+ var theme = _a.theme;
147
+ return theme.ui_cpnt_modal_border;
148
+ }, function (_a) {
149
+ var theme = _a.theme;
150
+ return theme.spacing.spacingD;
151
+ }, function (_a) {
152
+ var theme = _a.theme;
153
+ return theme.spacing.spacingE;
154
+ }, function (_a) {
155
+ var theme = _a.theme;
156
+ return theme.spacing.spacingE;
157
+ }, function (_a) {
158
+ var theme = _a.theme;
159
+ return theme.spacing.spacingD;
160
+ });
131
161
  exports.default = DesktopHeadlessModal;
132
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
162
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.179",
3
+ "version": "2.2.181",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.179]
2
+ ## [v2.2.181]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1310] VIDEO: replay & endtime
6
+ * [PDS-1312] HeadlessModal mBtn1Text 옵셔널 Prop 으로 수정 + xlarge 사이즈 옵션 추가