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

Build Chatbots using React

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { INPUT } from '@botonic/core';
import { useContext } from 'react';
import { resolveImage } from '../../util/environment';
import { renderComponent } from '../../util/react';
import { generateWebviewUrlWithParams } from '../../util/webviews';
import { WebchatContext } from '../../webchat/context';
import { ButtonsDisabler } from '../buttons-disabler';
import { StyledButton, StyledUrlImage } from './styles';
export const Button = (props) => {
    var _a, _b;
    const { webchatState, openWebview, sendPayload, sendInput, updateMessage } = useContext(WebchatContext);
    const autoDisable = (_b = (_a = webchatState.theme) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.autodisable;
    const handleClick = event => {
        var _a, _b;
        event.preventDefault();
        const type = (_b = (_a = webchatState.theme) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.messageType;
        if (props.webview) {
            openWebview(props.webview, props.params);
        }
        else if (props.path) {
            type === INPUT.POSTBACK
                ? sendPayload(`__PATH_PAYLOAD__${props.path}`)
                : sendInput({
                    type: INPUT.TEXT,
                    data: String(props.children),
                    text: String(props.children),
                    payload: `__PATH_PAYLOAD__${props.path}`,
                });
        }
        else if (props.payload) {
            type === INPUT.POSTBACK
                ? sendPayload(props.payload)
                : sendInput({
                    type: INPUT.TEXT,
                    data: String(props.children),
                    text: String(props.children),
                    payload: props.payload,
                });
        }
        else if (props.url) {
            window.open(props.url, props.target || '_blank');
        }
        if (props.onClick) {
            props.onClick();
        }
        if (props.setDisabled) {
            props.setDisabled(true);
            const messageToUpdate = webchatState.messagesJSON.filter(m => m.id === props.parentId)[0];
            const updatedMsg = 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 = () => {
        var _a, _b;
        const themeButton = webchatState.theme.button;
        const urlIconEnabledProp = (_a = themeButton === null || themeButton === void 0 ? void 0 : themeButton.urlIcon) === null || _a === void 0 ? void 0 : _a.enable;
        const urlIconImage = (_b = themeButton === null || themeButton === void 0 ? void 0 : themeButton.urlIcon) === null || _b === void 0 ? void 0 : _b.image;
        const urlIcon = urlIconEnabledProp ? urlIconImage : undefined;
        const CustomButton = themeButton === null || themeButton === void 0 ? void 0 : themeButton.custom;
        if (CustomButton) {
            return (_jsx("div", Object.assign({ className: getClassName(true), onClick: e => handleClick(e) }, { children: _jsx(CustomButton, { children: props.children }) })));
        }
        return (_jsxs(StyledButton, Object.assign({ className: getClassName(), onClick: e => handleClick(e), disabled: props.disabled && autoDisable }, { children: [props.children, props.url && urlIcon && (_jsx(StyledUrlImage, { className: 'botonic-url-icon', src: resolveImage(urlIcon) }))] })));
    };
    const renderNode = () => {
        const disabledProps = ButtonsDisabler.constructNodeProps({
            disabled: props.disabled,
            disabledstyle: props.disabledstyle,
            autodisable: props.autodisable,
        });
        if (props.webview) {
            return (_jsx("button", Object.assign({ 
                // @ts-ignore
                // eslint-disable-next-line react/no-unknown-property
                url: generateWebviewUrlWithParams(props.webview, props.params) }, disabledProps, { children: props.children })));
        }
        if (props.path) {
            const payload = `__PATH_PAYLOAD__${props.path}`;
            return (
            // @ts-ignore
            // eslint-disable-next-line react/no-unknown-property
            _jsx("button", Object.assign({ payload: payload }, disabledProps, { children: props.children })));
        }
        if (props.payload) {
            return (
            // @ts-ignore
            // eslint-disable-next-line react/no-unknown-property
            _jsx("button", Object.assign({ payload: props.payload }, disabledProps, { children: props.children })));
        }
        if (props.url) {
            return (
            // @ts-ignore
            // eslint-disable-next-line react/no-unknown-property
            _jsx("button", Object.assign({ 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 renderComponent({ renderBrowser, renderNode });
};
Button.serialize = (buttonProps) => {
    const payload = buttonProps.path
        ? `__PATH_PAYLOAD__${buttonProps.path}`
        : buttonProps.payload;
    return {
        button: Object.assign({ payload, url: buttonProps.url, target: buttonProps.target, webview: buttonProps.webview && String(buttonProps.webview), title: buttonProps.children && String(buttonProps.children) }, ButtonsDisabler.withDisabledProps(buttonProps)),
    };
};
//# sourceMappingURL=index.js.map