1 | "use strict";
|
2 | var __importStar = (this && this.__importStar) || function (mod) {
|
3 | if (mod && mod.__esModule) return mod;
|
4 | var result = {};
|
5 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
6 | result["default"] = mod;
|
7 | return result;
|
8 | };
|
9 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
10 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
11 | };
|
12 | Object.defineProperty(exports, "__esModule", { value: true });
|
13 | const react_1 = __importStar(require("react"));
|
14 | const kbc_telemetry_1 = require("@kano/kbc-telemetry");
|
15 | const kbc_icons_1 = require("@kano/kbc-icons");
|
16 | const kbc_button_1 = __importDefault(require("@kano/kbc-button"));
|
17 | const kbc_intl_1 = require("@kano/kbc-intl");
|
18 | const context_1 = require("./context");
|
19 | const messages_1 = __importDefault(require("./messages"));
|
20 | class DialogProvider extends react_1.Component {
|
21 | constructor() {
|
22 | super(...arguments);
|
23 | this.state = {
|
24 | show: false,
|
25 | };
|
26 | this.hideDialog = () => {
|
27 | this.setState({
|
28 | show: false,
|
29 | });
|
30 | };
|
31 | this.showDialog = () => {
|
32 | this.setState({
|
33 | show: true,
|
34 | });
|
35 | };
|
36 | }
|
37 | render() {
|
38 | const values = {
|
39 | dialog: Object.assign({
|
40 | hideDialog: this.hideDialog,
|
41 | showDialog: this.showDialog,
|
42 | }, this.state)
|
43 | };
|
44 | return (react_1.default.createElement(context_1.DialogContext.Provider, { value: values }, this.props.children || null));
|
45 | }
|
46 | }
|
47 | exports.default = DialogProvider;
|
48 | const KbcDialogComp = ({ config, modifier = 'default', title, message, children, backdrop = true, onConfirm, onCancel, onClose, dismissOnBackdrop = true, tracking }) => {
|
49 | const intl = kbc_intl_1.useIntl();
|
50 | react_1.useEffect(() => {
|
51 | const dialog = document.getElementById('dialog');
|
52 | if (dialog && dismissOnBackdrop) {
|
53 | dialog.addEventListener('click', handleClick);
|
54 | return () => { dialog.removeEventListener('click', handleClick); };
|
55 | }
|
56 | });
|
57 | const handleClick = (e) => {
|
58 | if (e.target.id !== 'dialog')
|
59 | return;
|
60 | cancelHandler();
|
61 | };
|
62 | const close = () => {
|
63 | config.hideDialog();
|
64 | onClose ? onClose() : null;
|
65 | };
|
66 | const confirmHandler = () => {
|
67 | tracking.trackEvent({ event: 'confirm_dialog', action: 'click' });
|
68 | close();
|
69 | onConfirm ? onConfirm() : null;
|
70 | };
|
71 | const cancelHandler = () => {
|
72 | tracking.trackEvent({ event: 'cancel_dialog', action: 'click' });
|
73 | close();
|
74 | onCancel ? onCancel() : null;
|
75 | };
|
76 | return config.show ? (react_1.default.createElement("div", { id: "dialog", className: `dialog${backdrop ? ' dialog--backdrop' : ''}` },
|
77 | react_1.default.createElement("div", { className: `dialog__container dialog__container--${modifier}` }, children ? (react_1.default.createElement(react_1.default.Fragment, null, children)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
78 | react_1.default.createElement("header", { className: "dialog__header" },
|
79 | react_1.default.createElement("h4", { className: "dialog__header-title" }, title),
|
80 | react_1.default.createElement("a", { onClick: cancelHandler, className: "dialog__close btn--close" },
|
81 | react_1.default.createElement(kbc_icons_1.KbcIcon, { name: "Close22", size: "base" }))),
|
82 | react_1.default.createElement("div", { className: "dialog__body" }, message && message),
|
83 | react_1.default.createElement("div", { className: "dialog__actions" },
|
84 | react_1.default.createElement(kbc_button_1.default, { text: intl.formatMessage(Object.assign({}, messages_1.default.cancel)), onClick: cancelHandler, color: "kano-orange" }),
|
85 | react_1.default.createElement(kbc_button_1.default, { text: intl.formatMessage(Object.assign({}, messages_1.default.confirm)), onClick: confirmHandler, color: "kano-orange" }))))))) : null;
|
86 | };
|
87 | const KbcDialog = kbc_telemetry_1.track({ module: 'kbc-dialog' })(KbcDialogComp);
|
88 | exports.KbcDialog = KbcDialog;
|
89 |
|
\ | No newline at end of file |