@botonic/react/lib/esm/components/multichannel/multichannel-carousel.js

Build Chatbots using React

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { isWhatsapp } from '@botonic/core';
import React, { useContext } from 'react';
import { RequestContext } from '../../contexts';
import { Carousel } from '../carousel';
import { MultichannelText } from './multichannel-text';
import { getFilteredElements, isMultichannelButton, isNodeKind, } from './multichannel-utils';
export const MultichannelCarousel = props => {
    const requestContext = useContext(RequestContext);
    const getButtons = node => [].concat(getFilteredElements(node, isMultichannelButton));
    if (isWhatsapp(requestContext.session)) {
        const elements = props.children
            .map(e => e.props.children)
            .map((element, i) => {
            let imageProps = undefined;
            let title = undefined;
            let subtitle = undefined;
            const buttons = [];
            for (const node of element) {
                if (isNodeKind(node, 'Pic')) {
                    imageProps = node.props;
                }
                if (isNodeKind(node, 'Title')) {
                    title = node.props.children;
                }
                if (isNodeKind(node, 'Subtitle')) {
                    subtitle = node.props.children;
                }
                if (isNodeKind(node, 'MultichannelButton')) {
                    buttons.push(node);
                }
                //TODO support fragment containing an array
                if (Array.isArray(node)) {
                    buttons.push(getButtons(node));
                }
            }
            let header = '';
            if (props.showTitle && title) {
                header += `${title ? `**${title}**` : ''}`;
                if (title && subtitle) {
                    header += ' ';
                }
            }
            if (props.showSubtitle && subtitle) {
                header += `_${subtitle}_`;
            }
            return (
            // TODO: newkey only for 1 nested button
            _jsxs(MultichannelText, Object.assign({ newkey: i, indexMode: props.indexMode, buttonsAsText: props.buttonsAsText }, { children: [header || null, buttons] }), i));
            // TODO: in the future, this would be the default mode
            // } else {
            // return (
            //   <React.Fragment key={i}>
            //     <Image
            //       src={imageSrc}
            //       caption={carouselToCaption(
            //         i + 1,
            //         title,
            //         subtitle,
            //         imageSrc,
            //         buttonProps
            //       )}
            //     ></Image>
            //   </React.Fragment>
            // )
            // }
        });
        return elements;
    }
    else {
        return _jsx(Carousel, Object.assign({}, props, { children: props.children }));
    }
};
//# sourceMappingURL=multichannel-carousel.js.map