@botonic/react/lib/esm/webchat/components/persistent-menu.js

Build Chatbots using React

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useContext } from 'react';
import styled from 'styled-components';
import LogoMenu from '../../assets/menuButton.svg';
import { Button } from '../../components/button';
import { ROLES, WEBCHAT } from '../../constants';
import { WebchatContext } from '../../contexts';
import { ConditionalAnimation } from '../components/conditional-animation';
import { useComponentVisible } from '../hooks';
import { Icon } from './common';
const ButtonsContainer = styled.div `
  position: absolute;
  z-index: 2;
  width: 100%;
  bottom: 0;
  text-align: center;
`;
export const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
    const { ref, isComponentVisible } = useComponentVisible(true, onClick);
    const { getThemeProperty } = useContext(WebchatContext);
    const CustomPersistentMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu, undefined);
    let closeLabel = 'Cancel';
    try {
        closeLabel = options.filter(opt => opt.closeLabel !== undefined)[0]
            .closeLabel;
    }
    catch (e) { }
    return (_jsx("div", Object.assign({ ref: ref, role: ROLES.PERSISTENT_MENU }, { children: isComponentVisible && CustomPersistentMenu ? (_jsx(CustomPersistentMenu, { onClick: onClick, options: options })) : (_jsxs(ButtonsContainer, { children: [Object.values(options).map((e, i) => {
                    return (e.label && (_jsx(Button, Object.assign({ onClick: onClick, url: e.url, target: e.target, webview: e.webview, payload: e.payload }, { children: e.label }), i)));
                }), _jsx(Button, Object.assign({ onClick: onClick, bottomRadius: borderRadius }, { children: closeLabel }))] })) })));
};
export const PersistentMenu = ({ onClick, persistentMenu }) => {
    const { getThemeProperty } = useContext(WebchatContext);
    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
    const CustomMenuButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
    return (_jsx(_Fragment, { children: persistentMenuOptions ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ role: ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? _jsx(CustomMenuButton, {}) : _jsx(Icon, { src: LogoMenu }) })) })) : null }));
};
export default OpenedPersistentMenu;
//# sourceMappingURL=persistent-menu.js.map