@quintype/native-components 2.29.1 → 2.29.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.29.1",
+  "version": "2.29.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -19,6 +19,7 @@
     "react-htmltext": "^0.40.2",
     "react-native-fast-image": ">=8.3.2",
     "react-native-image-pan-zoom": "^2.1.12",
+    "react-native-is-detox": "^1.2.3",
     "react-native-lightbox": "0.8.1",
     "react-native-modal": "^13.0.1",
     "react-native-render-html": "^4.2.3",
@@ -32,11 +33,11 @@
     "react": ">=17.0.2",
     "react-native": ">=0.67.5",
     "react-native-blob-util": ">=6.7.4",
+    "react-native-device-info": "^11.1.0",
     "react-native-fast-image": ">=8.3.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pdf": ">=6.7.4",
     "react-native-vector-icons": "^10.0.0",
-    "react-native-device-info": "^11.1.0",
     "react-native-webview": ">=11.0.0"
   },
   "devDependencies": {

package/src/components/AuthorRow/styles.js

@@ -47,6 +47,7 @@ export const authorRowStyleSheet = (appThemeContext) => {
     readtimeComponent: {
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 10,
     },
   });
 };

package/src/components/Html/index.js

@@ -1,10 +1,13 @@
 import { Text } from "@quintype/native-components/src/components/Text";
 import isHTML from "is-html";
-import React from "react";
+import React, { useContext } from 'react';
 import { I18nManager, Linking, StyleSheet } from "react-native";
 import HTML from "react-native-render-html";
+import { AppTheme } from "../../utils";
+
 
 const CustomHtmlParser = ({ text, textStyle={}, containerStyle={} }) => {
+  const { useDeeplinkHandler } = useContext(AppTheme);
   const textStyles = StyleSheet.flatten([
     textStyle,
     {
@@ -18,7 +21,7 @@ const CustomHtmlParser = ({ text, textStyle={}, containerStyle={} }) => {
         key={Math.random()}
         baseFontStyle={textStyles}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href);
         }}
         containerStyle={containerStyle}
       />

package/src/components/JSEmbedElement/index.js

@@ -40,7 +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">
         var interValId;
@@ -78,6 +78,7 @@ export const JSEmbedElement = (props) => {
   const [height, setHeight] = useState(-1);
   const webViewRef = useRef(null);
   const screenWidth = useWindowDimensions().width;
+  const screenHeight = useWindowDimensions().height;
   const width = get(
     props,
     ['currentLayout', 'width'],
@@ -92,18 +93,34 @@ export const JSEmbedElement = (props) => {
     setHeight(parseInt(event.nativeEvent.data));
   };
 
-  const constructSource = () => {
-    const urlMapper = {
-      [STORY_ELEMENT_SUBTYPES.TWITTER]: 'https://twitter.com',
-      [STORY_ELEMENT_SUBTYPES.FACEBOOK]: 'https://facebook.com',
-      [STORY_ELEMENT_SUBTYPES.INSTAGRAM]: 'https://instagram.com',
-    };
+// 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
+
+    // Manually extract the base URL (protocol + host + pathname)
+    const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
+    const baseUrlMatch = srcUrl.match(urlPattern);
 
-    const baseUrl = urlMapper[props.element.subtype] || 'https://twitter.com';
+    if (baseUrlMatch) {
+      return baseUrlMatch[1]; // Return the base URL
+    } else {
+      console.error('Invalid URL format.');
+      return null;
+    }
+  } else {
+    console.error('Iframe src not found.');
+    return null;
+  }
+};
 
+  const constructSource = () => {
     return {
       html: getHTMLContent(props.element['embed-js']),
-      baseUrl,
+      baseUrl: extractBaseUrlFromIframe(getDecodedContent(props.element['embed-js'])),
     };
   };
 
@@ -113,7 +130,7 @@ export const JSEmbedElement = (props) => {
         ref={webViewRef}
         style={{
           width,
-          height: Number(height),
+          height: Math.min(Number(height), screenHeight-250),
           flex: 0,
           opacity: 0.99,
         }}
@@ -132,6 +149,7 @@ export const JSEmbedElement = (props) => {
         source={constructSource()}
         mixedContentMode="always"
         mediaPlaybackRequiresUserAction={true}
+        nestedScrollEnabled={true}
       />
     </View>
   }
@@ -162,6 +180,7 @@ export const JSEmbedElement = (props) => {
         mixedContentMode="always"
         mediaPlaybackRequiresUserAction={true}
         injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
+        nestedScrollEnabled={true}
       />
     </View>
   );

package/src/components/PDFReader/index.js

@@ -20,7 +20,7 @@ export const PDFReader = ({ card, story }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier } = theme;
+  const { COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier, translate } = theme;
 
   const showModal = () => {
     setModalVisible(true);
@@ -58,7 +58,9 @@ export const PDFReader = ({ card, story }) => {
           trustAllCerts={Platform.OS === 'ios'}
         />
       </Modal>
+      <Text style={{color:COLORS.BRAND_BLACK, fontSize: 25, fontWeight: 'bold', marginTop:40, marginLeft:15}}>{translate('Attachment')}</Text>
       <View style={styles.pdfContainer}>
+
         <View style={styles.pdfFileText}>
           <TouchableOpacity style={styles.pdfButton} onPress={showModal}>
             <Icon name="file-document-outline" size={56} style={styles.fileIcon} />

package/src/components/PDFReader/styles.js

@@ -35,6 +35,10 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier) =>
   },
   pdfContainer: {
     flexDirection: 'row',
+    marginBottom:40,
+    backgroundColor: COLORS.MONO6,
+    margin:10,
+    borderRadius: 5,
   },
   pdfFileText: {
     width: '80%',

package/src/components/Pagination/index.js

@@ -0,0 +1,76 @@
+import React, {useContext} from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  AppTheme
+} from "@quintype/native-components";
+import Icon from "react-native-vector-icons/MaterialIcons";
+import { Text } from '@quintype/native-components/src/components/Text';
+import {styles as paginationStyles}  from "./styles";
+
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS, FONT_SIZE } = theme;
+  const styles = paginationStyles(COLORS, FONT_SIZE);
+  if(totalPages == 1) return null;
+  const range = 2;
+
+  const getPages = () => {
+    const pages = [];
+    let start = Math.max(1, currentPage - range);
+    let end = Math.min(totalPages, currentPage + range);
+
+    if (start > 1) pages.push('...');
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    if (end < totalPages) pages.push('...');
+
+    return pages;
+  };
+
+
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+
+  const pages = getPages();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        style={[styles.arrow, currentPage === 1 && styles.disabled]}>
+        <Icon style={styles.iconStyle} name="arrow-back-ios-new" color={COLORS.BRAND_BLACK} size={FONT_SIZE.h5}/>
+      </TouchableOpacity>
+
+      {pages.map((page, index) => (
+        <TouchableOpacity
+          key={index}
+          onPress={() => handlePageChange(page)}
+          disabled={page === '...'}
+          style={[
+            styles.pageButton,
+            page === currentPage && styles.activePage,
+          ]}
+        >
+          <Text style={styles.pageText}>
+            {page}
+          </Text>
+        </TouchableOpacity>
+      ))}
+      <TouchableOpacity
+        onPress={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        style={[styles.arrow,{backgroundColor:COLORS.BRAND_WHITE}, currentPage === totalPages && styles.disabled]}>
+
+        <Icon style={styles.iconStyle} name="arrow-forward-ios" color={COLORS.BRAND_BLACK} size={FONT_SIZE.h5}/>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+
+export default Pagination;

package/src/components/Pagination/styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = (COLORS, FONT_SIZE) => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20,
+    marginHorizontal:20,
+    borderRadius:5,
+  },
+  arrow: {
+    padding: 5,
+    borderRadius: 5,
+    backgroundColor: COLORS.BRAND_WHITE,
+    height:38,
+    paddingHorizontal:10,
+    shadowColor: "rgba(190,190,190,0.3)",
+    shadowOffset: { width: 0, height: 2.0 },
+    shadowOpacity: 1,
+    shadowRadius: 4,
+    elevation: 10,
+  },
+  arrowText: {
+    fontSize: 20,
+    color: COLORS.BRAND_BLACK,
+  },
+  pageButton: {
+    marginHorizontal: 2,
+    padding: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.BRAND_WHITE,
+    minHeight:38,
+    paddingHorizontal:12,
+    shadowColor: "rgba(190,190,190,0.3)",
+    shadowOffset: { width: 0, height: 2.0 },
+    shadowOpacity: 1,
+    shadowRadius: 4,
+    elevation: 100,
+  },
+  pageText: {
+    color: COLORS.BRAND_BLACK,
+    fontSize:FONT_SIZE.h6
+  },
+  activePage: {
+    borderColor: COLORS.BRAND_1,
+    minHeight:38,
+    padding: 10,
+    borderWidth:1
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    color: COLORS.MONO6,
+  },
+  iconStyle:{
+    alignSelf: 'center',
+    marginTop:7
+  }
+});

package/src/components/Story/index.js

@@ -20,6 +20,7 @@ import Icon from 'react-native-vector-icons/AntDesign';
 import TrackPlayer, { usePlaybackState, Capability, State, AppKilledPlaybackBehavior, useProgress } from "react-native-track-player";
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
+import { isDetoxSync } from 'react-native-is-detox';
 
 import Modal from 'react-native-modal';
 
@@ -162,7 +163,8 @@ export const Story = ({
   const [showModal, setShowModal] = useState(false);
   const [audioRate, setAudioRate] = useState(1);
   const playbackState = usePlaybackState();
-  const progress = useProgress();
+  const isDetox = isDetoxSync();
+  const progress = useProgress(isDetox ? 2000 : undefined);
   const [isFinishedPlaying, setFinishedPlaying] = useState(false);
 
 

package/src/components/Story/styles.js

@@ -54,6 +54,7 @@ export const storyStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   },
   ttsStoryButtonStyle:{
     flexDirection:'row',
+    marginTop: 10,
     marginLeft:10,
     alignItems:'center',
     padding:10,

package/src/components/StoryContent/index.js

@@ -103,12 +103,12 @@ export const StoryContent = ({
       return <AllComponents.TitleElement card={storyElement} />;
     }
     case STORY_ELEMENT_TYPES.JS_EMBED: {
-      switch (storyElement.subtype) {
-        case STORY_ELEMENT_SUBTYPES.DAILY_MOTION: {
-          return <DailyMotionPlayer element={storyElement} />;
-        }
-        default: break;
-      }
+      // switch (storyElement.subtype) {
+      //   case STORY_ELEMENT_SUBTYPES.DAILY_MOTION: {
+      //     return <DailyMotionPlayer element={storyElement} />;
+      //   }
+      //   default: break;
+      // }
       return <AllComponents.JSEmbedElement element={storyElement} currentLayout={currentLayout} />;
     }
     default:

package/src/components/StoryGallery/index.js

@@ -140,7 +140,7 @@ export const StoryGallery = ({ cdn, card }) => {
 
             const style = galleryStyles.fullWidth;
             return (
-              <TouchableOpacity style={galleryStyles.subContainer}>
+              <TouchableOpacity style={[galleryStyles.subContainer,{margin:4}]}>
                 <LightBoxImage
                   onClickHandler={onPressHandler}
                   hero={!!data.metaData['focus-point']}

package/src/components/StoryGallery/styles.js

@@ -11,20 +11,22 @@ export const styles = ({ FONT_SIZE }, screenDimensions) => {
     container: {
       width: '100%',
       paddingHorizontal: 10,
+
     },
     imgContainer: {
       width: '100%',
       flexDirection: 'row',
       flexWrap: 'wrap',
+
     },
     halfWidth: {
       width: (deviceWidth - 30) / 2,
       height: 124,
     },
     fullWidth: {
-      width: (deviceWidth - 40) / 3,
-      height: (deviceWidth - 40) / 3,
-      margin: 2.5,
+      width: (deviceWidth - 45) / 3,
+      height: (deviceWidth - 45) / 3,
+      margin: 0,
     },
     descText: {
       fontSize: FONT_SIZE.h2,

package/src/components/Table/index.js

@@ -1,10 +1,11 @@
-import React, { useContext } from 'react';
-import { View , ScrollView } from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { View , ScrollView, Button } from 'react-native';
 import get from 'lodash/get';
 import { formatData } from '../../utils/tableUtils';
 import { tableStyles } from './styles';
 import { Text } from '../index';
 import { AppTheme } from '../../utils';
+import Pagination from '@quintype/native-components/src/components/Pagination';
 
 export const Table = ({ card }) => {
   const csv = get(card, ['data', 'content'], '');
@@ -18,11 +19,18 @@ export const Table = ({ card }) => {
     {},
   );
 
-  const tableData = [tableHeaderRow].concat(headerData);
+  const tableData = headerData;
+  const [filteredData, setFilteredData] = React.useState([]);
+  const [activePage, setActivePage] = React.useState(1);
+
+  useEffect(()=>{
+    const nextData = tableData.slice(Math.max(0, (activePage - 1) * 10), activePage * 10);
+    setFilteredData([tableHeaderRow].concat(nextData))
+  },[activePage])
 
   const renderTableBody = () => (
     <View style={styles.tableBody}>
-      {tableData.map((data) => (
+      {filteredData.map((data) => (
         <View style={styles.tableRow}>
           {headerFields.map((headerField) => (
             <View style={styles.tableHeaderTitle}>
@@ -34,11 +42,18 @@ export const Table = ({ card }) => {
     </View>
   );
 
+  const onPageChange = (page) => {
+    setActivePage(page);
+  };
+
   return (
+    <>
+    {filteredData.length > 1 && <Pagination currentPage={activePage} totalPages={parseInt(tableData.length % 10 === 0 ? tableData.length /10 : tableData.length /10+1)} onPageChange={onPageChange}/>}
     <ScrollView horizontal>
       <View style={styles.tableContainer}>
-        <View>{renderTableBody()}</View>
+        {filteredData && <View>{renderTableBody()}</View>}
       </View>
     </ScrollView>
+    </>
   );
 };

package/src/components/TextA/index.js

@@ -8,7 +8,7 @@ import HTML from 'react-native-render-html';
 import { customHTMLStyles } from '../../constants/renderHTML';
 
 export const TextA = ({ answer }) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const { COLORS, FONT_SIZE, lineHeightMultiplier, FONT_FAMILY} = theme;
   const styles = textAnswerStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
   const customTagsStyles = customHTMLStyles();
@@ -29,7 +29,7 @@ export const TextA = ({ answer }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextBigFact/index.js

@@ -40,7 +40,7 @@ export const TextBigFact = ({ text, attribution, id }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          useDeeplinkHandler(href, props?.navigation);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextBlockQuote/index.js

@@ -36,7 +36,7 @@ export const TextBlockQuote = ({ text, attribution }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          useDeeplinkHandler(href, props?.navigation);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextBlurb/index.js

@@ -35,7 +35,7 @@ export const TextBlurb = ({ text }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          useDeeplinkHandler(href, props?.navigation);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextQ/index.js

@@ -7,7 +7,7 @@ import { AppTheme } from '@quintype/native-components/src/utils/context';
 import HTML from 'react-native-render-html';
 import { customHTMLStyles } from '../../constants/renderHTML';
 export const TextQ = ({ question }) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const { COLORS, FONT_SIZE, lineHeightMultiplier, FONT_FAMILY } = theme;
   const styles = textQuestionStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
   const customTagsStyles = customHTMLStyles();
@@ -28,7 +28,7 @@ export const TextQ = ({ question }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextQuote/index.js

@@ -11,7 +11,7 @@ import { AppTheme } from '../../utils/context';
 import { alterQuoteData } from '../../utils';
 
 export const TextQuote = ({ text, attribution }) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT, lineHeightMultiplier,
   } = theme;
@@ -39,7 +39,7 @@ export const TextQuote = ({ text, attribution }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextSummary/index.js

@@ -9,7 +9,7 @@ import { textSummaryStyles } from './styles';
 import { AppTheme } from '../../utils/context';
 
 export const TextSummary = (props) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     FONT_FAMILY, FONT_SIZE, COLORS, CAN_COPY_TEXT, lineHeightMultiplier,
   } = theme;
@@ -34,7 +34,7 @@ export const TextSummary = (props) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href);
         }}
         tagsStyles={{
           del: customTagsStyles.del,