@quintype/native-components 2.22.5-beta.0 → 2.22.6

package/package.json

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

package/src/components/AlsoRead/index.js

@@ -1,10 +1,10 @@
-import get from 'lodash/get';
 import React, { useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { FallbackIcon } from '../../Icons/FallBackIcon';
-import { AppTheme } from '../../utils';
+import get from 'lodash/get';
+import { View, TouchableOpacity } from 'react-native';
 import { ResponsiveImage, Text } from '../index';
 import { alsoReadStyles } from './styles';
+import { FallbackIcon } from '../../Icons/FallBackIcon';
+import { AppTheme } from '../../utils';
 
 export const AlsoRead = (props) => {
   const {

package/src/components/AuthorRow/index.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { ActionText } from '../ActionText/ActionText';
 import { ResponsiveImage, Text } from '../index';
+import { ActionText } from '../ActionText/ActionText';
 
-import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
-import { AppTheme } from '../../utils';
 import { authorRowStyleSheet } from './styles';
+import { AppTheme } from '../../utils';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 export const AuthorRow = ({
   authors,

package/src/components/BackNavigator/index.js

@@ -1,18 +1,18 @@
-import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  I18nManager,
-  StyleSheet,
-  TouchableOpacity,
   View,
+  StyleSheet,
   ViewPropTypes,
+  TouchableOpacity,
+  I18nManager,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/AntDesign';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import PropTypes from 'prop-types';
 import { AppTheme } from '../../utils/context';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
-import { Text } from '../Text';
 import { backNavigatorStyles } from './styles';
+import { Text } from '../Text';
 
 export const BackNavigator = (props) => {
   const { theme } = useContext(AppTheme);

package/src/components/Button/index.js

@@ -6,10 +6,10 @@ import {
   View,
   ViewPropTypes,
 } from "react-native";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 import { AppTheme } from "../../utils";
 import { Text } from "../Text";
 import { styles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const Button = (props) => {
   const { icon, text, onPress } = props;

package/src/components/CollectionCard/index.js

@@ -1,22 +1,20 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
-import React, { memo } from 'react';
+import React from 'react';
 import { getScreenPercentageWidth } from '../../utils/index';
 import {
   CollectionTitle,
   PrimaryStoryCard,
   SecondaryStoryCard,
-  ShareButton,
 } from '../index';
 
-const CollectionCardBase = ({
+export const CollectionCard = ({
   cdn,
   collectionName,
   stories,
   onCollectionPress,
   onStoryPress,
-  collectionTestID,
   offset,
   horizontalPadding,
   initialOffset, /* Number of items to load on first load */
@@ -24,10 +22,10 @@ const CollectionCardBase = ({
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
-
   return (
     <>
-      {!hideCollectionTitle && (
+      {!hideCollectionTitle
+      && (
       <CollectionTitle
         title={collectionName}
         onPress={onCollectionPress}
@@ -35,13 +33,11 @@ const CollectionCardBase = ({
       />
       )}
       <PrimaryStoryCard
-        collectionTestID={collectionTestID}
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
         }}
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
-        iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
         imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
         horizontalPadding={horizontalPadding}
       />
@@ -49,13 +45,11 @@ const CollectionCardBase = ({
         const secondaryStory = get(currentStory, ['story'], currentStory);
         return (
           <SecondaryStoryCard
-            collectionTestID={collectionTestID}
             onPress={() => onStoryPress(secondaryStory)}
-            key={secondaryStory?.id}
+            key={`${secondaryStory?.id}`}
             cdn={cdn}
             story={secondaryStory}
-            iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
-            imageWidth={getScreenPercentageWidth(28)}
+            imageWidth={getScreenPercentageWidth(40)}
             horizontalPadding={horizontalPadding}
           />
         );
@@ -63,22 +57,18 @@ const CollectionCardBase = ({
     </>
   );
 };
-
-CollectionCardBase.propTypes = {
-  offset: PropTypes.number,
+CollectionCard.propTypes = {
   initialOffset: PropTypes.number,
   cdn: PropTypes.string.isRequired,
-  collectionName: PropTypes.string,
+  collectionName: PropTypes.string.isRequired,
   stories: PropTypes.array.isRequired,
   onCollectionPress: PropTypes.func,
   onStoryPress: PropTypes.func,
-  collectionTestID: PropTypes.string,
+  offset: PropTypes.number,
   horizontalPadding: PropTypes.number,
   hideCollectionTitle: PropTypes.bool,
 };
 
-CollectionCardBase.defaultProps = {
+CollectionCard.defaultProps = {
   horizontalPadding: 12,
 };
-
-export const CollectionCard = memo(CollectionCardBase);

package/src/components/CollectionCardNew/index.js

@@ -0,0 +1,84 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
+import React, { memo } from 'react';
+import { getScreenPercentageWidth } from '../../utils/index';
+import {
+  CollectionTitleNew,
+  PrimaryStoryCardNew,
+  SecondaryStoryCardNew,
+  ShareButton,
+} from '../index';
+
+const CollectionCardNewBase = ({
+  cdn,
+  collectionName,
+  stories,
+  onCollectionPress,
+  onStoryPress,
+  collectionTestID,
+  offset,
+  horizontalPadding,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
+}) => {
+  const sliceLimit = offset || initialOffset || 5;
+  const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
+
+  return (
+    <>
+      {!hideCollectionTitle && (
+      <CollectionTitleNew
+        title={collectionName}
+        onPress={onCollectionPress}
+        horizontalPadding={horizontalPadding}
+      />
+      )}
+      <PrimaryStoryCardNew
+        collectionTestID={collectionTestID}
+        onPress={() => {
+          !isEmpty(stories) && onStoryPress(primaryStory);
+        }}
+        cdn={cdn}
+        story={!isEmpty(stories) ? primaryStory : {}}
+        iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
+        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
+        horizontalPadding={horizontalPadding}
+      />
+      {stories.slice(1, sliceLimit).map((currentStory) => {
+        const secondaryStory = get(currentStory, ['story'], currentStory);
+        return (
+          <SecondaryStoryCardNew
+            collectionTestID={collectionTestID}
+            onPress={() => onStoryPress(secondaryStory)}
+            key={secondaryStory?.id}
+            cdn={cdn}
+            story={secondaryStory}
+            iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
+            imageWidth={getScreenPercentageWidth(28)}
+            horizontalPadding={horizontalPadding}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+CollectionCardNewBase.propTypes = {
+  offset: PropTypes.number,
+  initialOffset: PropTypes.number,
+  cdn: PropTypes.string.isRequired,
+  collectionName: PropTypes.string,
+  stories: PropTypes.array.isRequired,
+  onCollectionPress: PropTypes.func,
+  onStoryPress: PropTypes.func,
+  collectionTestID: PropTypes.string,
+  horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
+};
+
+CollectionCardNewBase.defaultProps = {
+  horizontalPadding: 12,
+};
+
+export const CollectionCardNew = memo(CollectionCardNewBase);

package/src/components/CollectionTitle/CollectionTitle.test.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { CollectionTitle } from './index';
+import { mockContext } from '../../utils';
+
+test('renders correctly', () => {
+  const component = mockContext(<CollectionTitle />);
+  const tree = renderer.create(component).toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/components/CollectionTitle/__snapshots__/CollectionTitle.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `null`;

package/src/components/CollectionTitle/index.js

@@ -1,42 +1,61 @@
 import PropTypes from 'prop-types';
-import React, { memo, useContext } from 'react';
+import React, { useContext } from 'react';
 import {
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewStyle,
   StyleSheet,
-  TouchableOpacity
 } from 'react-native';
-import { AppTheme } from '../../utils';
+
 import { Text } from '../index';
-import { collectionTitleStyles } from './styles';
 
-const CollectionTitleBase = (props) => {
+import { collectionStyles } from './styles';
+import { AppTheme } from '../../utils';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+
+export const CollectionTitle = (props) => {
   const { theme } = useContext(AppTheme);
-  const styles = collectionTitleStyles(theme);
+  const styles = collectionStyles(theme);
   const containerStyle = StyleSheet.flatten([
-    styles.container,
+    styles.titleContainer,
     { paddingHorizontal: props.horizontalPadding },
   ]);
-  const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
+  const titleStyle = StyleSheet.flatten([styles.titleStyle, props.titleStyle]);
+  const indicatorStyle = StyleSheet.flatten([
+    styles.indicatorStyle,
+    props.indicatorStyle,
+  ]);
 
   if (!props.title) {
     return null;
   }
 
   return (
-    <TouchableOpacity style={containerStyle} onPress={props.onPress}>
-      <Text style={titleStyle}>{props.title}</Text>
+    <TouchableOpacity
+      style={containerStyle}
+      onPress={props.onPress}
+      testID={COMP_GENERAL_CONSTANTS.collectionTitleTouch}
+    >
+      <Text
+        style={titleStyle}
+        testID={COMP_GENERAL_CONSTANTS.collectionTitleText}
+      >
+        {props.title}
+      </Text>
+      <View style={indicatorStyle} />
     </TouchableOpacity>
   );
 };
 
-CollectionTitleBase.propTypes = TouchableOpacityProps
-  && {
-    title: PropTypes.string,
-    titleStyle: TextStyle,
-    horizontalPadding: PropTypes.number,
-  };
+CollectionTitle.propTypes = TouchableOpacityProps && {
+  title: PropTypes.string,
+  titleStyle: TextStyle,
+  indicatorStyle: ViewStyle,
+  horizontalPadding: PropTypes.number,
+};
 
-CollectionTitleBase.defaultProps = {
+CollectionTitle.defaultProps = {
   horizontalPadding: 12,
 };
-
-export const CollectionTitle = memo(CollectionTitleBase);

package/src/components/CollectionTitle/styles.js

@@ -1,20 +1,22 @@
 import { StyleSheet } from 'react-native';
 
-export const collectionTitleStyles = (appThemeContext) => {
-  const { COLORS, FONT_SIZE, FONT_FAMILY } = appThemeContext;
-
+export const collectionStyles = (appThemeContext) => {
+  const { COLORS, FONT_SIZE } = appThemeContext;
   return StyleSheet.create({
-    container: {
-      justifyContent: 'center',
+    titleContainer: {
       backgroundColor: COLORS.BRAND_WHITE,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      marginTop: 8,
+      paddingVertical: 12,
+      justifyContent: 'center',
     },
-    title: {
-      fontSize: FONT_SIZE.h3,
-      fontFamily: FONT_FAMILY.secondaryBold,
+    titleStyle: {
+      fontSize: FONT_SIZE.h1,
       color: COLORS.BRAND_5,
     },
+    indicatorStyle: {
+      marginTop: 8,
+      width: 30,
+      height: 3,
+      backgroundColor: COLORS.BRAND_1,
+    },
   });
 };

package/src/components/CollectionTitleNew/index.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { useContext, memo } from 'react';
+import {
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  StyleSheet,
+} from 'react-native';
+import { Text } from '../index';
+import { collectionTitleStyles } from './styles';
+import { AppTheme } from '../../utils';
+
+const CollectionTitleNewBase = (props) => {
+  const { theme } = useContext(AppTheme);
+  const styles = collectionTitleStyles(theme);
+  const containerStyle = StyleSheet.flatten([
+    styles.container,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
+  const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
+
+  if (!props.title) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity style={containerStyle} onPress={props.onPress}>
+      <Text style={titleStyle}>{props.title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+CollectionTitleNewBase.propTypes = TouchableOpacityProps
+  && {
+    title: PropTypes.string,
+    titleStyle: TextStyle,
+    horizontalPadding: PropTypes.number,
+  };
+
+CollectionTitleNewBase.defaultProps = {
+  horizontalPadding: 12,
+};
+
+export const CollectionTitleNew = memo(CollectionTitleNewBase);

package/src/components/CollectionTitleNew/styles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+export const collectionTitleStyles = (appThemeContext) => {
+  const { COLORS, FONT_SIZE, FONT_FAMILY } = appThemeContext;
+
+  return StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+      backgroundColor: COLORS.BRAND_WHITE,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      marginTop: 8,
+    },
+    title: {
+      fontSize: FONT_SIZE.h3,
+      fontFamily: FONT_FAMILY.secondaryBold,
+      color: COLORS.BRAND_5,
+    },
+  });
+};

package/src/components/CustomSwitch/index.js

@@ -1,11 +1,11 @@
-import PropTypes from "prop-types";
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Switch, View } from "react-native";
+import PropTypes from "prop-types";
 import Icon from "react-native-vector-icons/FontAwesome";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
-import { AppTheme } from "../../utils";
 import { Text } from "../Text";
+import { AppTheme } from "../../utils";
 import { customSwitchStyles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const CustomSwitch = ({
   label = "",

package/src/components/DailyMotionPlayer/index.js

@@ -1,6 +1,6 @@
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
 import { WebView } from 'react-native-webview';
 import { dailyMotionStyles } from './styles';
 

package/src/components/Header/index.js

@@ -7,9 +7,9 @@ import {
   ViewPropTypes,
 } from "react-native";
 
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
-import { AppTheme } from "../../utils";
 import { headerStyles } from "./styles";
+import { AppTheme } from "../../utils";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);

package/src/components/Html/index.js

@@ -1,8 +1,8 @@
-import { Text } from "@quintype/native-components/src/components/Text";
-import isHTML from "is-html";
-import React from "react";
-import { I18nManager, Linking, StyleSheet } from "react-native";
+import { TouchableOpacity, View, I18nManager, StyleSheet, Linking } from "react-native";
 import HTML from "react-native-render-html";
+import React from "react";
+import isHTML from "is-html";
+import { Text } from "@quintype/native-components/src/components/Text";
 
 const CustomHtmlParser = ({ text, textStyle={}, containerStyle={} }) => {
   const textStyles = StyleSheet.flatten([

package/src/components/IconText/index.js

@@ -1,15 +1,15 @@
-import PropTypes from "prop-types";
 import React from "react";
 import {
-  StyleSheet,
-  TouchableOpacity,
   View,
+  TouchableOpacity,
+  StyleSheet,
   ViewPropTypes,
 } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
+import PropTypes from "prop-types";
 import { Text } from "../Text";
 import { iconTextStyles } from "./iconText_styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 const IconText = ({
   onPress,

package/src/components/JSEmbedElement/index.js

@@ -1,9 +1,9 @@
+import { WebView } from 'react-native-webview';
+import React, { useState, useRef, useEffect } from 'react';
 import { decode as atob } from 'base-64';
-import get from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
-import { WebView } from 'react-native-webview';
+import get from 'lodash/get';
 import { STORY_ELEMENT_SUBTYPES } from '../../constants/cardConstants';
 
 const escapeRegExp = (string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
@@ -64,7 +64,6 @@ const getHTMLContent = (embedJs) => {
                     <style>
                       iframe{
                         width:${width - 20}px;
-                        height:${width - 20}px;
                       }
                     </style>
                 </head>
@@ -76,7 +75,7 @@ const getHTMLContent = (embedJs) => {
 };
 
 export const JSEmbedElement = (props) => {
-  const [height, setHeight] = useState(300);
+  const [height, setHeight] = useState(-1);
   const webViewRef = useRef(null);
   const width = get(
     props,
@@ -107,13 +106,42 @@ export const JSEmbedElement = (props) => {
     };
   };
 
+  if (height > 0) {
+    return <View testID="embed-js">
+      <WebView
+        ref={webViewRef}
+        style={{
+          width,
+          height: Number(height),
+          flex: 0,
+          opacity: 0.99,
+        }}
+        automaticallyAdjustContentInsets={false}
+        scrollEnabled={false}
+        onMessage={handleOnMessage}
+        javaScriptEnabled
+        domStorageEnabled
+        startInLoadingState
+        allowsFullscreenVideo={false}
+        originWhitelist={['*']}
+        onError={(syntheticEvent) => {
+          const { nativeEvent } = syntheticEvent;
+          console.warn('WebView error: ', nativeEvent);
+        }}
+        source={constructSource()}
+        mixedContentMode="always"
+        mediaPlaybackRequiresUserAction={true}
+      />
+    </View>
+  }
+
   return (
     <View testID="embed-js">
       <WebView
         ref={webViewRef}
         style={{
           width,
-          height,
+          height: Number(height),
           flex: 0,
           opacity: 0.99,
         }}
@@ -132,6 +160,7 @@ export const JSEmbedElement = (props) => {
         source={constructSource()}
         mixedContentMode="always"
         mediaPlaybackRequiresUserAction={true}
+        injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
       />
     </View>
   );

package/src/components/LightBoxImage/index.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { getImageHeight } from '../../utils';
-import { LightBox } from '../LightBox';
 import { ResponsiveImage } from '../ResponsiveImage';
+import { LightBox } from '../LightBox';
+import { getImageHeight } from '../../utils';
 
 export const LightBoxImage = ({
   data, hero, currentLayout, additionalStyles, elementType, onClickHandler = () => {}, index,

package/src/components/PDFReader/index.js

@@ -1,20 +1,21 @@
 import PropTypes from 'prop-types';
-import React, { useContext, useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {
+  View,
   Modal,
-  Platform,
+  TouchableOpacity,
   SafeAreaView,
   StyleSheet,
-  TouchableOpacity,
-  View
+  Platform
 } from 'react-native';
-import Pdf from 'react-native-pdf';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Pdf from 'react-native-pdf';
 
-import { AppTheme } from '../../utils';
-import { ShareButton, Text } from '../index';
+import { Text } from '../index';
 import { pdfStyles } from './styles';
+import { ShareButton } from '../index';
+import { AppTheme } from '../../utils';
 
 export const PDFReader = ({ card, story }) => {
   const [modalVisible, setModalVisible] = useState(false);