@quintype/native-components 2.22.0-beta.2 → 2.22.0-beta.3

package/bin-dev-scripts/standard-version-release.sh

@@ -1,15 +1,15 @@
-# #!/bin/bash -e
+#!/bin/bash -e
 
-# npm install
-# git diff --quiet
+npm install
+git diff --quiet
 
-# BRANCH=$(git symbolic-ref --short HEAD)
+BRANCH=$(git symbolic-ref --short HEAD)
 
-# if [ "$BRANCH" == 'master' ]
-# then
-#   npx standard-version
-# else
-#   npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
-# fi
+if [ "$BRANCH" == 'master' ]
+then
+  npx standard-version
+else
+  npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
+fi
 
-# git push --follow-tags origin "$BRANCH"
+git push --follow-tags origin "$BRANCH"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.22.0-beta.2",
+  "version": "2.22.0-beta.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/PDFReader/index.js

@@ -13,10 +13,10 @@ import Pdf from 'react-native-pdf';
 
 import { Text } from '../index';
 import { pdfStyles } from './styles';
-import { ShareIcon } from '../../Icons/ShareIcon';
+import { ShareButton } from '../index';
 import { AppTheme } from '../../utils';
 
-export const PDFReader = ({ card, share }) => {
+export const PDFReader = ({ card, story }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
   const { theme } = useContext(AppTheme);
@@ -66,15 +66,7 @@ export const PDFReader = ({ card, share }) => {
             </Text>
           </TouchableOpacity>
         </View>
-        <View style={styles.pdfShare}>
-          <TouchableOpacity
-            onPress={() => {
-              share(card.url, 'attachment');
-            }}
-          >
-            <ShareIcon />
-          </TouchableOpacity>
-        </View>
+        <ShareButton story={story} type={'attachment'} slug={card.url} containerStyle={styles.pdfShare} />
       </View>
     </SafeAreaView>
   );
@@ -82,5 +74,5 @@ export const PDFReader = ({ card, share }) => {
 
 PDFReader.propTypes = {
   card: PropTypes.any.isRequired,
-  share: PropTypes.func,
+  story: PropTypes.any,
 };

package/src/components/PrimaryStoryCardNew/index.js

@@ -26,7 +26,7 @@ const PrimaryStoryCardNewBase = (props) => {
     FONT_FAMILY,
     premiumIcon,
     lineHeightMultiplier,
-    storyCardOptions,
+    storyCardOptions = {},
   } = theme || {};
 
   const styles = storyStyles(theme);

package/src/components/PrimaryStoryCardNew/styles.js

@@ -1,4 +1,4 @@
-export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions}) => ({
+export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {}}) => ({
   container: {
     backgroundColor: COLORS.BRAND_WHITE,
     paddingVertical: 10,

package/src/components/SecondaryStoryCardNew/index.js

@@ -30,7 +30,7 @@ const SecondaryStoryCardNewBase = (props) => {
     COLORS,
     premiumIcon,
     FONT_SIZE,
-    storyCardOptions,
+    storyCardOptions = {},
   } = theme;
 
   const styles = storyStyles(theme);

package/src/components/SecondaryStoryCardNew/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions }) => StyleSheet.create({
+export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {} }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',

package/src/components/ShareButton/index.js

@@ -12,8 +12,8 @@ import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
-  const { storyCardOptions } = theme;
-  const { story, type = 'story', slug } = props;
+  const { storyCardOptions = {} } = theme;
+  const { story, type = 'story', slug, containerStyle } = props;
 
   const getShareURL = () => {
     const { url } = story || {};
@@ -65,6 +65,7 @@ const ShareButtonBase = (props) => {
     <TouchableOpacity
       onPress={share}
       testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
+      style={containerStyle}
     >
       {renderIcon()}
     </TouchableOpacity>

package/src/components/Story/index.js

@@ -8,15 +8,15 @@ import { TagsRow } from '../TagsRow/TagsRow';
 import { FBCommentsRow } from '../FBCommentsRow';
 import { STORY_TYPES } from '../../utils/story-types';
 import { getTimeInFormat, AppTheme } from '../../utils';
-import { ShareIcon } from '../../Icons/ShareIcon';
+import { ShareButton } from '../index';
 import { ClockIcon } from '../../Icons/ClockIcon';
 import { storyStyles } from './styles';
-import { isStoryFree, mutateDataBeforeAccess, getFirstVideoElement } from '../../utils/story';
+import { isStoryFree, getFirstVideoElement } from '../../utils/story';
 import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
 import LinearGradient from "react-native-linear-gradient";
 import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 
-const getLiveBlogTimeStamp = (card, DATE_FORMAT, share, styles, locale) => {
+const getLiveBlogTimeStamp = (card, DATE_FORMAT, story, styles, locale) => {
   const slug = `?cardId=${card.id}`;
   return (
     <View style={styles.container}>
@@ -26,11 +26,7 @@ const getLiveBlogTimeStamp = (card, DATE_FORMAT, share, styles, locale) => {
           {getTimeInFormat(card['card-updated-at'], DATE_FORMAT, locale)}
         </Text>
       </View>
-      <View style={styles.shareIcon}>
-        <TouchableOpacity onPress={() => share(slug, 'card')}>
-          <ShareIcon />
-        </TouchableOpacity>
-      </View>
+      <ShareButton story={story} type={'card'} slug={slug} containerStyle={styles.shareIcon} />
     </View>
   );
 };
@@ -68,11 +64,10 @@ const getStoryCards = (
   navigation,
   isLiveBlog,
   DATE_FORMAT,
-  share,
+  story,
   storyType,
   isListicleStory,
   bulletType,
-  storyHasAccess,
   styles,
   currentLayout,
   getAd,
@@ -80,7 +75,7 @@ const getStoryCards = (
 ) => cards.map((card, index, source) => (
 <View key={card?.id}>
     {isLiveBlog
-        && getLiveBlogTimeStamp(card, DATE_FORMAT, share, styles, locale)}
+        && getLiveBlogTimeStamp(card, DATE_FORMAT, story, styles, locale)}
 
     {isListicleStory && index !== 0 && (
     <View style={styles.listicleContainer}>
@@ -116,7 +111,7 @@ const getStoryCards = (
             linkedStories={linkedStories}
             screenList={screenList}
             navigation={navigation}
-            share={share}
+            story={story}
             storyType={storyType}
             currentLayout={currentLayout}
           />
@@ -137,7 +132,6 @@ export const Story = ({
   onFbCommentPress,
   screenList,
   navigation,
-  share,
   accessComponent,
   checkStoryAccess,
   enableFbComments,
@@ -231,11 +225,10 @@ export const Story = ({
         navigation,
         isLiveBlog,
         DATE_FORMAT,
-        share,
+        story,
         storyType,
         isListicleStory,
         bulletType,
-        storyHasAccess,
         styles,
         currentLayout,
         getAd,
@@ -267,7 +260,6 @@ Story.propTypes = {
   onAuthorPress: PropTypes.func,
   onTagsPress: PropTypes.func,
   onSectionPress: PropTypes.func,
-  share: PropTypes.func,
   storyHasAccess: PropTypes.string,
   checkStoryAccess: PropTypes.func,
   getAd: PropTypes.func,

package/src/components/StoryCardDetailsRow/index.js

@@ -13,7 +13,7 @@ const StoryCardDetailsRowBase = ({ authorName, publishedAt, readTime }) => {
     locale,
     reverseTimeAdverbPosition,
     DATE_TIME_FORMAT,
-    storyCardOptions,
+    storyCardOptions = {},
   } = theme;
   const translate = get(theme, ["translate"], (word) => word);
 

package/src/components/StoryContent/index.js

@@ -7,7 +7,6 @@ import {
   STORY_ELEMENT_TYPES,
   STORY_ELEMENT_METADATA_TYPES,
 } from '../../constants';
-import { stripHTML } from '../../utils';
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
 
 export const StoryContent = ({
@@ -16,7 +15,7 @@ export const StoryContent = ({
   linkedStories,
   screenList,
   navigation,
-  share,
+  story,
   storyType,
   currentLayout,
 }) => {
@@ -73,7 +72,7 @@ export const StoryContent = ({
         <AllComponents.StoryImage
           cdn={cdn}
           card={storyElement}
-          share={share}
+          story={story}
           storyType={storyType}
           currentLayout={currentLayout}
         />
@@ -81,7 +80,7 @@ export const StoryContent = ({
     case STORY_ELEMENT_TYPES.YOUTUBE_VIDEO:
       return <AllComponents.YouTubePlayer card={storyElement} />;
     case STORY_ELEMENT_TYPES.FILE:
-      return <AllComponents.PDFReader card={storyElement} share={share} />;
+      return <AllComponents.PDFReader card={storyElement} story={story} />;
     case STORY_ELEMENT_TYPES.DATA:
       return <AllComponents.Table card={storyElement} />;
     case STORY_ELEMENT_TYPES.COMPOSITE:
@@ -120,7 +119,7 @@ export const StoryContent = ({
 StoryContent.propTypes = {
   storyElement: PropTypes.any.isRequired,
   cdn: PropTypes.string.isRequired,
-  share: PropTypes.func.isRequired,
+  story: PropTypes.any.isRequired,
   storyType: PropTypes.string,
   linkedStories: PropTypes.any,
   screenList: PropTypes.object,

package/src/components/StoryImage/index.js

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { ShareIcon } from '../../Icons/ShareIcon';
+import { View } from 'react-native';
+import { ShareButton } from '../index';
 import { AppTheme, getScreenPercentageWidth, stripHTML } from '../../utils';
 import { Text } from '../index';
 import { LightBoxImage } from '../LightBoxImage';
 import { storyImageStyles } from './styles';
 
 export const StoryImage = ({
-  card, cdn, share, storyType, currentLayout,
+  card, cdn, story, storyType, currentLayout,
 }) => {
   const slug = `?cardId=${card.id}`;
   const sharePhotoCard = storyType === 'photo';
@@ -35,9 +35,7 @@ export const StoryImage = ({
           </Text>
         </View>
         {sharePhotoCard && (
-          <TouchableOpacity onPress={() => share(slug, 'image')}>
-            <ShareIcon />
-          </TouchableOpacity>
+          <ShareButton story={story} type={'image'} slug={slug} />
         )}
       </View>
     </>
@@ -47,7 +45,7 @@ export const StoryImage = ({
 StoryImage.propTypes = {
   card: PropTypes.any.isRequired,
   cdn: PropTypes.string.isRequired,
-  share: PropTypes.func.isRequired,
+  story: PropTypes.any.isRequired,
   currentLayout: PropTypes.object,
   storyType: PropTypes.string,
 };

package/src/Icons/ShareIcon/index.js

@@ -1,19 +0,0 @@
-import { AppTheme } from '../../utils';
-import React, { useContext } from 'react';
-import Svg, { Path } from 'react-native-svg';
-
-export const ShareIcon = (props) => {
-  const { theme } = useContext(AppTheme);
-  const { COLORS } = theme;
-  return (
-    <Svg width={24} height={24} {...props}>
-      <Path
-        fill={COLORS.BRAND_BLACK}
-        fillRule="evenodd"
-        d="M15.843 3.189c-1.478 0-2.689 1.239-2.689 2.75 0 .293.046.58.13.846L8.844 9.31a2.636 2.636 0 00-1.687-.621c-1.477 0-2.688 1.238-2.688 2.75 0 1.51 1.21 2.75 2.688 2.75a2.63 2.63 0 001.687-.615l4.446 2.525a2.759 2.759 0 00-.136.84c0 1.51 1.211 2.75 2.689 2.75 1.477 0 2.688-1.24 2.688-2.75 0-1.512-1.21-2.75-2.688-2.75a2.66 2.66 0 00-1.907.82l-4.323-2.46a2.757 2.757 0 000-2.221l4.317-2.459c.488.506 1.168.82 1.913.82 1.477 0 2.688-1.239 2.688-2.75s-1.21-2.75-2.688-2.75z"
-      />
-    </Svg>
-  )
-}
-
-