npm - @quintype/native-components - Versions diffs - 2.20.5 → 2.20.6 - Mend

@quintype/native-components 2.20.5 → 2.20.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +2 -0
package/package.json +1 -1
package/src/components/JSEmbedElement/index.js +25 -2
package/src/components/LightBoxImage/index.js +8 -2
package/src/components/ResponsiveImage/index.js +15 -4
package/src/components/StoryGallery/index.js +171 -22
package/src/components/StoryGallery/styles.js +102 -6
package/src/utils/imageUtils.js +16 -0

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,8 @@
 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.6](https://github.com/quintype/native-components/compare/v2.20.5...v2.20.6) (2023-06-15)
 ### [2.20.5](https://github.com/quintype/native-components/compare/v2.20.4...v2.20.5) (2023-03-21)
 ### [2.20.4](https://github.com/quintype/native-components/compare/v2.20.3...v2.20.4) (2023-02-01)

package/package.json CHANGED Viewed

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

package/src/components/JSEmbedElement/index.js CHANGED Viewed

@@ -17,10 +17,27 @@ const replaceDefaultProtocol = (content) => {
   }
 };
+const removeWidthnHeight = (htmlContent) => {
+  let temp = htmlContent.split(' ');
+  let finalHtml = '';
+  if(temp[0]==='<iframe'){
+    for(let i=0; i<temp.length; i++){
+      if((temp[i].includes('width') || temp[i].includes('height')) && !temp[i].includes('/')){
+        continue;
+      }
+      finalHtml = finalHtml + temp[i] + " ";
+    }
+    return finalHtml;
+  }
+  return htmlContent;
+}
 const getHTMLContent = (embedJs) => {
+  const width =  Dimensions.get('window').width;
   const decodedContent = getDecodedContent(embedJs);
-  const htmlContent = replaceDefaultProtocol(decodedContent);
+  let htmlContent = replaceDefaultProtocol(decodedContent)
+  htmlContent = removeWidthnHeight(htmlContent)
   const webViewScript = `
     <script type="application/javascript">
         var interValId;
@@ -41,6 +58,12 @@ const getHTMLContent = (embedJs) => {
             <html>
                 <head>
                     <meta name="viewport" content="width=device-width, initial-scale=1">
+                    <style>
+                      iframe{
+                        width:${width-20}px;
+                        height:${width-20}px;
+                      }
+                    </style>
                 </head>
                 <body>
                     ${htmlContent}

package/src/components/LightBoxImage/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { LightBox } from '../LightBox';
 import { getImageHeight } from '../../utils';
 export const LightBoxImage = ({
-  data, hero, currentLayout, additionalStyles,
+  data, hero, currentLayout, additionalStyles, elementType, onClickHandler = ()=>{}, index
 }) => {
   const { cdn, slug, metaData } = data;
   const { width, height } = metaData || {};
@@ -14,7 +14,12 @@ export const LightBoxImage = ({
   const imageUri = `${data?.cdn}/${data?.slug}`;
   const [showModal, setShowModal] = useState(false);
-  const toggleModal = () => setShowModal(!showModal);
+  const toggleModal = () => {
+    if(elementType === 'gallery'){
+      onClickHandler(index);
+    } else{
+      setShowModal(!showModal)
+    }};
   const styles = {
     image: {
@@ -34,6 +39,7 @@ export const LightBoxImage = ({
           metaData={metaData}
           hero={hero || false}
           styles={cumulativeStyles}
+          elementType={elementType ? elementType : null}
         />
       </TouchableOpacity>
     </>

package/src/components/ResponsiveImage/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 import { isTablet } from 'react-native-device-info';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
 import { AppTheme } from '../../utils';
-import { getImageURL } from '../../utils/imageUtils';
+import { getImageURL, getCustomResolutionImageURL } from '../../utils/imageUtils';
 const ResponsiveImageBase = (props) => {
   const [placeholder, setPlaceholder] = useState(true);
@@ -24,11 +24,15 @@ const ResponsiveImageBase = (props) => {
       width: props.imageWidth,
       height: (props.imageWidth * 9) / 16,
     },
-    props.hero && {
+    (props.hero && props?.elementType !== 'gallery' ) && {
       width: '100%',
       height: HERO_IMAGE_HEIGHT,
       alignSelf: 'stretch',
     },
+    props?.elementType === 'gallery' && {
+      backgroundColor: COLORS.BRAND_BLACK
+    }
   ]);
   const placeholderStyle = {
@@ -43,7 +47,14 @@ const ResponsiveImageBase = (props) => {
   ) : (
     <FallbackIcon />
   );
-  const imageUrl = getImageURL(props);
+  let imageUrl = ''
+  if(props?.elementType === 'gallery'){
+    imageUrl = getCustomResolutionImageURL(props, [1, 1]);
+  } else {
+    imageUrl = getImageURL(props);
+  }
   const userFallback = () => <Icon name="user" size={20} />;
@@ -71,7 +82,7 @@ const ResponsiveImageBase = (props) => {
         style={flattenedImageStyle}
         source={sourceURI}
         onLoad={onLoadHandler}
-        resizeMode={FastImage.resizeMode.cover}
+        resizeMode={props.hero ? FastImage.resizeMode.cover : FastImage.resizeMode.contain}
         {...props}
       />
       {placeholder && (

package/src/components/StoryGallery/index.js CHANGED Viewed

@@ -1,39 +1,188 @@
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import { View } from 'react-native';
+import React, { useContext, useState, useRef } from 'react';
+import { View, Modal, SafeAreaView, Dimensions, Image, FlatList, TouchableOpacity } from 'react-native';
 import { styles } from './styles';
 import { Text } from '../index';
 import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
 import { LightBoxImage } from '../LightBoxImage';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import FastImage from 'react-native-fast-image';
+import { resolve } from 'path-browserify';
 export const StoryGallery = ({ cdn, card }) => {
   const { theme } = useContext(AppTheme);
+  const { COLORS, DARK_MODE } = theme;
   const galleryStyles = styles(theme);
   const storyElements = card['story-elements'];
+  const [showModal, setShowModal] = useState(false);
-  return (
-    <View style={galleryStyles.container}>
-      <Text style={galleryStyles.titleText}>{card.title}</Text>
-      <View style={galleryStyles.imgContainer}>
-        {storyElements.map((element, index) => {
-          const data = {
-            cdn,
-            slug: element['image-s3-key'],
-            metaData: element['image-metadata'],
-            imageWidth: getScreenPercentageWidth(100),
-          };
-          const indexTestForFullWidthStyles = storyElements.length % 3 == 1 ? index % 3 : (index + 1) % 3;
-          const style = indexTestForFullWidthStyles
-            ? galleryStyles.halfWidth
-            : galleryStyles.fullWidth;
-          return <LightBoxImage key={index} data={data} additionalStyles={style} />;
-        })}
+  const [currentIndex, setCurrentTabIndex] = useState(0);
+  const flatlistRef = useRef();
+  const [index, setIndex] = useState(0);
+  const totalSlides = card["story-elements"]?.length;
+  const lastSlide = currentIndex + 1 === totalSlides;
+  const firstSlide = currentIndex === 0;
+  const [galleryLastImgUrl, setGalleryLastImageUrl] = useState('');
+  const onPressHandler = (index = 5) => {
+    setIndex(index)
+    setShowModal(true);
+  }
+  const moveNext = () => {
+    if (!lastSlide) {
+      flatlistRef.current.scrollToIndex({ index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1))});
+      setCurrentTabIndex(currentIndex + 1);
+    }
+  };
+  const movePrev = () => {
+    if (!firstSlide) {
+      flatlistRef.current.scrollToIndex({ index: Math.ceil(Math.max(currentIndex - 1, 0)) });
+      setCurrentTabIndex(Math.max(currentIndex - 1, 0));
+    }
+  };
+  const showArrow = (direction) => {
+    const arrowStyles = direction === "left" ? galleryStyles.leftArrow : galleryStyles.rightArrow;
+    const onPressHandler = direction === "left" ? movePrev : moveNext;
+    const iconName = direction === "left" ? 'chevron-left' : 'chevron-right'
+    return (
+      <View style={arrowStyles}>
+        <TouchableOpacity onPress={onPressHandler}>
+          <Icon name={iconName} size={22} color={COLORS?.MONO7} />
+        </TouchableOpacity>
       </View>
-      <Text style={galleryStyles.descText} lato>
-        {card.description}
+    );
+  };
+  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);
+  }
+  const renderItem = (item) => {
+    const data = {
+      cdn,
+      slug: item.item['image-s3-key'],
+      metaData: item.item['image-metadata'],
+    };
+    const imageUri = `${data?.cdn}/${data?.slug}`;
+    return <View style={galleryStyles.carouselContainer}>
+      <FastImage
+        source={{uri:imageUri}}
+        resizeMode={FastImage.resizeMode.contain}
+        style={galleryStyles.carouselImage}
+      />
+      <Text primary style={galleryStyles.titleText}>
+        {item.item?.title}
       </Text>
     </View>
+  }
+  return (
+    <>
+      <View style={galleryStyles.container}>
+        <Text style={galleryStyles.titleText}>{card.title}</Text>
+        <View style={galleryStyles.imgContainer}>
+          {storyElements.map((element, index) => {
+            const data = {
+              cdn,
+              slug: element['image-s3-key'],
+              metaData: element['image-metadata'],
+              imageWidth: getScreenPercentageWidth(100),
+            };
+            if(storyElements.length >6 && index >= 5){
+              const imageUri = `${data?.cdn}/${data?.slug}`;
+              if(galleryLastImgUrl === ''){
+                setGalleryLastImageUrl(imageUri);
+              }
+              return null;
+            }
+            const style = galleryStyles.fullWidth;
+            return <TouchableOpacity>
+                      <LightBoxImage onClickHandler={onPressHandler} hero={data.metaData['focus-point'] ? true : false} key={index} data={data} additionalStyles={style} elementType={card?.metadata?.type} index={index} />
+            </TouchableOpacity>
+          })}
+          {storyElements && storyElements.length > 6 && <TouchableOpacity onPress={()=>onPressHandler(5)} style={[galleryStyles.fullWidth, galleryStyles.showMoreImageContainer]}>
+          <FastImage
+            source={{uri: galleryLastImgUrl}}
+            resizeMode={FastImage.resizeMode.cover}
+            style={galleryStyles.showMoreImage}
+          />
+            <Text style={galleryStyles.showMoreText}>+{storyElements.length-5}</Text>
+          </TouchableOpacity>}
+        </View>
+        <Text style={galleryStyles.descText} lato>
+          {card.description}
+        </Text>
+      </View>
+      <Modal
+        visible={showModal}
+        animationType="slide"
+        transparent={false}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={closeModalHandler}
+        onBackdropPress={closeModalHandler}
+      >
+        <SafeAreaView style={galleryStyles.safeAreaView}>
+          <View style={galleryStyles.modalContainer}>
+<TouchableOpacity onPress={closeModalHandler}>
+              <View style={galleryStyles.close}>
+                <Icon name="times" size={20} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
+              </View>
+            </TouchableOpacity>
+          <View style={galleryStyles.wrapper}>
+            <FlatList
+              ref={flatlistRef}
+              data={card["story-elements"]}
+              renderItem={renderItem}
+              keyExtractor={(item) => item.id}
+              horizontal
+              extraData={currentIndex}
+              onScroll={handleScroll}
+              initialScrollIndex={index}
+              onScrollToIndexFailed = { info => {
+                const wait = new Promise(resolve=>setTimeout(resolve, 500));
+                wait.then(()=>{
+                  flatlistRef.current?.scrollToIndex({index: info.index, animated: true});
+                });
+              }}
+            />
+            {!firstSlide && showArrow("left")}
+            {!lastSlide && showArrow("right")}
+          </View>
+          </View>
+        </SafeAreaView>
+      </Modal>
+    </>
   );
 };

package/src/components/StoryGallery/styles.js CHANGED Viewed

@@ -1,8 +1,15 @@
 import { StyleSheet, Dimensions } from 'react-native';
+import { useContext } from 'react';
+import { isTablet } from 'react-native-device-info';
+import { AppTheme } from '../../utils';
-const { width: deviceWidth } = Dimensions.get('window');
-export const styles = ({ FONT_SIZE }) => StyleSheet.create({
+export const styles = ({ FONT_SIZE }) => {
+  const { width: deviceWidth } = Dimensions.get('window');
+  const { theme } = useContext(AppTheme);
+  const { COLORS, DARK_MODE } = theme;
+  return StyleSheet.create({
   container: {
     width: '100%',
     paddingHorizontal: 10,
@@ -23,13 +30,102 @@ export const styles = ({ FONT_SIZE }) => StyleSheet.create({
     height: 124,
   },
   fullWidth: {
-    width: deviceWidth - 20,
-    height: 195,
-    marginVertical: 10,
+    width: (deviceWidth - 30) / 3,
+    height: (deviceWidth - 30) / 3,
+    marginVertical: 2.5,
   },
   descText: {
     fontSize: FONT_SIZE.h2,
     opacity: 0.8,
     paddingTop: 10,
   },
-});
+  modalContainer: {
+    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_BLACK,
+    flex: 1,
+    justifyContent: 'center',
+  },
+  safeAreaView: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  close: {
+    justifyContent: 'flex-start',
+    padding: 10,
+    height: 40,
+    zIndex: 1,
+    marginTop: 25,
+  },
+  imageContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  portrait: {
+    width: '100%',
+    height: '80%',
+  },
+  wrapper: {
+    paddingHorizontal: 10,
+    flex:1,
+    backgroundColor:'black',
+    width:'100%'
+  },
+  titleText: {
+    fontWeight: "normal",
+    marginBottom: 10,
+    fontSize: FONT_SIZE.h3,
+    opacity: 0.8,
+    color:'white',
+    marginTop:10,
+    marginHorizontal:10
+  },
+  leftArrow: {
+    position: "absolute",
+    top: "46%",
+    right: "95%",
+    left: 20,
+    zIndex: 999,
+    width: 30,
+    height: 40,
+    backgroundColor: COLORS.TRANSPARENT_BLACK,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  rightArrow: {
+    position: "absolute",
+    top: "46%",
+    left: "93%",
+    right: 20,
+    zIndex: 999,
+    width: 30,
+    height: 40,
+    backgroundColor: COLORS.TRANSPARENT_BLACK,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  carouselImage: {
+    width: '100%',
+    height: '80%'
+  },
+  carouselContainer:{
+    width: deviceWidth - 10,
+    margin: 10
+  },
+  showMoreImageContainer:{
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  showMoreImage:{
+    width: '100%',
+    height: '100%',
+    opacity: 0.5
+  },
+  showMoreText:{
+    fontSize: 30,
+    position: 'absolute',
+    color: COLORS.BRAND_WHITE
+  }
+})};

package/src/utils/imageUtils.js CHANGED Viewed

@@ -118,3 +118,19 @@ export const getImageURL = (props) => {
     q: IMAGE_QUALITY,
   })}`;
 };
+export const getCustomResolutionImageURL = (props, customAspectRatio) => {
+  const { theme } = useContext(AppTheme);
+  const { IMAGE_QUALITY } = theme;
+  const {
+     metaData, slug, imageWidth, cdn,
+  } = props;
+  const image = new FocusedImage(slug, metaData);
+  const imageCdn = cdn || 'https://www.quintype.com';
+  return `${imageCdn}/${image.path(customAspectRatio , {
+    w: getPixelRatioForDevice(imageWidth) || Math.round(deviceWidth),
+    q: IMAGE_QUALITY,
+  })}`;
+}