pds-dev-kit-web 2.2.179 → 2.2.180
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.
|
@@ -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
5
|
size?: 'large' | 'medium' | 'small' | 'rlarge';
|
|
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;
|
|
@@ -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
|
-
|
|
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) {
|
|
@@ -128,5 +132,30 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
|
|
|
128
132
|
var scrollVisibleType = _a.scrollVisibleType;
|
|
129
133
|
return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
|
|
130
134
|
});
|
|
135
|
+
var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
136
|
+
var theme = _a.theme;
|
|
137
|
+
return theme.spacing.spacingB;
|
|
138
|
+
});
|
|
139
|
+
var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
140
|
+
var theme = _a.theme;
|
|
141
|
+
return theme.spacing.spacingB;
|
|
142
|
+
});
|
|
143
|
+
var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
144
|
+
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) {
|
|
145
|
+
var theme = _a.theme;
|
|
146
|
+
return theme.ui_cpnt_modal_border;
|
|
147
|
+
}, function (_a) {
|
|
148
|
+
var theme = _a.theme;
|
|
149
|
+
return theme.spacing.spacingD;
|
|
150
|
+
}, function (_a) {
|
|
151
|
+
var theme = _a.theme;
|
|
152
|
+
return theme.spacing.spacingE;
|
|
153
|
+
}, function (_a) {
|
|
154
|
+
var theme = _a.theme;
|
|
155
|
+
return theme.spacing.spacingE;
|
|
156
|
+
}, function (_a) {
|
|
157
|
+
var theme = _a.theme;
|
|
158
|
+
return theme.spacing.spacingD;
|
|
159
|
+
});
|
|
131
160
|
exports.default = DesktopHeadlessModal;
|
|
132
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
161
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
package/package.json
CHANGED
package/release-note.md
CHANGED