mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-23 06:27:57 +00:00
129 lines
6.7 KiB
HTML
129 lines
6.7 KiB
HTML
<html>
|
|
<head>
|
|
<script src="https://unpkg.com/@babel/standalone@7.17.9/babel.min.js" integrity="sha384-q/mWU54AdnQn35rIhX7g2MtszBgXHwH9exPcvCVnncKy5WoKc457RNDNmm23Fag7" crossorigin="anonymous" referrerpolicy="no-referrer" data-required="true"></script>
|
|
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js" integrity="sha384-bDWFfmoLfqL0ZuPgUiUz3ekiv8NyiuJrrk1wGblri8Nut8UVD6mj7vXhjnenE9vy" crossorigin="anonymous" referrerpolicy="no-referrer" data-required="true"></script>
|
|
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js" integrity="sha384-mcyjbblFFAXUUcVbGLbJZR86Xd7La0uD1S7/Snd1tW0N+zhy97geTqVYDQ92c8tI" crossorigin="anonymous" referrerpolicy="no-referrer" data-required="true"></script>
|
|
</head>
|
|
<body style='margin: 0'>
|
|
<script data-required="true">
|
|
let callbackFn = () => {};
|
|
let props = {};
|
|
let messageEventListener = null;
|
|
let loadEventListener = null;
|
|
window.Tooljet = {
|
|
componentId: window.frameElement.getAttribute('data-id'),
|
|
subscribe: fn => {
|
|
fn(props);
|
|
callbackFn = fn;
|
|
},
|
|
// Returns a Promise that resolves with the query result, matching the behaviour of queries.queryName.run()
|
|
// Success: { status: 'ok', data: { ... } }
|
|
// Failure: { status: 'failed', message: '...', description: '...', data: { ... }, metadata: { ... } }
|
|
runQuery: (name, params) => {
|
|
return new Promise((resolve) => {
|
|
// Unique ID to correlate this request with its response when multiple queries run concurrently
|
|
const requestId = 'rq_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
const handler = (e) => {
|
|
if (e.data.message === 'RUN_QUERY_RESPONSE' &&
|
|
e.data.componentId === window.Tooljet.componentId &&
|
|
e.data.requestId === requestId) {
|
|
window.removeEventListener('message', handler);
|
|
resolve(e.data.queryResult);
|
|
}
|
|
};
|
|
window.addEventListener('message', handler);
|
|
window.parent.postMessage({
|
|
from: 'customComponent',
|
|
message: "RUN_QUERY",
|
|
queryName: name,
|
|
parameters: JSON.stringify(params || {}),
|
|
componentId: window.Tooljet.componentId,
|
|
requestId: requestId,
|
|
}, "*");
|
|
});
|
|
},
|
|
updateProps: obj => window.parent.postMessage({
|
|
from: 'customComponent',
|
|
message: "UPDATE_DATA",
|
|
updatedObj: obj,
|
|
componentId: window.Tooljet.componentId
|
|
}, "*"),
|
|
cleanup: () => {
|
|
if (messageEventListener) {
|
|
window.removeEventListener('message', messageEventListener);
|
|
messageEventListener = null;
|
|
}
|
|
if (loadEventListener) {
|
|
window.removeEventListener('load', loadEventListener);
|
|
loadEventListener = null;
|
|
}
|
|
},
|
|
init: () => {
|
|
window.parent.postMessage({
|
|
from: 'customComponent',
|
|
message: "INIT",
|
|
componentId: window.Tooljet.componentId,
|
|
}, "*");
|
|
|
|
messageEventListener = (e) => {
|
|
if(e.data.message === 'CODE_UPDATED' || e.data.message === 'INIT_RESPONSE'){
|
|
const tags = document.getElementsByTagName("script");
|
|
for(let i = 0; i < tags.length; i++){
|
|
if(tags[i].getAttribute("data-required") !== 'true'){
|
|
tags[i].parentNode.removeChild(tags[i]);
|
|
i = i - 1;
|
|
}
|
|
}
|
|
var head = document.getElementsByTagName('head')[0];
|
|
script = document.createElement('script');
|
|
script.text = e.data.code
|
|
script.type = "text/babel";
|
|
script.setAttribute("data-type", "module");
|
|
head.appendChild(script)
|
|
window.dispatchEvent(new Event('DOMContentLoaded'));
|
|
props = e.data.data;
|
|
callbackFn(e.data.data)
|
|
} else if(e.data.message === 'DATA_UPDATED'){
|
|
props = e.data.data;
|
|
callbackFn(e.data.data)
|
|
} else if(e.data.message === 'CLEANUP' && e.data.componentId === window.Tooljet.componentId) {
|
|
// Cleanup React components
|
|
const root = document.body;
|
|
if (root._reactRootContainer) {
|
|
ReactDOM.unmountComponentAtNode(root);
|
|
}
|
|
// Call the cleanup function
|
|
window.Tooljet.cleanup();
|
|
}
|
|
};
|
|
window.addEventListener('message', messageEventListener);
|
|
}
|
|
}
|
|
|
|
loadEventListener = function() {
|
|
window.Tooljet.init();
|
|
};
|
|
|
|
window.addEventListener('load', loadEventListener);
|
|
</script>
|
|
<script type="text/babel" data-required="true"> window.Tooljet.connectComponent = WrappedComponent => {
|
|
class ConnectedComponent extends React.Component {
|
|
constructor() {
|
|
super(), this.state = {}
|
|
}
|
|
componentDidMount() {
|
|
window.Tooljet.subscribe((e => this.setState({
|
|
data: e
|
|
})))
|
|
}
|
|
render() {
|
|
return <WrappedComponent data={this.state?.data ?? {}}
|
|
updateData={(e) => Tooljet.updateProps(e)}
|
|
runQuery={(e, params) => Tooljet.runQuery(e, params)}/>
|
|
}
|
|
}
|
|
return ConnectedComponent;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|