@s20.ai/safecam-360-rn/src/components/hotspot/HotspotDetailCard.js

A React Native component to view the interior panorama and exterior 360 degree views of a product featuring suppport for hotspots. Compatible with Android and iOS

/*
 * Copyright © 2022 S20.AI India Pvt. Ltd.
 * Contact - origin@s20.ai
 * License - Licensed as per https://docs.s20.ai/license.html
 */
import React, {useEffect, useRef, useState} from 'react';
import {View, Dimensions, StyleSheet, LogBox, Platform} from 'react-native';
import {Card, IconButton} from '@s20.ai/safecam-components-rn';
import {connect, useDispatch} from 'react-redux';
import constants from '../../config/constants';
import {setHotspotDetailMode} from '../../redux/actions/currentHotspotAction';
import {triggerHapticFeedback, useScreenDimensions} from '../../utils/device';
import {responsiveStyleConfig} from '../responsiveStyleConfig';


const HotspotDetailCard = ({item, orientation, exteriorData, interiorData, currentViewState, currentHotspotState, customFontFamily}) => {
    const styles = StyleSheet.create({
        slideInnerContainer: {
          // width: itemWidth,
          // height: slideHeight,
          // paddingHorizontal: itemHorizontalMargin,
          // paddingBottom: 18, // needed for shadow,
          zIndex:0
      
        }
      });

    const dispatch = useDispatch();

    const screenDimensions = useScreenDimensions()
    let cardStyles = responsiveStyleConfig.stylePicker('card', screenDimensions.width)

    return <View style={styles.slideInnerContainer}>
    <Card
      iconSrc={
        item.hotspotType === constants.DAMAGE
          ? 'https://safecam-org-logos.s3.ap-south-1.amazonaws.com/hotspot.svg'
          : 'https://cars24-images.s3.ap-south-1.amazonaws.com/safecam360/assets/feature.svg'
      }
      svg={true}
      src={item.imageSrc}
      sx={{
        ...cardStyles,
        imageViewPillText:{
          fontFamily: customFontFamily && customFontFamily === "Poppins" ? "Poppins-Regular" : "Helvetica"
        },
        cardTitleText: {
          fontFamily: customFontFamily && customFontFamily === "Poppins" ? "Poppins-SemiBold" : "Helvetica"
        },
        cardContentText:{
          fontFamily: customFontFamily && customFontFamily === "Poppins" ? "Poppins-Regular" : "Helvetica"
        }
      }}
     
      onPress={() => {
        triggerHapticFeedback();
        dispatch(setHotspotDetailMode(true));
      }}
      title={item.description}
      content={item.imageTitle}
      pillText={`${item.address + 1} of ${
        currentViewState.type === constants.EXTERIOR_VIEW?
        exteriorData.filteredHotspotMetadata.length:
        interiorData.filteredHotspotMetadata.length
      }`}
    />
    </View>
}

const mapStateToProps = ({currentView, currentHotspot}) => {
    return {
      currentViewState: currentView.present,
      orientation: currentView.orientation,
      currentHotspotState: currentHotspot,
    };
};
  

export default connect(mapStateToProps)(HotspotDetailCard);