@botonic/react/lib/esm/components/element.js

Build Chatbots using React

import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import { COLORS, WEBCHAT } from '../constants';
import { renderComponent } from '../util/react';
import { Button } from './button/index';
const ElementContainer = styled.div `
  display: flex;
  flex-direction: column;
  width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;
  margin-right: ${WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT}px;
  border-radius: 6px;
  border: 1px solid ${COLORS.SEASHELL_WHITE};
  overflow: hidden;
  justify-content: space-between;
`;
export const Element = (props) => {
    const renderBrowser = () => (_jsx(ElementContainer, { children: props.children }));
    // @ts-ignore
    const renderNode = () => _jsx("element", { children: props.children });
    return renderComponent({ renderBrowser, renderNode });
};
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) !== 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) === 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