@s20.ai/safecam-360-rn-lite/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,
          imageView: {
            flex: 3
          },
          imageViewPillText: {
            fontFamily:
              customFontFamily && customFontFamily === 'Poppins'
                ? 'Poppins-Regular'
                : 'Helvetica',
          },
          cardTitleText: {
            fontFamily:
              customFontFamily && customFontFamily === 'Poppins'
                ? 'Poppins-SemiBold'
                : 'Helvetica',
            fontSize: 16,
          },
          cardContentText: {
            fontFamily:
              customFontFamily && customFontFamily === 'Poppins'
                ? 'Poppins-Regular'
                : 'Helvetica',
            paddingTop: item.description ? 10 : 0,
            fontSize: 15,
          },
        }}
        onPress={() => {
          triggerHapticFeedback();
          dispatch(setHotspotDetailMode(true));
        }}
        content={item.description}
        title={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);