@botonic/react
Version:
Build Chatbots using React
84 lines • 4.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebviewContainer = exports.WebviewHeader = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_frame_component_1 = tslib_1.__importDefault(require("react-frame-component"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const contexts_1 = require("../contexts");
const StyledWebview = styled_components_1.default.div `
position: absolute;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 100%;
background-color: ${constants_1.COLORS.SOLID_WHITE};
z-index: 2;
border-radius: ${constants_1.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
`;
const StyledWebviewHeader = styled_components_1.default.div `
text-align: right;
background-color: ${constants_1.COLORS.WILD_SAND_WHITE};
border-top: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
border-bottom: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
border-radius: ${constants_1.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
`;
const StyledCloseHeader = styled_components_1.default.div `
display: inline-block;
padding: 8px 12px;
cursor: pointer;
`;
const StyledWebviewContent = styled_components_1.default.div `
flex: 1;
overflow: auto;
`;
const StyledFrame = styled_components_1.default.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 (0, jsx_runtime_1.jsx)(react_frame_component_1.default, Object.assign({ style: style }, { children: props.children }));
}
return (0, jsx_runtime_1.jsx)("div", Object.assign({ style: style }, { children: props.children }));
};
const WebviewHeader = () => {
const { closeWebview } = (0, react_1.useContext)(contexts_1.RequestContext);
const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
return ((0, jsx_runtime_1.jsx)(StyledWebviewHeader, Object.assign({ role: constants_1.ROLES.WEBVIEW_HEADER, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle)) }, { children: (0, jsx_runtime_1.jsx)(StyledCloseHeader, Object.assign({ onClick: closeWebview }, { children: "\u2715" })) })));
};
exports.WebviewHeader = WebviewHeader;
const WebviewContainer = props => {
const { webchatState } = (0, react_1.useContext)(contexts_1.WebchatContext);
const { closeWebview } = (0, react_1.useContext)(contexts_1.RequestContext);
const Webview = webchatState.webview;
const close = e => e.data == 'botonicCloseWebview' && closeWebview();
(0, react_1.useEffect)(() => {
if (window.addEventListener) {
window.addEventListener('message', close, false);
}
else if (window.attachEvent) {
// ie8
window.attachEvent('onmessage', close);
}
}, []);
return ((0, jsx_runtime_1.jsxs)(StyledWebview, Object.assign({ role: constants_1.ROLES.WEBVIEW, style: Object.assign({}, props.style) }, { children: [(0, jsx_runtime_1.jsx)(exports.WebviewHeader, { style: { flex: 'none' } }), (0, jsx_runtime_1.jsx)(StyledWebviewContent, { children: typeof Webview === 'string' ? ((0, jsx_runtime_1.jsx)(StyledFrame, { src: Webview })) : ((0, jsx_runtime_1.jsx)(WebviewMode, { children: (0, jsx_runtime_1.jsx)(Webview, {}) })) })] })));
};
exports.WebviewContainer = WebviewContainer;
//# sourceMappingURL=webview.js.map