npm - @quintype/native-components - Versions diffs - 2.30.2 → 2.30.3 - Mend

@quintype/native-components 2.30.2 → 2.30.3

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 (6) hide show

package/package.json +1 -1
package/src/components/JSEmbedElement/index.js +39 -23
package/src/components/StoryText/index.js +7 -6
package/src/components/TextSummary/index.js +21 -0
package/src/components/TitleElement/styles.js +2 -1
package/src/constants/renderHTML.js +26 -11

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.30.2",
+  "version": "2.30.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/JSEmbedElement/index.js CHANGED Viewed

@@ -23,7 +23,7 @@ const removeWidthnHeight = (htmlContent) => {
   if (temp[0] === '<iframe') {
     for (let i = 0; i < temp.length; i++) {
       if (
-        (temp[i].includes('width') || temp[i].includes('height'))
+        (temp[i].includes('width=') || temp[i].includes('height='))
         && !temp[i].includes('/')
       ) {
         continue;
@@ -40,6 +40,7 @@ const getHTMLContent = (embedJs) => {
   const width = useWindowDimensions().width;
   const decodedContent = getDecodedContent(embedJs);
   let htmlContent = replaceDefaultProtocol(decodedContent);
+  htmlContent = removeWidthnHeight(htmlContent);
   const webViewScript = `
     <script type="application/javascript">
@@ -62,8 +63,22 @@ const getHTMLContent = (embedJs) => {
                 <head>
                     <meta name="viewport" content="width=device-width, initial-scale=1">
                     <style>
-                      iframe{
-                        width:${width - 20}px;
+                      * {
+                        margin: 0;
+                        padding: 0;
+                        box-sizing: border-box;
+                      }
+                      body {
+                        width: 100%;
+                        overflow-x: hidden;
+                      }
+                      iframe {
+                        width: 100% !important;
+                        max-width: ${width - 20}px;
+                        height: ${Math.round((width - 20) * 9 / 16)}px;
+                        min-height: 200px;
+                        display: block;
+                        margin: 0 auto;
                       }
                     </style>
                 </head>
@@ -93,29 +108,29 @@ export const JSEmbedElement = (props) => {
     setHeight(parseInt(event.nativeEvent.data));
   };
-// Function to manually extract the base URL from an iframe src
-const extractBaseUrlFromIframe = (iframeHtml) => {
-  const regex = /src="([^"]+)"/;  // Regex to extract src URL from iframe
-  const match = iframeHtml.match(regex);
+  // Function to manually extract the base URL from an iframe src
+  const extractBaseUrlFromIframe = (iframeHtml) => {
+    const regex = /src="([^"]+)"/;  // Regex to extract src URL from iframe
+    const match = iframeHtml.match(regex);
-  if (match && match[1]) {
-    const srcUrl = match[1]; // The full src URL from iframe
+    if (match && match[1]) {
+      const srcUrl = match[1]; // The full src URL from iframe
-    // Manually extract the base URL (protocol + host + pathname)
-    const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
-    const baseUrlMatch = srcUrl.match(urlPattern);
+      // Manually extract the base URL (protocol + host + pathname)
+      const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
+      const baseUrlMatch = srcUrl.match(urlPattern);
-    if (baseUrlMatch) {
-      return baseUrlMatch[1]; // Return the base URL
+      if (baseUrlMatch) {
+        return baseUrlMatch[1]; // Return the base URL
+      } else {
+        console.error('Invalid URL format.');
+        return null;
+      }
     } else {
-      console.error('Invalid URL format.');
+      console.error('Iframe src not found.');
       return null;
     }
-  } else {
-    console.error('Iframe src not found.');
-    return null;
-  }
-};
+  };
   const constructSource = () => {
     return {
@@ -125,12 +140,13 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
   };
   if (height > 0) {
+    const calculatedHeight = Math.max(Number(height), Math.round((width - 20) * 9 / 16) + 20);
     return <View testID="embed-js">
       <WebView
         ref={webViewRef}
         style={{
           width,
-          height: Math.min(Number(height), screenHeight-250),
+          height: Math.min(calculatedHeight, screenHeight - 100),
           flex: 0,
           opacity: 0.99,
         }}
@@ -160,7 +176,7 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
         ref={webViewRef}
         style={{
           width,
-          height: Number(height),
+          height: Math.max(Number(height), Math.round((width - 20) * 9 / 16) + 20),
           flex: 0,
           opacity: 0.99,
         }}
@@ -204,4 +220,4 @@ JSEmbedElement.propTypes = {
     height: PropTypes.number,
     orientation: PropTypes.string,
   }),
-};
+};

package/src/components/StoryText/index.js CHANGED Viewed

@@ -13,7 +13,7 @@ import { AppTheme } from '../../utils/context';
 import { storyTextStyles } from './styles';
 export const StoryText = (props) => {
-  const {navigation} = props;
+  const { navigation } = props;
   const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     COLORS,
@@ -46,14 +46,13 @@ export const StoryText = (props) => {
           useDeeplinkHandler(href, navigation)
         }}
         listsPrefixesRenderers={{
-          ul: () => <View style={customTagsStyles.ul} />,
+          ul: () => <View style={customTagsStyles['ul-bullet']} />,
           ol: (htmlAttribs, children, convertedCSSStyles, passProps) => {
             const { index } = passProps;
-            const bulletNumber = htmlAttribs.start ? htmlAttribs.start : index + 1;
+            const bulletNumber = htmlAttribs.start ? parseInt(htmlAttribs.start) + index : index + 1;
             return (
-              <Text style={customTagsStyles.ol}>
-                {bulletNumber}
-                )
+              <Text style={customTagsStyles['ol-number']}>
+                {bulletNumber})
               </Text>
             );
           },
@@ -63,6 +62,8 @@ export const StoryText = (props) => {
           ins: customTagsStyles.ins,
           p: customTagsStyles.p,
           li: customTagsStyles.li,
+          ul: customTagsStyles.ul,
+          ol: customTagsStyles.ol,
           a: customTagsStyles.a,
           h2: customTagsStyles.h,
           h3: customTagsStyles.h,

package/src/components/TextSummary/index.js CHANGED Viewed

@@ -36,10 +36,31 @@ export const TextSummary = (props) => {
         onLinkPress={(evt, href) => {
           useDeeplinkHandler(href);
         }}
+        listsPrefixesRenderers={{
+          ul: () => <View style={customTagsStyles['ul-bullet']} />,
+          ol: (htmlAttribs, children, convertedCSSStyles, passProps) => {
+            const { index } = passProps;
+            const bulletNumber = htmlAttribs.start ? parseInt(htmlAttribs.start) + index : index + 1;
+            return (
+              <Text style={customTagsStyles['ol-number']}>
+                {bulletNumber})
+              </Text>
+            );
+          },
+        }}
         tagsStyles={{
           del: customTagsStyles.del,
           ins: customTagsStyles.ins,
           p: customTagsStyles.p,
+          li: customTagsStyles.li,
+          ul: customTagsStyles.ul,
+          ol: customTagsStyles.ol,
+          a: customTagsStyles.a,
+          h2: customTagsStyles.h,
+          h3: customTagsStyles.h,
+          h4: customTagsStyles.h,
+          h5: customTagsStyles.h,
+          h6: customTagsStyles.h,
         }}
       />

package/src/components/TitleElement/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 export const titleElementStyles = (appThemeContext) => {
-  const { COLORS } = appThemeContext;
+  const { COLORS, FONT_FAMILY } = appThemeContext;
   return StyleSheet.create({
     titleText: {
       fontSize: 20,
@@ -10,6 +10,7 @@ export const titleElementStyles = (appThemeContext) => {
       paddingRight: 10,
       paddingTop: 8,
       color: COLORS.BRAND_BLACK,
+      fontFamily: FONT_FAMILY.primaryBold,
     },
   });
 };

package/src/constants/renderHTML.js CHANGED Viewed

@@ -26,25 +26,40 @@ export const customHTMLStyles = () => {
       opacity: 0.85,
     },
     li: {
-      fontSize: FONT_SIZE.h3,
-      lineHeight: FONT_SIZE.h3 * 1.5,
-      marginTop: 8,
+      fontSize: FONT_SIZE.p1,
+      lineHeight: FONT_SIZE.p1 * 1.7,
+      marginBottom: -10,
       color: COLORS.BRAND_BLACK,
-      opacity: 0.85,
+      opacity: 0.95,
     },
     ul: {
-      height: 3,
-      borderRadius: 20,
-      marginTop: 24,
-      marginRight: 8,
-      padding: 3,
+      marginTop: 2,
+      marginBottom: 2,
+      marginLeft: 10
+    },
+    'ul-bullet': {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
       backgroundColor: COLORS.BRAND_BLACK,
+      marginTop: 20,
+      marginRight: 8,
+      alignSelf: 'flex-start',
     },
     ol: {
-      marginTop: 16,
-      marginRight: 4,
+      marginTop: 7,
+      marginBottom: 7,
+      marginLeft: 10
+    },
+    'ol-number': {
+      fontSize: FONT_SIZE.p1,
+      lineHeight: FONT_SIZE.p1 * 1.7,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
+      marginTop: 7,
+      marginRight: 8,
+      alignSelf: 'flex-start',
+      fontWeight: 'bold',
     },
     a: {
       marginTop: 7,