ToolJet/frontend/src/Editor/Components/CustomComponent/iframe.html at develop · nativeit-dev/ToolJet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<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;
                },
                runQuery: (name, params) => {
                    window.parent.postMessage({
                    from: 'customComponent',
                    message: "RUN_QUERY",
                    queryName: name,
                    parameters: JSON.stringify(params || {}),
                    componentId: window.Tooljet.componentId
                }, "*")},
                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>