@kano/kbc-dialog/lib/provider.js

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const kbc_telemetry_1 = require("@kano/kbc-telemetry");
const kbc_icons_1 = require("@kano/kbc-icons");
const kbc_button_1 = __importDefault(require("@kano/kbc-button"));
const kbc_intl_1 = require("@kano/kbc-intl");
const context_1 = require("./context");
const messages_1 = __importDefault(require("./messages"));
class DialogProvider extends react_1.Component {
    constructor() {
        super(...arguments);
        this.state = {
            show: false,
        };
        this.hideDialog = () => {
            this.setState({
                show: false,
            });
        };
        this.showDialog = () => {
            this.setState({
                show: true,
            });
        };
    }
    render() {
        const values = {
            dialog: Object.assign({
                hideDialog: this.hideDialog,
                showDialog: this.showDialog,
            }, this.state)
        };
        return (react_1.default.createElement(context_1.DialogContext.Provider, { value: values }, this.props.children || null));
    }
}
exports.default = DialogProvider;
const KbcDialogComp = ({ config, modifier = 'default', title, message, children, backdrop = true, onConfirm, onCancel, onClose, dismissOnBackdrop = true, tracking }) => {
    const intl = kbc_intl_1.useIntl();
    react_1.useEffect(() => {
        const dialog = document.getElementById('dialog');
        if (dialog && dismissOnBackdrop) {
            dialog.addEventListener('click', handleClick);
            return () => { dialog.removeEventListener('click', handleClick); };
        }
    });
    const handleClick = (e) => {
        if (e.target.id !== 'dialog')
            return;
        cancelHandler();
    };
    const close = () => {
        config.hideDialog();
        onClose ? onClose() : null;
    };
    const confirmHandler = () => {
        tracking.trackEvent({ event: 'confirm_dialog', action: 'click' });
        close();
        onConfirm ? onConfirm() : null;
    };
    const cancelHandler = () => {
        tracking.trackEvent({ event: 'cancel_dialog', action: 'click' });
        close();
        onCancel ? onCancel() : null;
    };
    return config.show ? (react_1.default.createElement("div", { id: "dialog", className: `dialog${backdrop ? ' dialog--backdrop' : ''}` },
        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,
            react_1.default.createElement("header", { className: "dialog__header" },
                react_1.default.createElement("h4", { className: "dialog__header-title" }, title),
                react_1.default.createElement("a", { onClick: cancelHandler, className: "dialog__close btn--close" },
                    react_1.default.createElement(kbc_icons_1.KbcIcon, { name: "Close22", size: "base" }))),
            react_1.default.createElement("div", { className: "dialog__body" }, message && message),
            react_1.default.createElement("div", { className: "dialog__actions" },
                react_1.default.createElement(kbc_button_1.default, { text: intl.formatMessage(Object.assign({}, messages_1.default.cancel)), onClick: cancelHandler, color: "kano-orange" }),
                react_1.default.createElement(kbc_button_1.default, { text: intl.formatMessage(Object.assign({}, messages_1.default.confirm)), onClick: confirmHandler, color: "kano-orange" }))))))) : null;
};
const KbcDialog = kbc_telemetry_1.track({ module: 'kbc-dialog' })(KbcDialogComp);
exports.KbcDialog = KbcDialog;
//# sourceMappingURL=provider.js.map