@botonic/react/lib/cjs/components/button/index.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const environment_1 = require("../../util/environment");
const react_2 = require("../../util/react");
const webviews_1 = require("../../util/webviews");
const context_1 = require("../../webchat/context");
const buttons_disabler_1 = require("../buttons-disabler");
const constants_1 = require("../constants");
const styles_1 = require("./styles");
const Button = (props) => {
    const { webchatState, openWebview, sendPayload, sendInput, updateMessage } = (0, react_1.useContext)(context_1.WebchatContext);
    const autoDisable = webchatState.theme?.button?.autodisable || props.autodisable;
    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: handleClick is a complex function
    const handleClick = event => {
        event.preventDefault();
        const type = webchatState.theme?.button?.messageType;
        if (props.webview) {
            openWebview(props.webview, props.params);
        }
        else if (props.path) {
            type === core_1.INPUT.POSTBACK
                ? sendPayload(`__PATH_PAYLOAD__${props.path}`)
                : sendInput({
                    type: core_1.INPUT.TEXT,
                    data: String(props.children),
                    text: String(props.children),
                    payload: `__PATH_PAYLOAD__${props.path}`,
                });
        }
        else if (props.payload) {
            type === core_1.INPUT.POSTBACK
                ? sendPayload(props.payload)
                : sendInput({
                    type: core_1.INPUT.TEXT,
                    data: String(props.children),
                    text: String(props.children),
                    payload: props.payload,
                });
        }
        else if (props.url) {
            const defaultTarget = (0, environment_1.isInWebviewApp)() ? '_self' : '_blank';
            window.open(props.url, props.target || defaultTarget);
        }
        if (props.onClick) {
            props.onClick();
        }
        if (props.setDisabled) {
            props.setDisabled(true);
            const messageToUpdate = webchatState.messagesJSON.filter(m => m.id === props.parentId)[0];
            const updatedMsg = buttons_disabler_1.ButtonsDisabler.getUpdatedMessage(messageToUpdate);
            updateMessage(updatedMsg);
        }
    };
    const getClassName = (isCustom = false) => {
        if (isCustom) {
            return 'button-custom';
        }
        if (props.payload) {
            return 'button-payload';
        }
        if (props.url) {
            return 'button-url';
        }
        if (props.webview) {
            return 'button-webview';
        }
        if (props.path) {
            return 'button-path';
        }
        return '';
    };
    const renderBrowser = () => {
        const themeButton = webchatState.theme.button;
        const urlIconEnabledProp = themeButton?.urlIcon?.enable;
        const urlIconImage = themeButton?.urlIcon?.image;
        const urlIcon = urlIconEnabledProp ? urlIconImage : undefined;
        const CustomButton = themeButton?.custom;
        if (CustomButton) {
            return ((0, jsx_runtime_1.jsx)("div", { className: getClassName(true), onClick: e => handleClick(e), children: (0, jsx_runtime_1.jsx)(CustomButton, { children: props.children }) }));
        }
        return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { className: getClassName(), onClick: e => handleClick(e), disabled: props.disabled && autoDisable, children: [props.children, props.url && urlIcon && ((0, jsx_runtime_1.jsx)(styles_1.StyledUrlImage, { className: 'botonic-url-icon', src: (0, environment_1.resolveImage)(urlIcon) }))] }));
    };
    const renderNode = () => {
        const disabledProps = buttons_disabler_1.ButtonsDisabler.constructNodeProps({
            disabled: props.disabled,
            disabledstyle: props.disabledstyle,
            autodisable: props.autodisable,
        });
        if (props.webview) {
            return ((0, jsx_runtime_1.jsx)("button", { 
                // @ts-expect-error
                url: (0, webviews_1.generateWebviewUrlWithParams)(props.webview, props.params), ...disabledProps, children: props.children }));
        }
        if (props.path) {
            const payload = `__PATH_PAYLOAD__${props.path}`;
            return (
            // @ts-expect-error
            (0, jsx_runtime_1.jsx)("button", { payload: payload, ...disabledProps, children: props.children }));
        }
        if (props.payload) {
            return (
            // @ts-expect-error
            (0, jsx_runtime_1.jsx)("button", { payload: props.payload, ...disabledProps, children: props.children }));
        }
        if (props.url) {
            return (
            // @ts-expect-error
            (0, jsx_runtime_1.jsx)("button", { url: props.url, target: props.target, ...disabledProps, children: props.children }));
        }
        if (props.onClick) {
            return null;
        }
        throw new Error('Button missing payload, path, webview, url or onClick');
    };
    return (0, react_2.renderComponent)({ renderBrowser, renderNode });
};
exports.Button = Button;
exports.Button.displayName = constants_1.COMPONENT_DISPLAY_NAMES.Button;
exports.Button.serialize = (buttonProps) => {
    const payload = buttonProps.path
        ? `__PATH_PAYLOAD__${buttonProps.path}`
        : buttonProps.payload;
    return {
        button: {
            payload,
            url: buttonProps.url,
            target: buttonProps.target,
            webview: buttonProps.webview && String(buttonProps.webview),
            title: buttonProps.children && String(buttonProps.children),
            ...buttons_disabler_1.ButtonsDisabler.withDisabledProps(buttonProps),
        },
    };
};
//# sourceMappingURL=index.js.map