@quintype/native-components 2.29.1-beta.0 → 2.29.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.29.1-beta.0",
+  "version": "2.29.1-beta.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "lint-staged": "^10.5.3",
     "prop-types": "15.7.2",
     "quintype-js": "1.2.1",
+    "react-csv-reader": "^4.0.0",
     "react-htmltext": "^0.40.2",
     "react-native-fast-image": ">=8.3.2",
     "react-native-image-pan-zoom": "^2.1.12",
@@ -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/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

@@ -103,7 +103,7 @@ export const JSEmbedElement = (props) => {
 
     return {
       html: getHTMLContent(props.element['embed-js']),
-      baseUrl,
+      baseUrl: extractBaseUrlFromIframe(getDecodedContent(props.element['embed-js'])),
     };
   };
 

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/Story/index.js

@@ -93,7 +93,7 @@ const getStoryCards = (
 
     {source.length > (storyType === STORY_TYPES.VIDEO_STORY ? 2 : 1)
       && isMiddleIndexOfArray(index, source)
-      && getAd(true, "body")}
+      && getAd(true)}
     {/* ^ Requesting mid-content-ad if there are > 1 card
       (> 2 cards in case of video story since the 1st card gets rendered in header). */}
 
@@ -106,7 +106,7 @@ const getStoryCards = (
           {cards.length === 1
             && source.length > (storyType === STORY_TYPES.VIDEO_STORY ? 2 : 1)
             && isMiddleIndexOfArray(index, source)
-            && getAd(true, "body")}
+            && getAd(true)}
           {/* ^ In the case of a story having just 1 card,
             requesting mid-content-Ad if there are > 1 story-elements in that card
             (> 2 story-elements in case of video story since the 1st story-element gets rendered in header). */}
@@ -407,7 +407,7 @@ export const Story = ({
           </View>))}
 
 
-      {getAd(false, "header")}
+      {getAd()}
 
       {getStoryCards(
         cards,

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/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,