@xfers/design-system 4.7.1-dev.b5d69aff95 → 4.8.0-dev.e9ccade8c2
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.
|
@@ -7,24 +7,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
7
7
|
var react_1 = require("react");
|
|
8
8
|
var styled_1 = require("@emotion/styled");
|
|
9
9
|
var Typography_1 = require("src/components/Typography");
|
|
10
|
+
var Divider_1 = require("src/components/Divider");
|
|
10
11
|
var Cross_1 = require("src/icons/Cross");
|
|
11
12
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
13
|
+
var spacing_1 = require("src/constants/spacing");
|
|
12
14
|
var ModalContent = function (_a) {
|
|
13
|
-
var onClose = _a.onClose, title = _a.title, children = _a.children, footer = _a.footer, disabledCloseIcon = _a.disabledCloseIcon, className = _a.className;
|
|
15
|
+
var onClose = _a.onClose, icon = _a.icon, title = _a.title, children = _a.children, footer = _a.footer, disabledCloseIcon = _a.disabledCloseIcon, className = _a.className;
|
|
14
16
|
var neutral = (0, ThemeContext_1.useTheme)().neutral;
|
|
15
17
|
return (react_1.default.createElement(ModalContentWrapper, { className: className },
|
|
16
|
-
(title || !disabledCloseIcon) && (react_1.default.createElement(ModalHeader,
|
|
17
|
-
react_1.default.createElement(
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
(icon || title || !disabledCloseIcon) && (react_1.default.createElement(ModalHeader, { hasIcon: Boolean(icon) },
|
|
19
|
+
react_1.default.createElement(TitleContainer, null,
|
|
20
|
+
react_1.default.createElement(Title, null,
|
|
21
|
+
icon,
|
|
22
|
+
react_1.default.createElement(Typography_1.H2, null, title || '')),
|
|
23
|
+
!disabledCloseIcon && (react_1.default.createElement(Close, { onClick: function () { return onClose(); } },
|
|
24
|
+
react_1.default.createElement(Cross_1.default, { color: neutral.text, width: 18 })))),
|
|
25
|
+
react_1.default.createElement(Divider_1.default, null))),
|
|
20
26
|
react_1.default.createElement(ModalBody, null, children),
|
|
21
27
|
footer && react_1.default.createElement(ModalFooter, null, footer)));
|
|
22
28
|
};
|
|
23
29
|
exports.default = ModalContent;
|
|
24
|
-
var ModalHeader = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
+
var ModalHeader = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n ", "\n padding-left: ", ";\n padding-right: ", ";\n"])), function (props) {
|
|
31
|
+
return props.hasIcon
|
|
32
|
+
? "\n height: 86px;\n "
|
|
33
|
+
: "\n height: 73px;\n ";
|
|
34
|
+
}, spacing_1.EXTRA_LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING);
|
|
35
|
+
var ModalBody = (0, styled_1.default)(Typography_1.P1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-bottom: 1px solid #e8e8e8;\n padding-top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n"], ["\n border-bottom: 1px solid #e8e8e8;\n padding-top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n"])), spacing_1.LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING);
|
|
36
|
+
var ModalFooter = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: #f6f7f9;\n display: flex;\n justify-content: flex-end;\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n"], ["\n background: #f6f7f9;\n display: flex;\n justify-content: flex-end;\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n"])), spacing_1.EXTRA_LARGE_SPACING, spacing_1.SMALL_SPACING, spacing_1.SMALL_SPACING);
|
|
37
|
+
var TitleContainer = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
38
|
+
var Title = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n user-select: none;\n & :not(:last-child) {\n margin-right: 10px;\n }\n"], ["\n display: flex;\n align-items: center;\n user-select: none;\n & :not(:last-child) {\n margin-right: 10px;\n }\n"])));
|
|
39
|
+
var Close = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: pointer;\n padding-left: 5px;\n padding-right: 5px;\n margin-right: -5px;\n"], ["\n cursor: pointer;\n padding-left: 5px;\n padding-right: 5px;\n margin-right: -5px;\n"])));
|
|
40
|
+
var ModalContentWrapper = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: calc(100vw - 32px);\n max-width: 400px;\n background: white;\n box-shadow: 0px 4px 10px rgba(170, 170, 170, 0.25);\n border-radius: 5px;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n margin-bottom: 1.7vh;\n position: absolute;\n top: 6.8vh;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n width: calc(100vw - 32px);\n max-width: 400px;\n background: white;\n box-shadow: 0px 4px 10px rgba(170, 170, 170, 0.25);\n border-radius: 5px;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n margin-bottom: 1.7vh;\n position: absolute;\n top: 6.8vh;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
41
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
30
42
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,wDAAkD;AAClD,yCAAuC;AACvC,uDAAiD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,wDAAkD;AAClD,kDAA4C;AAC5C,yCAAuC;AACvC,uDAAiD;AACjD,iDAI8B;AAY9B,IAAM,YAAY,GAAG,UAAC,EAQF;QAPlB,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,iBAAiB,uBAAA,EACjB,SAAS,eAAA;IAED,IAAA,OAAO,GAAK,IAAA,uBAAQ,GAAE,QAAf,CAAe;IAE9B,OAAO,CACL,8BAAC,mBAAmB,IAAC,SAAS,EAAE,SAAS;QACtC,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CACxC,8BAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC;YACjC,8BAAC,cAAc;gBACb,8BAAC,KAAK;oBACH,IAAI;oBACL,8BAAC,eAAE,QAAE,KAAK,IAAI,EAAE,CAAM,CAChB;gBACP,CAAC,iBAAiB,IAAI,CACrB,8BAAC,KAAK,IAAC,OAAO,EAAE,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS;oBAC7B,8BAAC,eAAS,IAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,GAAI,CACvC,CACT,CACc;YACjB,8BAAC,iBAAO,OAAG,CACC,CACf;QACD,8BAAC,SAAS,QAAE,QAAQ,CAAa;QAChC,MAAM,IAAI,8BAAC,WAAW,QAAE,MAAM,CAAe,CAC1B,CACvB,CAAA;AACH,CAAC,CAAA;AACD,kBAAe,YAAY,CAAA;AAE3B,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,8HAAsB,MAChD,EAOC,oBACa,EAAmB,sBAClB,EAAmB,KACrC,KAVG,UAAA,KAAK;IACL,OAAA,KAAK,CAAC,OAAO;QACX,CAAC,CAAC,6BAEH;QACC,CAAC,CAAC,6BAEH;AAND,CAMC,EACa,6BAAmB,EAClB,6BAAmB,CACrC,CAAA;AAED,IAAM,SAAS,GAAG,IAAA,gBAAM,EAAC,eAAE,CAAC,0MAAA,wDAEX,EAAa,qBACZ,EAAmB,sBAClB,EAAmB,uBAClB,EAAmB,KACtC,KAJgB,uBAAa,EACZ,6BAAmB,EAClB,6BAAmB,EAClB,6BAAmB,CACtC,CAAA;AAED,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,sNAAA,6FAIX,EAAmB,oBACrB,EAAa,uBACV,EAAa,KAChC,KAHkB,6BAAmB,EACrB,uBAAa,EACV,uBAAa,CAChC,CAAA;AAED,IAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,qKAAA,kGAKhC,IAAA,CAAA;AAED,IAAM,KAAK,GAAG,gBAAM,CAAC,GAAG,8LAAA,2HAOvB,IAAA,CAAA;AAED,IAAM,KAAK,GAAG,gBAAM,CAAC,GAAG,+JAAA,4FAKvB,IAAA,CAAA;AAED,IAAM,mBAAmB,GAAG,gBAAM,CAAC,GAAG,wYAAA,qUAarC,IAAA,CAAA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type ModalContentProps = {
|
|
3
3
|
onClose: () => void;
|
|
4
|
-
icon
|
|
4
|
+
icon: React.ReactNode | false;
|
|
5
5
|
title?: React.ReactNode;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
footer: React.ReactNode;
|
|
8
8
|
disabledCloseIcon?: boolean;
|
|
9
9
|
className?: string;
|
|
10
10
|
};
|
|
11
|
-
declare const ModalContent: ({ onClose, title, children, footer, disabledCloseIcon, className
|
|
11
|
+
declare const ModalContent: ({ onClose, icon, title, children, footer, disabledCloseIcon, className }: ModalContentProps) => React.JSX.Element;
|
|
12
12
|
export default ModalContent;
|