@botonic/react
Version:
Build Chatbots using React
145 lines • 7.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const contexts_1 = require("../contexts");
const react_2 = require("../util/react");
const buttons_disabler_1 = require("./buttons-disabler");
const StyledButton = styled_components_1.default.button `
display: flex;
width: 100%;
max-height: 80px;
font-size: 14px;
text-align: center;
align-content: center;
justify-content: center;
padding: 12px 32px;
font-family: inherit;
border: none;
border: 1px solid ${constants_1.COLORS.SEASHELL_WHITE};
cursor: pointer;
outline: 0;
border-top-right-radius: ${props => props.top || '0px'};
border-top-left-radius: ${props => props.top || '0px'};
border-bottom-right-radius: ${props => props.bottom || '0px'};
border-bottom-left-radius: ${props => props.bottom || '0px'};
overflow: hidden;
`;
const Button = props => {
const { webchatState, openWebview, sendPayload, sendInput, getThemeProperty, updateMessage, } = (0, react_1.useContext)(contexts_1.WebchatContext);
const [hover, setHover] = (0, react_1.useState)(false);
const { theme } = webchatState;
const { autoDisable, disabledStyle } = buttons_disabler_1.ButtonsDisabler.resolveDisabling(webchatState.theme, props);
const handleClick = event => {
event.preventDefault();
const type = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.buttonMessageType, core_1.INPUT.TEXT);
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, {
autoDisable,
disabledStyle,
});
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 buttonStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.buttonStyle);
const CustomButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customButton);
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 }) })));
}
const buttonBgColor = hover
? getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.buttonHoverBackground, constants_1.COLORS.CONCRETE_WHITE)
: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.buttonStyleBackground, constants_1.COLORS.SOLID_WHITE);
const buttonTextColor = hover
? getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.buttonHoverTextColor, constants_1.COLORS.SOLID_BLACK)
: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.buttonStyleColor, constants_1.COLORS.SOLID_BLACK);
return ((0, jsx_runtime_1.jsx)(StyledButton, Object.assign({ className: getClassName(), theme: theme, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: e => handleClick(e), style: Object.assign(Object.assign(Object.assign({}, buttonStyle), { color: buttonTextColor, backgroundColor: buttonBgColor }), (props.disabled && autoDisable && disabledStyle)), bottom: props.bottomRadius }, { children: props.children })));
};
const renderNode = () => {
const disabledProps = buttons_disabler_1.ButtonsDisabler.constructNodeProps(props);
if (props.webview) {
const Webview = props.webview;
let params = '';
if (props.params)
params = (0, core_1.params2queryString)(props.params);
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ url: `/webviews/${Webview.name}?${params}` }, disabledProps, { children: props.children })));
}
else if (props.path) {
const payload = `__PATH_PAYLOAD__${props.path}`;
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ payload: payload }, disabledProps, { children: props.children })));
}
else if (props.payload) {
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ payload: props.payload }, disabledProps, { children: props.children })));
}
else if (props.url) {
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ url: props.url, target: props.target }, disabledProps, { children: props.children })));
}
else if (props.onClick) {
return null;
}
throw new Error('Button missing payload, path, webviews, url or onClick');
};
return (0, react_2.renderComponent)({ renderBrowser, renderNode });
};
exports.Button = Button;
exports.Button.serialize = buttonProps => {
let payload = buttonProps.payload;
if (buttonProps.path)
payload = `__PATH_PAYLOAD__${buttonProps.path}`;
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=button.js.map