@botonic/react
Version:
Build Chatbots using React
134 lines • 6.45 kB
JavaScript
;
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 styles_1 = require("./styles");
const Button = (props) => {
var _a, _b;
const { webchatState, openWebview, sendPayload, sendInput, updateMessage } = (0, react_1.useContext)(context_1.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 === 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) {
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 = 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 = () => {
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 ((0, jsx_runtime_1.jsx)("div", Object.assign({ 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, Object.assign({ 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", Object.assign({
// @ts-ignore
// eslint-disable-next-line react/no-unknown-property
url: (0, webviews_1.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
(0, jsx_runtime_1.jsx)("button", Object.assign({ payload: payload }, disabledProps, { children: props.children })));
}
if (props.payload) {
return (
// @ts-ignore
// eslint-disable-next-line react/no-unknown-property
(0, jsx_runtime_1.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
(0, jsx_runtime_1.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 (0, react_2.renderComponent)({ renderBrowser, renderNode });
};
exports.Button = Button;
exports.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) }, buttons_disabler_1.ButtonsDisabler.withDisabledProps(buttonProps)),
};
};
//# sourceMappingURL=index.js.map