@botonic/react
Version:
Build Chatbots using React
78 lines • 3.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useContext, useEffect } from 'react';
import Frame from 'react-frame-component';
import styled from 'styled-components';
import { COLORS, ROLES, WEBCHAT } from '../constants';
import { WebchatContext, WebviewRequestContext } from '../contexts';
const StyledWebview = styled.div `
position: absolute;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 100%;
background-color: ${COLORS.SOLID_WHITE};
z-index: 2;
border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
`;
const StyledWebviewHeader = styled.div `
text-align: right;
background-color: ${COLORS.WILD_SAND_WHITE};
border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
border-bottom: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
`;
const StyledCloseHeader = styled.div `
display: inline-block;
padding: 8px 12px;
cursor: pointer;
`;
const StyledWebviewContent = styled.div `
flex: 1;
overflow: auto;
`;
const StyledFrame = styled.iframe `
border-style: none;
width: 100%;
height: 100%;
`;
const WebviewMode = props => {
/*
Default mode is with divs.
Setting the prop "asframe" will render the webview inside an iframe.
Pros and Cons of this "asframe" mode are:
Pros: OAuth2 flows can be tested locally with an iframe.
Cons: We won't be able to visualize correctly css styles in botonic serve (although styles will work in production).
*/
const style = {
borderStyle: 'none',
width: '100%',
height: '100%',
};
if (props.asframe) {
return _jsx(Frame, Object.assign({ style: style }, { children: props.children }));
}
return _jsx("div", Object.assign({ style: style }, { children: props.children }));
};
export const WebviewHeader = () => {
const { closeWebview } = useContext(WebviewRequestContext);
const { getThemeProperty } = useContext(WebchatContext);
return (_jsx(StyledWebviewHeader, Object.assign({ role: ROLES.WEBVIEW_HEADER, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle)) }, { children: _jsx(StyledCloseHeader, Object.assign({ onClick: closeWebview }, { children: "\u2715" })) })));
};
export const WebviewContainer = props => {
const { webchatState } = useContext(WebchatContext);
const { closeWebview } = useContext(WebviewRequestContext);
const Webview = webchatState.webview;
const close = e => e.data === 'botonicCloseWebview' && closeWebview();
useEffect(() => {
if (window.addEventListener) {
window.addEventListener('message', close, false);
}
else if (window.attachEvent) {
// ie8
window.attachEvent('onmessage', close);
}
}, []);
return (_jsxs(StyledWebview, Object.assign({ role: ROLES.WEBVIEW, style: Object.assign({}, props.style) }, { children: [_jsx(WebviewHeader, { style: { flex: 'none' } }), _jsx(StyledWebviewContent, { children: typeof Webview === 'string' ? (_jsx(StyledFrame, { src: Webview })) : (_jsx(WebviewMode, { children: _jsx(Webview, {}) })) })] })));
};
//# sourceMappingURL=webview.js.map