@quintype/native-components 2.31.0-beta.1 → 2.31.0-beta.2
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/package.json
CHANGED
|
@@ -2,9 +2,8 @@ import { decode as atob } from 'base-64';
|
|
|
2
2
|
import get from 'lodash/get';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
|
-
import { useWindowDimensions, View } from 'react-native';
|
|
5
|
+
import { useWindowDimensions, View, ActivityIndicator } from 'react-native';
|
|
6
6
|
import { WebView } from 'react-native-webview';
|
|
7
|
-
import { STORY_ELEMENT_SUBTYPES } from '../../constants/cardConstants';
|
|
8
7
|
|
|
9
8
|
const escapeRegExp = (string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
|
|
10
9
|
|
|
@@ -17,27 +16,7 @@ const replaceDefaultProtocol = (content) => {
|
|
|
17
16
|
}
|
|
18
17
|
};
|
|
19
18
|
|
|
20
|
-
const
|
|
21
|
-
const temp = htmlContent.split(' ');
|
|
22
|
-
let finalHtml = '';
|
|
23
|
-
if (temp[0] === '<iframe') {
|
|
24
|
-
for (let i = 0; i < temp.length; i++) {
|
|
25
|
-
if (
|
|
26
|
-
(temp[i].includes('width') || temp[i].includes('height'))
|
|
27
|
-
&& !temp[i].includes('/')
|
|
28
|
-
) {
|
|
29
|
-
continue;
|
|
30
|
-
}
|
|
31
|
-
finalHtml = `${finalHtml + temp[i]} `;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return finalHtml;
|
|
35
|
-
}
|
|
36
|
-
return htmlContent;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const getHTMLContent = (embedJs) => {
|
|
40
|
-
const width = useWindowDimensions().width;
|
|
19
|
+
const getHTMLContent = (embedJs, width) => {
|
|
41
20
|
const decodedContent = getDecodedContent(embedJs);
|
|
42
21
|
let htmlContent = replaceDefaultProtocol(decodedContent);
|
|
43
22
|
|
|
@@ -57,9 +36,8 @@ const getHTMLContent = (embedJs) => {
|
|
|
57
36
|
setInterval(sendToRN, 2000);
|
|
58
37
|
</script>`;
|
|
59
38
|
|
|
60
|
-
return
|
|
61
|
-
|
|
62
|
-
<head>
|
|
39
|
+
return `<html>
|
|
40
|
+
<head>
|
|
63
41
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
64
42
|
<style>
|
|
65
43
|
iframe{
|
|
@@ -71,7 +49,7 @@ const getHTMLContent = (embedJs) => {
|
|
|
71
49
|
${htmlContent}
|
|
72
50
|
${webViewScript}
|
|
73
51
|
</body>
|
|
74
|
-
|
|
52
|
+
</html>`;
|
|
75
53
|
};
|
|
76
54
|
|
|
77
55
|
export const JSEmbedElement = (props) => {
|
|
@@ -79,6 +57,7 @@ export const JSEmbedElement = (props) => {
|
|
|
79
57
|
const webViewRef = useRef(null);
|
|
80
58
|
const screenWidth = useWindowDimensions().width;
|
|
81
59
|
const screenHeight = useWindowDimensions().height;
|
|
60
|
+
const style = props.style ?? {};
|
|
82
61
|
const width = get(
|
|
83
62
|
props,
|
|
84
63
|
['currentLayout', 'width'],
|
|
@@ -117,13 +96,15 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
|
|
|
117
96
|
}
|
|
118
97
|
};
|
|
119
98
|
|
|
120
|
-
const constructSource = () => {
|
|
99
|
+
const constructSource = (width) => {
|
|
121
100
|
return {
|
|
122
|
-
html: getHTMLContent(props.element['embed-js']),
|
|
101
|
+
html: getHTMLContent(props.element['embed-js'], width),
|
|
123
102
|
baseUrl: extractBaseUrlFromIframe(getDecodedContent(props.element['embed-js'])),
|
|
124
103
|
};
|
|
125
104
|
};
|
|
126
105
|
|
|
106
|
+
const renderLoadingComponent = () => <ActivityIndicator color="#FFFFFF" style={{flex: 1}} />
|
|
107
|
+
|
|
127
108
|
if (height > 0) {
|
|
128
109
|
return <View testID="embed-js">
|
|
129
110
|
<WebView
|
|
@@ -133,6 +114,7 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
|
|
|
133
114
|
height: Math.min(Number(height), screenHeight-250),
|
|
134
115
|
flex: 0,
|
|
135
116
|
opacity: 0.99,
|
|
117
|
+
...style,
|
|
136
118
|
}}
|
|
137
119
|
automaticallyAdjustContentInsets={false}
|
|
138
120
|
scrollEnabled={false}
|
|
@@ -140,13 +122,14 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
|
|
|
140
122
|
javaScriptEnabled
|
|
141
123
|
domStorageEnabled
|
|
142
124
|
startInLoadingState
|
|
125
|
+
renderLoading={renderLoadingComponent}
|
|
143
126
|
allowsFullscreenVideo={false}
|
|
144
127
|
originWhitelist={['*']}
|
|
145
128
|
onError={(syntheticEvent) => {
|
|
146
129
|
const { nativeEvent } = syntheticEvent;
|
|
147
130
|
console.warn('WebView error: ', nativeEvent);
|
|
148
131
|
}}
|
|
149
|
-
source={constructSource()}
|
|
132
|
+
source={constructSource(width)}
|
|
150
133
|
mixedContentMode="always"
|
|
151
134
|
mediaPlaybackRequiresUserAction={true}
|
|
152
135
|
nestedScrollEnabled={true}
|
|
@@ -163,6 +146,7 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
|
|
|
163
146
|
height: Number(height),
|
|
164
147
|
flex: 0,
|
|
165
148
|
opacity: 0.99,
|
|
149
|
+
...style,
|
|
166
150
|
}}
|
|
167
151
|
automaticallyAdjustContentInsets={false}
|
|
168
152
|
scrollEnabled={false}
|
|
@@ -170,13 +154,14 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
|
|
|
170
154
|
javaScriptEnabled
|
|
171
155
|
domStorageEnabled
|
|
172
156
|
startInLoadingState
|
|
157
|
+
renderLoading={renderLoadingComponent}
|
|
173
158
|
allowsFullscreenVideo={false}
|
|
174
159
|
originWhitelist={['*']}
|
|
175
160
|
onError={(syntheticEvent) => {
|
|
176
161
|
const { nativeEvent } = syntheticEvent;
|
|
177
162
|
console.warn('WebView error: ', nativeEvent);
|
|
178
163
|
}}
|
|
179
|
-
source={constructSource()}
|
|
164
|
+
source={constructSource(width)}
|
|
180
165
|
mixedContentMode="always"
|
|
181
166
|
mediaPlaybackRequiresUserAction={true}
|
|
182
167
|
injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
|