|
@@ -1,11 +1,13 @@
|
1
|
1
|
'use strict';
|
2
|
2
|
|
|
3
|
+import { Dimensions } from 'react-native';
|
|
4
|
+
|
3
|
5
|
function appendFilesToHead(files, script) {
|
4
|
6
|
if (!files) {
|
5
|
7
|
return script;
|
6
|
8
|
}
|
7
|
9
|
return files.reduceRight((file, combinedScript) => {
|
8
|
|
- const { rel, type, href } = file;
|
|
10
|
+ const { rel, type, href } = file;
|
9
|
11
|
return `
|
10
|
12
|
var link = document.createElement('link');
|
11
|
13
|
link.rel = '${rel}';
|
|
@@ -17,29 +19,23 @@ function appendFilesToHead(files, script) {
|
17
|
19
|
}, script);
|
18
|
20
|
}
|
19
|
21
|
|
20
|
|
-function appendStylesToHead(styles, script, shouldResizeWidth) {
|
21
|
|
- var bodyStyle;
|
22
|
|
- if (shouldResizeWidth) {
|
23
|
|
- bodyStyle = `
|
24
|
|
- body {
|
25
|
|
- display: flex;
|
26
|
|
- justify-content: center;
|
27
|
|
- align-items: center;
|
28
|
|
- }`;
|
29
|
|
- }
|
30
|
|
- else {
|
31
|
|
- bodyStyle = '';
|
32
|
|
- }
|
33
|
|
-
|
34
|
|
- if (!styles) {
|
35
|
|
- styles = bodyStyle;
|
36
|
|
- }
|
37
|
|
- else {
|
38
|
|
- styles += bodyStyle;
|
39
|
|
- }
|
|
22
|
+const screenWidth = Dimensions.get('window').width;
|
|
23
|
+
|
|
24
|
+function getWidth(style) {
|
|
25
|
+ return style && style.width ? style.width : screenWidth;
|
|
26
|
+}
|
|
27
|
+
|
|
28
|
+const bodyStyle = `
|
|
29
|
+body {
|
|
30
|
+ margin: 0;
|
|
31
|
+ padding: 0;
|
|
32
|
+}
|
|
33
|
+`;
|
|
34
|
+
|
|
35
|
+function appendStylesToHead(styles, script) {
|
|
36
|
+ const currentStyles = bodyStyle + styles;
|
40
|
37
|
// Escape any single quotes or newlines in the CSS with .replace()
|
41
|
|
- const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
|
42
|
|
-
|
|
38
|
+ const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
|
43
|
39
|
return `
|
44
|
40
|
var styleElement = document.createElement('style');
|
45
|
41
|
var styleText = document.createTextNode('${escaped}');
|
|
@@ -49,36 +45,30 @@ function appendStylesToHead(styles, script, shouldResizeWidth) {
|
49
|
45
|
`;
|
50
|
46
|
}
|
51
|
47
|
|
52
|
|
-function getScript(props, baseScript, iframeBaseScript) {
|
53
|
|
- const { hasIframe, files, customStyle, shouldResizeWidth } = props;
|
54
|
|
- let script = hasIframe ? iframeBaseScript : baseScript;
|
|
48
|
+function getScript(props, getBaseScript, getIframeBaseScript) {
|
|
49
|
+ const { hasIframe, files, customStyle, resizeWidth } = props;
|
|
50
|
+ const baseScript = getBaseScript(props.style);
|
|
51
|
+ let script = hasIframe ? baseScript : getIframeBaseScript(props.style);
|
55
|
52
|
script = files ? appendFilesToHead(files, baseScript) : baseScript;
|
56
|
|
- script = appendStylesToHead(customStyle, script, shouldResizeWidth);
|
|
53
|
+ script = appendStylesToHead(customStyle, script, resizeWidth);
|
57
|
54
|
return script;
|
58
|
55
|
}
|
59
|
56
|
|
60
|
|
-function onHeightUpdated(height, props) {
|
61
|
|
- props.onHeightUpdated && props.onHeightUpdated(height);
|
62
|
|
-}
|
63
|
|
-
|
64
|
|
-function onWidthUpdated(width, props) {
|
65
|
|
- props.onWidthUpdated && props.onWidthUpdated(width);
|
66
|
|
-}
|
67
|
|
-
|
68
|
|
-function onHeightWidthUpdated(height, width, props) {
|
69
|
|
- onHeightUpdated(height, props);
|
70
|
|
- onWidthUpdated(width, props);
|
71
|
|
- props.onHeightWidthUpdated && props.onHeightWidthUpdated(height, width);
|
|
57
|
+function handleSizeUpdated(height, width, onSizeUpdated) {
|
|
58
|
+ onSizeUpdated &&
|
|
59
|
+ onSizeUpdated({
|
|
60
|
+ height,
|
|
61
|
+ width
|
|
62
|
+ });
|
72
|
63
|
}
|
73
|
64
|
|
74
|
|
-const domMutationObserveScript =
|
75
|
|
-`
|
|
65
|
+const domMutationObserveScript = `
|
76
|
66
|
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
77
|
|
-var observer = new MutationObserver(updateHeight);
|
|
67
|
+var observer = new MutationObserver(updateSize);
|
78
|
68
|
observer.observe(document, {
|
79
|
69
|
subtree: true,
|
80
|
70
|
attributes: true
|
81
|
71
|
});
|
82
|
72
|
`;
|
83
|
73
|
|
84
|
|
-export { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript };
|
|
74
|
+export { getWidth, getScript, handleSizeUpdated, domMutationObserveScript };
|