@botonic/react/lib/cjs/components/reply.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Reply = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const react_2 = require("../util/react");
const context_1 = require("../webchat/context");
const StyledButton = styled_components_1.default.button `
  width: 100%;
  padding: 4px 8px;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid ${props => { var _a; return (_a = props.theme.brand) === null || _a === void 0 ? void 0 : _a.color; }};
  color: ${props => { var _a; return (_a = props.theme.brand) === null || _a === void 0 ? void 0 : _a.color; }};
  cursor: pointer;
  outline: 0;
`;
const Reply = (props) => {
    const { sendText, getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
    const handleClick = (event) => {
        event.preventDefault();
        if (props.children) {
            let payload = props.payload;
            if (props.path)
                payload = `__PATH_PAYLOAD__${props.path}`;
            sendText(props.children, payload);
        }
    };
    const renderBrowser = () => {
        const replyStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.replyStyle);
        const CustomReply = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customReply);
        if (CustomReply) {
            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: e => handleClick(e) }, { children: (0, jsx_runtime_1.jsx)(CustomReply, { children: props.children }) })));
        }
        return ((0, jsx_runtime_1.jsx)(StyledButton, Object.assign({ style: Object.assign({}, replyStyle), onClick: e => handleClick(e) }, { children: props.children })));
    };
    const renderNode = () => {
        if (props.path) {
            const payload = `__PATH_PAYLOAD__${props.path}`;
            // @ts-ignore
            // eslint-disable-next-line react/no-unknown-property
            return (0, jsx_runtime_1.jsx)("reply", Object.assign({ payload: payload }, { children: props.children }));
        }
        // @ts-ignore
        // eslint-disable-next-line react/no-unknown-property
        return (0, jsx_runtime_1.jsx)("reply", Object.assign({ payload: props.payload }, { children: props.children }));
    };
    return (0, react_2.renderComponent)({ renderBrowser, renderNode });
};
exports.Reply = Reply;
exports.Reply.serialize = (replyProps) => {
    let payload = replyProps.payload;
    if (replyProps.path)
        payload = `__PATH_PAYLOAD__${replyProps.path}`;
    return { reply: { title: replyProps.children, payload } };
};
//# sourceMappingURL=reply.js.map