@quintype/native-components 2.20.9 → 2.20.11

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.20.11](https://github.com/quintype/native-components/compare/v2.20.10...v2.20.11) (2023-08-10)
+
+### [2.20.10](https://github.com/quintype/native-components/compare/v2.20.9...v2.20.10) (2023-08-08)
+
+
+### Bug Fixes
+
+* **rich-text:** Changes html-render to strip-html to fix rtl :hamer: ([#208](https://github.com/quintype/native-components/issues/208)) ([1c6a1fd](https://github.com/quintype/native-components/commit/1c6a1fdafaa2833d846120e62c631fcb04c218ae))
+
 ### [2.20.9](https://github.com/quintype/native-components/compare/v2.20.8...v2.20.9) (2023-07-10)
 
 ### [2.20.8](https://github.com/quintype/native-components/compare/v2.20.7...v2.20.8) (2023-06-30)

package/package.json

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

package/src/components/PrimaryStoryCard/index.js

@@ -30,9 +30,10 @@ export const PrimaryStoryCard = (props) => {
     locale,
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
+    DATE_TIME_FORMAT,
   } = theme || {};
 
-  const DATE_FORMAT = 'd MMM, yyyy';
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
 
   const styles = storyStyles(COLORS, FONT_SIZE);
   const containerStyle = StyleSheet.flatten([

package/src/components/PrimaryStoryCardNew/index.js

@@ -27,6 +27,7 @@ const PrimaryStoryCardNewBase = (props) => {
     DARK_MODE,
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
+    DATE_TIME_FORMAT,
   } = theme || {};
 
   const translate = get(theme, ['translate'], (word) => word);
@@ -45,7 +46,7 @@ const PrimaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = 'd MMM, yyyy';
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
   const readTime = enableReadTimeOnStoryCards && story['read-time']
     ? `${story['read-time']} ${translate('min read')} · `
     : '';

package/src/components/SecondaryStoryCard/index.js

@@ -34,11 +34,12 @@ export const SecondaryStoryCard = (props) => {
     COLORS,
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
+    DATE_TIME_FORMAT,
   } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
-  const DATE_FORMAT = 'd MMM, yyyy';
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
 
   const containerStyle = StyleSheet.flatten([
     styles.container,

package/src/components/SecondaryStoryCardNew/index.js

@@ -32,6 +32,7 @@ const SecondaryStoryCardNewBase = (props) => {
     COLORS,
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
+    DATE_TIME_FORMAT,
   } = theme;
 
   const translate = get(theme, ['translate'], (word) => word);
@@ -50,7 +51,7 @@ const SecondaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = 'd MMM, yyyy';
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
   const readTime = enableReadTimeOnStoryCards && story['read-time']
     ? `${story['read-time']} ${translate('min read')} · `
     : '';

package/src/components/SlideshowStoryCard/index.js

@@ -1,8 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View, Linking } from 'react-native';
-import HTML from 'react-native-render-html';
-import { AppTheme, getScreenPercentageWidth } from '../../utils/index';
+import { View } from 'react-native';
+import {
+  AppTheme,
+  getScreenPercentageWidth,
+  stripHTML,
+} from '../../utils/index';
+import { Text } from '../index';
 import { LightBoxImage } from '../LightBoxImage';
 import { slideshowStoryCardStyles } from './styles';
 
@@ -10,7 +14,6 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
   const attribution = card['image-attribution'];
   const { title } = card;
   const { theme } = useContext(AppTheme);
-  const { CAN_COPY_TEXT } = theme;
   const styles = slideshowStoryCardStyles(theme);
   const imgData = {
     cdn,
@@ -23,24 +26,8 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
     <View style={styles.container}>
       <LightBoxImage data={imgData} />
       <View style={styles.textContainer}>
-        <HTML
-          html={title}
-          textSelectable={CAN_COPY_TEXT}
-          key={Math.random()}
-          baseFontStyle={styles.cardTitleText}
-          onLinkPress={(e, href) => {
-            Linking.openURL(href);
-          }}
-        />
-        <HTML
-          html={attribution}
-          textSelectable={CAN_COPY_TEXT}
-          key={Math.random()}
-          baseFontStyle={styles.attributionText}
-          onLinkPress={(e, href) => {
-            Linking.openURL(href);
-          }}
-        />
+        <Text style={styles.cardTitleText}>{stripHTML(title)}</Text>
+        <Text style={styles.attributionText}>{stripHTML(attribution)}</Text>
       </View>
     </View>
   );

package/src/components/SlideshowStoryCard/styles.js

@@ -6,13 +6,13 @@ export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.
   textContainer: {
     paddingHorizontal: 10,
     flexDirection: 'column',
-    flexWrap: 'wrap',
-    marginTop: 10,
+    marginVertical: 10,
   },
   cardTitleText: {
     opacity: 0.7,
     color: COLORS.BRAND_BLACK,
     fontFamily: FONT_FAMILY.secondary,
+    marginBottom: 5,
   },
   container: {
     flexDirection: 'column',

package/src/components/StoryGallery/index.js

@@ -3,7 +3,6 @@ import React, { useContext, useState, useRef } from 'react';
 import {
   View,
   Modal,
-  Linking,
   SafeAreaView,
   FlatList,
   TouchableOpacity,
@@ -11,15 +10,14 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import FastImage from 'react-native-fast-image';
-import HTML from 'react-native-render-html';
 import { styles } from './styles';
 import { Text } from '../index';
-import { AppTheme } from '../../utils/index';
+import { AppTheme, stripHTML } from '../../utils/index';
 import { LightBoxImage } from '../LightBoxImage';
 
 export const StoryGallery = ({ cdn, card }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, DARK_MODE, CAN_COPY_TEXT } = theme;
+  const { COLORS, DARK_MODE } = theme;
   const galleryStyles = styles(theme);
   const storyElements = card['story-elements'];
   const [showModal, setShowModal] = useState(false);
@@ -111,24 +109,8 @@ export const StoryGallery = ({ cdn, card }) => {
           resizeMode={FastImage.resizeMode.contain}
           style={galleryStyles.carouselImage}
         />
-        <HTML
-          html={title}
-          textSelectable={CAN_COPY_TEXT}
-          key={Math.random()}
-          baseFontStyle={galleryStyles.titleText}
-          onLinkPress={(e, href) => {
-            Linking.openURL(href);
-          }}
-        />
-        <HTML
-          html={attribution}
-          textSelectable={CAN_COPY_TEXT}
-          key={Math.random()}
-          baseFontStyle={galleryStyles.attributionText}
-          onLinkPress={(e, href) => {
-            Linking.openURL(href);
-          }}
-        />
+        <Text style={galleryStyles.titleText}>{stripHTML(title)}</Text>
+        <Text style={galleryStyles.attributionText}>{stripHTML(attribution)}</Text>
       </ScrollView>
     );
   };

package/src/components/StoryGallery/styles.js

@@ -58,7 +58,6 @@ export const styles = ({ FONT_SIZE }) => {
       height: '80%',
     },
     wrapper: {
-      paddingHorizontal: 10,
       flex: 1,
       backgroundColor: 'black',
       width: '100%',
@@ -69,7 +68,8 @@ export const styles = ({ FONT_SIZE }) => {
       opacity: 0.8,
       color: 'white',
       marginTop: 10,
-      marginHorizontal: 10,
+      paddingHorizontal: 10,
+      marginBottom: 5,
       fontFamily: FONT_FAMILY.secondary,
     },
     attributionText: {
@@ -78,7 +78,7 @@ export const styles = ({ FONT_SIZE }) => {
       fontSize: FONT_SIZE.h3,
       opacity: 0.8,
       color: 'white',
-      marginHorizontal: 10,
+      paddingHorizontal: 10,
       fontFamily: FONT_FAMILY.secondary,
     },
     leftArrow: {
@@ -108,11 +108,11 @@ export const styles = ({ FONT_SIZE }) => {
       justifyContent: 'center',
     },
     carouselImage: {
-      width: '100%',
-      height: 2*deviceHeight/3,
+      width: deviceWidth - 20,
+      height: (2 * deviceHeight) / 3,
     },
     carouselContainer: {
-      width: deviceWidth - 10,
+      width: deviceWidth - 20,
       margin: 10,
     },
     showMoreImageContainer: {

package/src/components/StoryHeader/index.js

@@ -1,15 +1,13 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  TouchableOpacity, View, Linking,
-} from 'react-native';
-import HTML from 'react-native-render-html';
+import { TouchableOpacity, View } from 'react-native';
 import {
   getImageMetadata,
   getScreenPercentageWidth,
   getTimeInFormat,
   AppTheme,
+  stripHTML,
 } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
 import {
@@ -21,8 +19,6 @@ import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/cont
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
 
-const DATE_FORMAT = 'd  MMMM yyyy h:mm a';
-
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -68,38 +64,25 @@ export const StoryHeader = (props) => {
   const { story } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
+
   const {
-    COLORS, CAN_COPY_TEXT, locale, FONT_FAMILY,
+    COLORS, locale, FONT_FAMILY, DATE_TIME_FORMAT,
   } = theme;
+
+  const DATE_FORMAT = `${DATE_TIME_FORMAT.dateFormat} ${DATE_TIME_FORMAT.timeFormat}`;
   const styles = storyHeaderStyles(COLORS, FONT_FAMILY);
-  const imgCaption = story['hero-image-caption'];
-  const attri = story['hero-image-attribution'];
-  const imgAttribution = imgCaption && attri ? ` | ${attri}` : attri;
+  const caption = story['hero-image-caption'];
+  const attribution = story['hero-image-attribution'];
+
 
   const showAttribution = () => {
-    if (!imgCaption && !imgAttribution) {
+    if (!caption && !attribution) {
       return null;
     }
     return (
       <View style={styles.captionContainerStyle}>
-        <HTML
-          html={imgCaption}
-          textSelectable={CAN_COPY_TEXT}
-          key={Math.random()}
-          baseFontStyle={styles.captionStyle}
-          onLinkPress={(evt, href) => {
-            Linking.openURL(href);
-          }}
-        />
-        <HTML
-          html={attri}
-          textSelectable={CAN_COPY_TEXT}
-          key={Math.random()}
-          baseFontStyle={styles.attributionStyle}
-          onLinkPress={(evt, href) => {
-            Linking.openURL(href);
-          }}
-        />
+        <Text style={styles.captionStyle}>{stripHTML(caption)}</Text>
+        <Text style={styles.attributionStyle}>{stripHTML(attribution)}</Text>
       </View>
     );
   };

package/src/components/StoryHeader/styles.js

@@ -26,11 +26,10 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
     opacity: 0.8,
   },
   captionStyle: {
-    padding: 10,
-    paddingBottom: 0,
     color: COLORS.BRAND_BLACK,
     fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
+    marginBottom: 5,
   },
   attributionStyle: {
     color: COLORS.BRAND_BLACK,
@@ -38,10 +37,8 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
     opacity: 0.8,
   },
   captionContainerStyle: {
-    paddingHorizontal: 5,
+    padding: 10,
     flexDirection: 'column',
-    flexWrap: 'wrap',
-    marginTop: 10,
   },
   sectionText: {
     color: COLORS.BRAND_1,

package/src/components/StoryImage/index.js

@@ -24,24 +24,15 @@ export const StoryImage = ({
 
   const styles = storyImageStyles(theme, imageData.metaData);
 
-  const getAttributionElement = () => {
-    if (!card['image-attribution']) return null;
-    return (
-      <Text style={styles.attributionText}>
-        {` | ${stripHTML(card['image-attribution'])}`}
-      </Text>
-    );
-  };
-
   return (
     <>
       <LightBoxImage data={imageData} currentLayout={currentLayout} />
 
       <View style={styles.titleContainer}>
         <View style={styles.imageMeta}>
-          <Text style={styles.cardTitleText}>
-            {stripHTML(card.title)}
-            {getAttributionElement()}
+          <Text style={styles.cardTitleText}>{stripHTML(card.title)}</Text>
+          <Text style={styles.attributionText}>
+            {stripHTML(card['image-attribution'])}
           </Text>
         </View>
         {sharePhotoCard && (
@@ -59,4 +50,5 @@ StoryImage.propTypes = {
   cdn: PropTypes.string.isRequired,
   share: PropTypes.func.isRequired,
   currentLayout: PropTypes.object,
+  storyType: PropTypes.string,
 };

package/src/components/StoryImage/styles.js

@@ -20,15 +20,15 @@ export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata = {}) => {
       fontSize: FONT_SIZE.h5,
       lineHeight: FONT_SIZE.h5 * 1.3,
       color: COLORS.BRAND_BLACK,
+      marginBottom: 5,
     },
     attributionText: {
       fontSize: FONT_SIZE.h5,
       lineHeight: FONT_SIZE.h5 * 1.3,
       color: COLORS.IMAGE_LIGHTGREY,
+      marginBottom: 5,
     },
     imageMeta: {
-      flexDirection: 'row',
-      alignItems: 'center',
       width: '85%',
     },
   });

package/src/themes/theme.js

@@ -45,3 +45,8 @@ export const FONT_FAMILY = {
 export const CAN_COPY_TEXT = false;
 export const NETWORK_TYPE = '3g';
 export const IMAGE_QUALITY = '30';
+
+export const DATE_TIME_FORMAT = {
+  dateFormat: 'dd MMM yyyy',
+  timeFormat: 'h:mm aa',
+};

package/src/utils/context.js

@@ -6,6 +6,7 @@ import {
   CAN_COPY_TEXT,
   NETWORK_TYPE,
   IMAGE_QUALITY,
+  DATE_TIME_FORMAT,
 } from '../themes/theme';
 
 export const THEME_CONFIG = {
@@ -16,5 +17,6 @@ export const THEME_CONFIG = {
   NETWORK_TYPE,
   locale: 'enIN',
   IMAGE_QUALITY,
+  DATE_TIME_FORMAT,
 };
 export const AppTheme = createContext(THEME_CONFIG);