@quintype/native-components 2.30.0 → 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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/JSEmbedElement/index.js +16 -31
  3. package/src/components/ResponsiveImage/index.js +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quintype/native-components",
3
- "version": "2.30.0",
3
+ "version": "2.31.0-beta.2",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/components/JSEmbedElement/index.js 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 removeWidthnHeight = (htmlContent) => {
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
- <html>
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
- </html>`;
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)'
package/src/components/ResponsiveImage/index.js CHANGED
@@ -31,12 +31,15 @@ const ResponsiveImageBase = (props) => {
31
31
  },
32
32
  ])
33
33
 
34
+ const [w, h] = props.aspectRatio ?? [];
35
+ const heightMultiplier = w && h ? h / w : 9 / 16;
36
+
34
37
  const flattenedImageStyle = StyleSheet.flatten([
35
38
  styles.defaultImage,
36
39
  props.styles,
37
40
  props.imageWidth && {
38
41
  width: props.imageWidth,
39
- height: (props.imageWidth * 9) / 16,
42
+ height: props.imageWidth * heightMultiplier,
40
43
  },
41
44
  props.styles?.marginTop && { marginTop: 0 } ,
42
45
 
@@ -97,7 +100,6 @@ const ResponsiveImageBase = (props) => {
97
100
  source={sourceURI}
98
101
  resizeMode={FastImage.resizeMode.contain}
99
102
  onLoad={()=>setPlaceholder(false)}
100
- {...props}
101
103
  />
102
104
  )
103
105
  }