Skip to content

Commit 96ec88c

Browse files
kentwalterskentwalters
committed
Convert from 4 -> 2 spaces per tab.
1 parent db99512 commit 96ec88c

File tree

3 files changed

+120
-123
lines changed

3 files changed

+120
-123
lines changed

‎src/App.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Retool from "./components/Retool"
22

33
function App() {
4-
return (
5-
<Retool
6-
url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"
7-
data={{
8-
example: "value",
9-
}}
10-
></Retool>
11-
)
4+
return (
5+
<Retool
6+
url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"
7+
data={{
8+
example: "value",
9+
}}
10+
></Retool>
11+
)
1212
}
1313

1414
export default App

‎src/components/Retool.js‎

Lines changed: 107 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,129 @@
11
import React from "react"
22

33
class Retool extends React.Component {
4-
constructor(props) {
5-
super(props)
4+
constructor(props) {
5+
super(props)
66

7-
if (!this.props.url)
8-
throw new Error("Please pass a url into the Retool component.")
7+
if (!this.props.url)
8+
throw new Error("Please pass a url into the Retool component.")
99

10-
this.state = {
11-
url: props.url,
12-
elementWatchers: {},
13-
parentData: this.props.data || {},
14-
}
10+
this.state = {
11+
url: props.url,
12+
elementWatchers: {},
13+
parentData: this.props.data || {},
1514
}
15+
}
1616

17-
componentDidMount() {
18-
this.startListening()
19-
this.startWatchers()
20-
}
17+
componentDidMount() {
18+
this.startListening()
19+
this.startWatchers()
20+
}
2121

22-
startListening = () => {
23-
if (this.iframe) {
24-
window.addEventListener("message", (e) => this.handle(e))
25-
}
22+
startListening = () => {
23+
if (this.iframe) {
24+
window.addEventListener("message", (e) => this.handle(e))
2625
}
27-
28-
startWatchers = () => {
29-
var watcherKeys = Object.keys(this.state.elementWatchers)
30-
31-
for (var i = 0; i < watcherKeys.length; i++) {
32-
var key = watcherKeys[i]
33-
var watcher = this.state.elementWatchers[key]
34-
var selector = watcher.selector
35-
const value = this.dataFromSelector(selector)
36-
if (value !== watcher.prevValue) {
37-
watcher.prevValue = value
38-
watcher.iframe.contentWindow.postMessage(
39-
{
40-
type: "PARENT_WINDOW_RESULT",
41-
result: value,
42-
id: watcher.queryId,
43-
pageName: watcher.pageName,
44-
},
45-
"*"
46-
)
47-
}
48-
}
49-
50-
setTimeout(this.startWatchers, 100)
26+
}
27+
28+
startWatchers = () => {
29+
var watcherKeys = Object.keys(this.state.elementWatchers)
30+
31+
for (var i = 0; i < watcherKeys.length; i++) {
32+
var key = watcherKeys[i]
33+
var watcher = this.state.elementWatchers[key]
34+
var selector = watcher.selector
35+
const value = this.dataFromSelector(selector)
36+
if (value !== watcher.prevValue) {
37+
watcher.prevValue = value
38+
watcher.iframe.contentWindow.postMessage(
39+
{
40+
type: "PARENT_WINDOW_RESULT",
41+
result: value,
42+
id: watcher.queryId,
43+
pageName: watcher.pageName,
44+
},
45+
"*"
46+
)
47+
}
5148
}
5249

53-
createOrReplaceWatcher = (selector, pageName, queryId) => {
54-
var watcherId = pageName + "-" + queryId
55-
var watchers = { ...this.state.elementWatchers }
50+
setTimeout(this.startWatchers, 100)
51+
}
5652

57-
watchers[watcherId] = {
58-
iframe: this.iframe,
59-
selector: selector,
60-
pageName: pageName,
61-
queryId: queryId,
62-
prevValue: null,
63-
}
53+
createOrReplaceWatcher = (selector, pageName, queryId) => {
54+
var watcherId = pageName + "-" + queryId
55+
var watchers = { ...this.state.elementWatchers }
6456

65-
this.setState({ elementWatchers: watchers })
57+
watchers[watcherId] = {
58+
iframe: this.iframe,
59+
selector: selector,
60+
pageName: pageName,
61+
queryId: queryId,
62+
prevValue: null,
6663
}
6764

68-
dataFromSelector = (selector) => {
69-
// Two places the app might be asking for data:
70-
// 1. The textContent of an HTML element.
71-
// 2. From data passed into this component
72-
const matchingInjectedData = this.state.parentData[selector]
73-
const nodeData = document.querySelector(selector)?.textContent
74-
return matchingInjectedData || nodeData || null
65+
this.setState({ elementWatchers: watchers })
66+
}
67+
68+
dataFromSelector = (selector) => {
69+
// Two places the app might be asking for data:
70+
// 1. The textContent of an HTML element.
71+
// 2. From data passed into this component
72+
const matchingInjectedData = this.state.parentData[selector]
73+
const nodeData = document.querySelector(selector)?.textContent
74+
return matchingInjectedData || nodeData || null
75+
}
76+
77+
postMessageForSelector = (messageType, eventData) => {
78+
const maybeData = this.dataFromSelector(eventData.selector)
79+
80+
if (maybeData) {
81+
this.iframe.contentWindow.postMessage(
82+
{
83+
type: messageType,
84+
result: maybeData,
85+
id: eventData.id,
86+
pageName: eventData.pageName,
87+
},
88+
"*"
89+
)
90+
} else {
91+
console.log(
92+
`Not sending data back to Retool, nothing found for selector: ${eventData.selector}`
93+
)
7594
}
76-
77-
postMessageForSelector = (messageType, eventData) => {
78-
const maybeData = this.dataFromSelector(eventData.selector)
79-
80-
if (maybeData) {
81-
this.iframe.contentWindow.postMessage(
82-
{
83-
type: messageType,
84-
result: maybeData,
85-
id: eventData.id,
86-
pageName: eventData.pageName,
87-
},
88-
"*"
89-
)
90-
} else {
91-
console.log(
92-
`Not sending data back to Retool, nothing found for selector: ${eventData.selector}`
93-
)
94-
}
95+
}
96+
97+
handle = (event) => {
98+
if (!this.iframe.contentWindow) return
99+
if (event.data.type === "PARENT_WINDOW_QUERY") {
100+
this.createOrReplaceWatcher(
101+
event.data.selector,
102+
event.data.pageName,
103+
event.data.id
104+
)
105+
this.postMessageForSelector("PARENT_WINDOW_RESULT", event.data)
95106
}
96107

97-
handle = (event) => {
98-
if (!this.iframe.contentWindow) return
99-
if (event.data.type === "PARENT_WINDOW_QUERY") {
100-
this.createOrReplaceWatcher(
101-
event.data.selector,
102-
event.data.pageName,
103-
event.data.id
104-
)
105-
this.postMessageForSelector("PARENT_WINDOW_RESULT", event.data)
106-
}
107-
108-
if (event.data.type === "PARENT_WINDOW_PREVIEW_QUERY") {
109-
this.postMessageForSelector(
110-
"PARENT_WINDOW_PREVIEW_RESULT",
111-
event.data
112-
)
113-
}
114-
}
115-
116-
render() {
117-
return (
118-
<iframe
119-
height="100%"
120-
width="100%"
121-
frameBorder="none"
122-
src={this.state.url}
123-
ref={(e) => {
124-
this.iframe = e
125-
}}
126-
title="retool"
127-
></iframe>
128-
)
108+
if (event.data.type === "PARENT_WINDOW_PREVIEW_QUERY") {
109+
this.postMessageForSelector("PARENT_WINDOW_PREVIEW_RESULT", event.data)
129110
}
111+
}
112+
113+
render() {
114+
return (
115+
<iframe
116+
height="100%"
117+
width="100%"
118+
frameBorder="none"
119+
src={this.state.url}
120+
ref={(e) => {
121+
this.iframe = e
122+
}}
123+
title="retool"
124+
></iframe>
125+
)
126+
}
130127
}
131128

132129
export default Retool

‎src/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from "react";
2-
import ReactDOM from "react-dom";
3-
import "./index.css";
4-
import App from "./App";
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
import "./index.css"
4+
import App from "./App"
55

66
ReactDOM.render(
77
<React.StrictMode>
88
<App />
99
</React.StrictMode>,
1010
document.getElementById("root")
11-
);
11+
)

0 commit comments

Comments
 (0)