qureal-editor 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/index.es.js +74 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +74 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -20,6 +20,44 @@ var _extends = Object.assign || function (target) {
|
|
|
20
20
|
return target;
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
+
var slicedToArray = function () {
|
|
24
|
+
function sliceIterator(arr, i) {
|
|
25
|
+
var _arr = [];
|
|
26
|
+
var _n = true;
|
|
27
|
+
var _d = false;
|
|
28
|
+
var _e = undefined;
|
|
29
|
+
|
|
30
|
+
try {
|
|
31
|
+
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
32
|
+
_arr.push(_s.value);
|
|
33
|
+
|
|
34
|
+
if (i && _arr.length === i) break;
|
|
35
|
+
}
|
|
36
|
+
} catch (err) {
|
|
37
|
+
_d = true;
|
|
38
|
+
_e = err;
|
|
39
|
+
} finally {
|
|
40
|
+
try {
|
|
41
|
+
if (!_n && _i["return"]) _i["return"]();
|
|
42
|
+
} finally {
|
|
43
|
+
if (_d) throw _e;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return _arr;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return function (arr, i) {
|
|
51
|
+
if (Array.isArray(arr)) {
|
|
52
|
+
return arr;
|
|
53
|
+
} else if (Symbol.iterator in Object(arr)) {
|
|
54
|
+
return sliceIterator(arr, i);
|
|
55
|
+
} else {
|
|
56
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}();
|
|
60
|
+
|
|
23
61
|
function QurealiFrame(_ref) {
|
|
24
62
|
var slug = _ref.slug,
|
|
25
63
|
preview = _ref.preview,
|
|
@@ -66,7 +104,9 @@ function QurealViewer(_ref) {
|
|
|
66
104
|
_ref$onFormSubmit = _ref.onFormSubmit,
|
|
67
105
|
onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
|
|
68
106
|
_ref$style = _ref.style,
|
|
69
|
-
style = _ref$style === undefined ? {} : _ref$style
|
|
107
|
+
style = _ref$style === undefined ? {} : _ref$style,
|
|
108
|
+
_ref$action = _ref.action,
|
|
109
|
+
action = _ref$action === undefined ? {} : _ref$action;
|
|
70
110
|
|
|
71
111
|
|
|
72
112
|
var sendToIFrame = function sendToIFrame(msg) {
|
|
@@ -100,6 +140,15 @@ function QurealViewer(_ref) {
|
|
|
100
140
|
});
|
|
101
141
|
}, [prefill]);
|
|
102
142
|
|
|
143
|
+
useEffect(function () {
|
|
144
|
+
if (["DOWNLOAD", "SHARE"].includes(action.type)) {
|
|
145
|
+
sendToIFrame({
|
|
146
|
+
message_type: action.type,
|
|
147
|
+
data: action.data || {}
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
}, [action]);
|
|
151
|
+
|
|
103
152
|
useEffect(function () {
|
|
104
153
|
var handler = function handler(ev) {
|
|
105
154
|
if (ALLOWED_ORIGINS.includes(ev.origin) && _typeof(ev.data) === "object") {
|
|
@@ -145,5 +194,28 @@ function queryfy(obj) {
|
|
|
145
194
|
return buildQuery("", obj);
|
|
146
195
|
}
|
|
147
196
|
|
|
148
|
-
|
|
197
|
+
function useQurealAction() {
|
|
198
|
+
var _useState = useState({}),
|
|
199
|
+
_useState2 = slicedToArray(_useState, 2),
|
|
200
|
+
actionRef = _useState2[0],
|
|
201
|
+
setActionRef = _useState2[1];
|
|
202
|
+
|
|
203
|
+
function download() {
|
|
204
|
+
setActionRef({
|
|
205
|
+
type: "DOWNLOAD",
|
|
206
|
+
data: {}
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
function share() {
|
|
211
|
+
setActionRef({
|
|
212
|
+
type: "SHARE",
|
|
213
|
+
data: {}
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
return { actionRef: actionRef, download: download, share: share };
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
export { QurealViewer, useQurealAction };
|
|
149
221
|
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, preview, query, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n // src={type === \"creation\" ? `http://localhost:3201/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n style={{\n width: \"100%\",\n height: \"100vh\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n preview = false,\n prefill = {},\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = {}\n}) {\n\n const sendToIFrame = (msg) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage(msg, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: slug,\n preview: preview,\n prefill: prefill\n }\n })\n }, [slug, preview])\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"PREFILL\",\n data: {\n prefill: prefill\n }\n })\n }, [prefill])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n preview={preview}\n query={queryfy(prefill)}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n\n\nfunction queryfy(obj) {\n const buildQuery = (prefix, obj) => {\n return Object.keys(obj)\n .map(key => {\n const value = obj[key];\n const prefixedKey = prefix ? `${prefix}.${key}` : key;\n if (typeof value === 'object' && value !== null) {\n return buildQuery(prefixedKey, value);\n } else {\n return `${prefixedKey}=${value}`;\n }\n })\n .join(\"&\");\n };\n\n return buildQuery(\"\", obj);\n}"],"names":["QurealiFrame","slug","preview","query","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","prefill","onFormSubmit","sendToIFrame","msg","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js","../src/use-action.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, preview, query, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n // src={type === \"creation\" ? `http://localhost:3201/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n style={{\n width: \"100%\",\n height: \"100vh\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n preview = false,\n prefill = {},\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = {},\n action = {}\n}) {\n\n const sendToIFrame = (msg) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage(msg, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: slug,\n preview: preview,\n prefill: prefill\n }\n })\n }, [slug, preview])\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"PREFILL\",\n data: {\n prefill: prefill\n }\n })\n }, [prefill])\n\n useEffect(() => {\n if ([\"DOWNLOAD\", \"SHARE\"].includes(action.type)) {\n sendToIFrame({\n message_type: action.type,\n data: action.data || {}\n })\n }\n }, [action])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n preview={preview}\n query={queryfy(prefill)}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n\n\nfunction queryfy(obj) {\n const buildQuery = (prefix, obj) => {\n return Object.keys(obj)\n .map(key => {\n const value = obj[key];\n const prefixedKey = prefix ? `${prefix}.${key}` : key;\n if (typeof value === 'object' && value !== null) {\n return buildQuery(prefixedKey, value);\n } else {\n return `${prefixedKey}=${value}`;\n }\n })\n .join(\"&\");\n };\n\n return buildQuery(\"\", obj);\n}","\n\nfunction useQurealAction() {\n const [actionRef, setActionRef] = useState({});\n\n function download() {\n setActionRef({\n type: \"DOWNLOAD\",\n data: {}\n })\n }\n\n\n function share() {\n setActionRef({\n type: \"SHARE\",\n data: {}\n })\n }\n\n return { actionRef, download, share }\n}\n\nexport default useQurealAction;"],"names":["QurealiFrame","slug","preview","query","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","prefill","onFormSubmit","action","sendToIFrame","msg","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","includes","data","handler","ev","origin","babelHelpers.typeof","event_type","addEventListener","window","removeEventListener","queryfy","obj","buildQuery","prefix","Object","keys","map","value","key","prefixedKey","join","useQurealAction","useState","actionRef","setActionRef","download","share"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -27,6 +27,44 @@ var _extends = Object.assign || function (target) {
|
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
+
var slicedToArray = function () {
|
|
31
|
+
function sliceIterator(arr, i) {
|
|
32
|
+
var _arr = [];
|
|
33
|
+
var _n = true;
|
|
34
|
+
var _d = false;
|
|
35
|
+
var _e = undefined;
|
|
36
|
+
|
|
37
|
+
try {
|
|
38
|
+
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
39
|
+
_arr.push(_s.value);
|
|
40
|
+
|
|
41
|
+
if (i && _arr.length === i) break;
|
|
42
|
+
}
|
|
43
|
+
} catch (err) {
|
|
44
|
+
_d = true;
|
|
45
|
+
_e = err;
|
|
46
|
+
} finally {
|
|
47
|
+
try {
|
|
48
|
+
if (!_n && _i["return"]) _i["return"]();
|
|
49
|
+
} finally {
|
|
50
|
+
if (_d) throw _e;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return _arr;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return function (arr, i) {
|
|
58
|
+
if (Array.isArray(arr)) {
|
|
59
|
+
return arr;
|
|
60
|
+
} else if (Symbol.iterator in Object(arr)) {
|
|
61
|
+
return sliceIterator(arr, i);
|
|
62
|
+
} else {
|
|
63
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
}();
|
|
67
|
+
|
|
30
68
|
function QurealiFrame(_ref) {
|
|
31
69
|
var slug = _ref.slug,
|
|
32
70
|
preview = _ref.preview,
|
|
@@ -73,7 +111,9 @@ function QurealViewer(_ref) {
|
|
|
73
111
|
_ref$onFormSubmit = _ref.onFormSubmit,
|
|
74
112
|
onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
|
|
75
113
|
_ref$style = _ref.style,
|
|
76
|
-
style = _ref$style === undefined ? {} : _ref$style
|
|
114
|
+
style = _ref$style === undefined ? {} : _ref$style,
|
|
115
|
+
_ref$action = _ref.action,
|
|
116
|
+
action = _ref$action === undefined ? {} : _ref$action;
|
|
77
117
|
|
|
78
118
|
|
|
79
119
|
var sendToIFrame = function sendToIFrame(msg) {
|
|
@@ -107,6 +147,15 @@ function QurealViewer(_ref) {
|
|
|
107
147
|
});
|
|
108
148
|
}, [prefill]);
|
|
109
149
|
|
|
150
|
+
React.useEffect(function () {
|
|
151
|
+
if (["DOWNLOAD", "SHARE"].includes(action.type)) {
|
|
152
|
+
sendToIFrame({
|
|
153
|
+
message_type: action.type,
|
|
154
|
+
data: action.data || {}
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
}, [action]);
|
|
158
|
+
|
|
110
159
|
React.useEffect(function () {
|
|
111
160
|
var handler = function handler(ev) {
|
|
112
161
|
if (ALLOWED_ORIGINS.includes(ev.origin) && _typeof(ev.data) === "object") {
|
|
@@ -152,5 +201,29 @@ function queryfy(obj) {
|
|
|
152
201
|
return buildQuery("", obj);
|
|
153
202
|
}
|
|
154
203
|
|
|
204
|
+
function useQurealAction() {
|
|
205
|
+
var _useState = useState({}),
|
|
206
|
+
_useState2 = slicedToArray(_useState, 2),
|
|
207
|
+
actionRef = _useState2[0],
|
|
208
|
+
setActionRef = _useState2[1];
|
|
209
|
+
|
|
210
|
+
function download() {
|
|
211
|
+
setActionRef({
|
|
212
|
+
type: "DOWNLOAD",
|
|
213
|
+
data: {}
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
function share() {
|
|
218
|
+
setActionRef({
|
|
219
|
+
type: "SHARE",
|
|
220
|
+
data: {}
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
return { actionRef: actionRef, download: download, share: share };
|
|
225
|
+
}
|
|
226
|
+
|
|
155
227
|
exports.QurealViewer = QurealViewer;
|
|
228
|
+
exports.useQurealAction = useQurealAction;
|
|
156
229
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, preview, query, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n // src={type === \"creation\" ? `http://localhost:3201/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n style={{\n width: \"100%\",\n height: \"100vh\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n preview = false,\n prefill = {},\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = {}\n}) {\n\n const sendToIFrame = (msg) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage(msg, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: slug,\n preview: preview,\n prefill: prefill\n }\n })\n }, [slug, preview])\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"PREFILL\",\n data: {\n prefill: prefill\n }\n })\n }, [prefill])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n preview={preview}\n query={queryfy(prefill)}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n\n\nfunction queryfy(obj) {\n const buildQuery = (prefix, obj) => {\n return Object.keys(obj)\n .map(key => {\n const value = obj[key];\n const prefixedKey = prefix ? `${prefix}.${key}` : key;\n if (typeof value === 'object' && value !== null) {\n return buildQuery(prefixedKey, value);\n } else {\n return `${prefixedKey}=${value}`;\n }\n })\n .join(\"&\");\n };\n\n return buildQuery(\"\", obj);\n}"],"names":["QurealiFrame","slug","preview","query","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","prefill","onFormSubmit","sendToIFrame","msg","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js","../src/use-action.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, preview, query, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n // src={type === \"creation\" ? `http://localhost:3201/embed/${slug}?${preview ? \"preview&\" : \"\"}${query}` : `https://show.qureal.com/ts/${slug}`}\n style={{\n width: \"100%\",\n height: \"100vh\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n preview = false,\n prefill = {},\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = {},\n action = {}\n}) {\n\n const sendToIFrame = (msg) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage(msg, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: slug,\n preview: preview,\n prefill: prefill\n }\n })\n }, [slug, preview])\n\n useEffect(() => {\n sendToIFrame({\n message_type: \"PREFILL\",\n data: {\n prefill: prefill\n }\n })\n }, [prefill])\n\n useEffect(() => {\n if ([\"DOWNLOAD\", \"SHARE\"].includes(action.type)) {\n sendToIFrame({\n message_type: action.type,\n data: action.data || {}\n })\n }\n }, [action])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n preview={preview}\n query={queryfy(prefill)}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n\n\nfunction queryfy(obj) {\n const buildQuery = (prefix, obj) => {\n return Object.keys(obj)\n .map(key => {\n const value = obj[key];\n const prefixedKey = prefix ? `${prefix}.${key}` : key;\n if (typeof value === 'object' && value !== null) {\n return buildQuery(prefixedKey, value);\n } else {\n return `${prefixedKey}=${value}`;\n }\n })\n .join(\"&\");\n };\n\n return buildQuery(\"\", obj);\n}","\n\nfunction useQurealAction() {\n const [actionRef, setActionRef] = useState({});\n\n function download() {\n setActionRef({\n type: \"DOWNLOAD\",\n data: {}\n })\n }\n\n\n function share() {\n setActionRef({\n type: \"SHARE\",\n data: {}\n })\n }\n\n return { actionRef, download, share }\n}\n\nexport default useQurealAction;"],"names":["QurealiFrame","slug","preview","query","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","prefill","onFormSubmit","action","sendToIFrame","msg","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","includes","data","handler","ev","origin","babelHelpers.typeof","event_type","addEventListener","window","removeEventListener","queryfy","obj","buildQuery","prefix","Object","keys","map","value","key","prefixedKey","join","useQurealAction","useState","actionRef","setActionRef","download","share"],"mappings":"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"}
|