@quintype/native-components 2.30.11-beta.0 → 2.30.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.30.11-beta.0",
+  "version": "2.30.12",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/Icons/CloseIcon/close-icon.js

@@ -9,6 +9,5 @@ export const CloseIcon = (props) => {
   const color = COLORS.BRAND_BLACK;
   return <Svg height={24} width={24} {...props}>
     <Path fill={color} d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-    <Path d="M0 0h24v24H0z" />
   </Svg>
 }

package/src/components/CollectionCard/index.js

@@ -17,7 +17,7 @@ const CollectionCardBase = ({
   onStoryPress,
   collectionTestID,
   offset,
-  horizontalPadding,
+  horizontalPadding = 12,
   initialOffset, /* Number of items to load on first load */
   hideCollectionTitle,
 }) => {
@@ -74,8 +74,4 @@ CollectionCardBase.propTypes = {
   hideCollectionTitle: PropTypes.bool,
 };
 
-CollectionCardBase.defaultProps = {
-  horizontalPadding: 12,
-};
-
 export const CollectionCard = memo(CollectionCardBase);

package/src/components/CollectionTitle/index.js

@@ -10,11 +10,12 @@ import { Text } from '../index';
 import { collectionTitleStyles } from './styles';
 
 const CollectionTitleBase = (props) => {
+  const horizontalPadding = props.horizontalPadding ?? 12;
   const { theme } = useContext(AppTheme);
   const styles = collectionTitleStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
-    { paddingHorizontal: props.horizontalPadding },
+    { paddingHorizontal: horizontalPadding },
   ]);
   const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
 
@@ -36,8 +37,4 @@ CollectionTitleBase.propTypes = TouchableOpacityProps
     horizontalPadding: PropTypes.number,
   };
 
-CollectionTitleBase.defaultProps = {
-  horizontalPadding: 12,
-};
-
 export const CollectionTitle = memo(CollectionTitleBase);

package/src/components/CustomSwitch/index.js

@@ -1,8 +1,7 @@
 import PropTypes from "prop-types";
 import React, { useContext } from "react";
-import { Switch, View } from "react-native";
+import { Platform, Switch, View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
-import { Platform } from "react-native";
 
 import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 import { AppTheme } from "../../utils";
@@ -21,9 +20,9 @@ export const CustomSwitch = ({
   const { COLORS } = theme;
   const styles = customSwitchStyles();
 
-  const handleToggle = () => {
+  const handleToggle = (nextValue) => {
     if (typeof callback === "function") {
-      callback(!isEnabled);
+      callback(nextValue);
     }
   };
 

package/src/components/SecondaryStoryCard/index.js

@@ -25,6 +25,7 @@ import PremiumIcons from '../../Icons/PremiumIcons/index';
 
 const SecondaryStoryCardBase = (props) => {
   const { story = {} } = props;
+  const horizontalPadding = props.horizontalPadding ?? 12;
   const { theme } = useContext(AppTheme);
   const {
     COLORS,
@@ -36,7 +37,7 @@ const SecondaryStoryCardBase = (props) => {
   const styles = storyStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
-    { paddingHorizontal: props.horizontalPadding },
+    { paddingHorizontal: horizontalPadding },
   ]);
   const headlineStyle = StyleSheet.flatten([
     styles.headline,
@@ -93,7 +94,7 @@ const SecondaryStoryCardBase = (props) => {
         </View>
         <View style={styles.icon}>{props.iconComponent}</View>
       </TouchableOpacity>
-      <View style={[styles.separatorLine, { marginHorizontal: props.horizontalPadding }]} />
+      <View style={[styles.separatorLine, { marginHorizontal: horizontalPadding }]} />
     </>
   );
 };
@@ -106,9 +107,4 @@ SecondaryStoryCardBase.propTypes = TouchableOpacityProps && {
   horizontalPadding: PropTypes.number,
 };
 
-SecondaryStoryCardBase.defaultProps = {
-  cdn: '',
-  horizontalPadding: 12,
-};
-
-export const SecondaryStoryCard = memo(SecondaryStoryCardBase);
+export const SecondaryStoryCard = memo(SecondaryStoryCardBase);

package/src/components/StoryGallery/index.js

@@ -69,26 +69,6 @@ export const StoryGallery = ({ cdn, card }) => {
     );
   };
 
-  const handleScroll = (event) => {
-    const xOffset = event.nativeEvent?.contentOffset?.x;
-    const contentWidth = event.nativeEvent?.contentSize?.width;
-    const layoutWidth = event.nativeEvent?.layoutMeasurement?.width;
-    const value = xOffset / contentWidth;
-    const leftThreshold = contentWidth / (2 * totalSlides);
-    const rightThreshold = contentWidth - 1.5 * layoutWidth;
-
-    if (
-      leftThreshold <= xOffset
-      && (layoutWidth > xOffset || rightThreshold > xOffset)
-    ) {
-      setCurrentTabIndex(value * totalSlides);
-    } else if (xOffset < leftThreshold) {
-      setCurrentTabIndex(0);
-    } else if (xOffset >= rightThreshold) {
-      setCurrentTabIndex(totalSlides - 1);
-    }
-  };
-
   const closeModalHandler = () => {
     setShowModal(false);
     setCurrentTabIndex(0);
@@ -140,7 +120,7 @@ export const StoryGallery = ({ cdn, card }) => {
 
             const style = galleryStyles.fullWidth;
             return (
-              <TouchableOpacity style={[galleryStyles.subContainer,{margin:4}]}>
+              <TouchableOpacity style={[galleryStyles.subContainer, { margin: 4 }]}>
                 <LightBoxImage
                   onClickHandler={onPressHandler}
                   hero={!!data.metaData['focus-point']}
@@ -204,7 +184,13 @@ export const StoryGallery = ({ cdn, card }) => {
                 keyExtractor={(item) => item.id}
                 horizontal
                 extraData={currentIndex}
-                onScroll={handleScroll}
+                onMomentumScrollEnd={(event) => {
+                  const index = Math.round(
+                    event.nativeEvent.contentOffset.x /
+                    event.nativeEvent.layoutMeasurement.width
+                  );
+                  setCurrentTabIndex(index);
+                }}
                 initialScrollIndex={index}
                 onScrollToIndexFailed={(info) => {
                   const wait = new Promise((resolve) => setTimeout(resolve, 500));

package/src/components/StoryHeader/index.js

@@ -12,11 +12,10 @@ import { STORY_TYPES } from '../../utils/story-types';
 import { YouTubePlayer } from '../YouTubePlayer';
 import {
   AuthorRow, ResponsiveImage,
-  StoryTitle, Text
+  StoryTitle, Text, JSEmbedElement
 } from '../index';
 import { storyHeaderStyles } from './styles';
 
-import { DailyMotionPlayer } from '../DailyMotionPlayer';
 import { RatingLayout } from '../Rating';
 import CustomHtmlParser from './../Html/index';
 
@@ -44,7 +43,7 @@ const getHeroComponent = (props) => {
       if (!firstVideoElement) return null;
       switch (firstVideoElement.type) {
         case 'jsembed': {
-          return <DailyMotionPlayer element={firstVideoElement} />;
+          return <JSEmbedElement element={firstVideoElement} appReferer={appReferer} />;
         }
         case 'youtube-video': {
           return (

package/src/components/TwoColLayout/index.js

@@ -20,7 +20,7 @@ const TwoColLayoutBase = ({
     onStoryPress,
     collectionTestID,
     offset,
-    horizontalPadding,
+    horizontalPadding = 12,
     initialOffset,
     hideCollectionTitle,
 }) => {
@@ -96,8 +96,4 @@ TwoColLayoutBase.propTypes = {
     hideCollectionTitle: PropTypes.bool,
 };
 
-TwoColLayoutBase.defaultProps = {
-    horizontalPadding: 12,
-};
-
 export const TwoColLayout = memo(TwoColLayoutBase);

package/src/utils/textUtils.js

@@ -7,7 +7,7 @@ export const alterQuoteData = (node) => {
 
   const bigFactAttribution = parent.attribs.class === 'bigfact-description';
 
-  if (parent && parent.name === 'span' && attribution) return ' ';
+  if (parent && parent.name === 'span' && attribution) return '\n';
 
-  if (parent && parent.name === 'div' && bigFactAttribution) return ' ';
+  if (parent && parent.name === 'div' && bigFactAttribution) return '\n';
 };