@botonic/react
Version:
Build Chatbots using React
45 lines • 3.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PersistentMenu = exports.OpenedPersistentMenu = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const menuButton_svg_1 = tslib_1.__importDefault(require("../../assets/menuButton.svg"));
const button_1 = require("../../components/button");
const constants_1 = require("../../constants");
const contexts_1 = require("../../contexts");
const conditional_animation_1 = require("../components/conditional-animation");
const hooks_1 = require("../hooks");
const common_1 = require("./common");
const ButtonsContainer = styled_components_1.default.div `
position: absolute;
z-index: 2;
width: 100%;
bottom: 0;
text-align: center;
`;
const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
const { ref, isComponentVisible } = (0, hooks_1.useComponentVisible)(true, onClick);
const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
const CustomPersistentMenu = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu, undefined);
let closeLabel = 'Cancel';
try {
closeLabel = options.filter(opt => opt.closeLabel !== undefined)[0]
.closeLabel;
}
catch (e) { }
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, role: constants_1.ROLES.PERSISTENT_MENU }, { children: isComponentVisible && CustomPersistentMenu ? ((0, jsx_runtime_1.jsx)(CustomPersistentMenu, { onClick: onClick, options: options })) : ((0, jsx_runtime_1.jsxs)(ButtonsContainer, { children: [Object.values(options).map((e, i) => {
return (e.label && ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ onClick: onClick, url: e.url, target: e.target, webview: e.webview, payload: e.payload }, { children: e.label }), i)));
}), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ onClick: onClick, bottomRadius: borderRadius }, { children: closeLabel }))] })) })));
};
exports.OpenedPersistentMenu = OpenedPersistentMenu;
const PersistentMenu = ({ onClick, persistentMenu }) => {
const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
const persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
const CustomMenuButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: persistentMenuOptions ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? (0, jsx_runtime_1.jsx)(CustomMenuButton, {}) : (0, jsx_runtime_1.jsx)(common_1.Icon, { src: menuButton_svg_1.default }) })) })) : null }));
};
exports.PersistentMenu = PersistentMenu;
exports.default = exports.OpenedPersistentMenu;
//# sourceMappingURL=persistent-menu.js.map