@botonic/react
Version:
Build Chatbots using React
56 lines • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Element = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const react_1 = require("../util/react");
const index_1 = require("./button/index");
const ElementContainer = styled_components_1.default.div `
display: flex;
flex-direction: column;
width: ${constants_1.WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;
margin-right: ${constants_1.WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT}px;
border-radius: 6px;
border: 1px solid ${constants_1.COLORS.SEASHELL_WHITE};
overflow: hidden;
justify-content: space-between;
`;
const Element = (props) => {
const renderBrowser = () => ((0, jsx_runtime_1.jsx)(ElementContainer, { children: props.children }));
// @ts-ignore
const renderNode = () => (0, jsx_runtime_1.jsx)("element", { children: props.children });
return (0, react_1.renderComponent)({ renderBrowser, renderNode });
};
exports.Element = Element;
exports.Element.serialize = elementProps => {
const element = Object.assign({}, ...elementProps.children
.filter(c => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.name) !== index_1.Button.name; })
.map(c => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.serialize) && c.type.serialize(c.props); }));
// When we are serializer buttons from backend, we are receiving the data
// as an array of buttons, so we have to keep robust with serve and deal with arrays
element.buttons = [
...elementProps.children
.filter(c => {
var _a;
if (c instanceof Array)
return true;
return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.name) === index_1.Button.name;
})
.map(b => {
var _a;
if (b instanceof Array) {
b.map(bb => { var _a, _b, _c; return (_c = (_b = (_a = bb === null || bb === void 0 ? void 0 : bb.type) === null || _a === void 0 ? void 0 : _a.serialize) === null || _b === void 0 ? void 0 : _b.call(_a, bb.props)) === null || _c === void 0 ? void 0 : _c.button; });
}
return (_a = b === null || b === void 0 ? void 0 : b.type) === null || _a === void 0 ? void 0 : _a.serialize(b.props).button;
}),
];
// When we have the buttons from backend, we have all buttons inside an array on the first position
// of another array in element['buttons'] we want that element['buttons'] to be an array of buttons,
// not an array of another array of buttons
if (element.buttons[0] instanceof Array)
element.buttons = element.buttons[0];
return element;
};
//# sourceMappingURL=element.js.map