@s20.ai/safecam-360-rn
Version:
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
72 lines (57 loc) • 2.13 kB
JavaScript
/*
* Copyright © 2022 S20.AI India Pvt. Ltd.
* Contact - origin@s20.ai
* License - Licensed as per https://docs.s20.ai/license.html
*/
import { Dimensions } from "react-native"
import constants from "../config/constants"
/**
* Returns a base + responsive style object for a particular style label in the style config e.g card, pillText, base etc.
*/
export default class Responsive {
breakpoints = []
deviceScreenWidth = null
styles = []
base = null
constructor(breakpoints, styles, base) {
this.breakpoints = breakpoints
this.styles = styles
this.base = base
}
getBreakpointIndex(breakpoint, i, arr) {
//Return breakpoint index for current device
return ( this.deviceScreenWidth <= breakpoint )
}
getBreakpointStyle(styleLabel) {
let baseStyles = {}
//Get base styles for current style label (e.g card, pillText etc.)
if ( this.base[styleLabel] ) {
baseStyles = {...this.base[styleLabel]}
}
let breakpointIndex = this.breakpoints.findIndex(this.getBreakpointIndex, this)
if ( breakpointIndex === -1 ) breakpointIndex = this.styles.length - 1
// if(styleLabel === "carouselContainer"){
// console.log('Styles')
// console.log(this.styles)
// console.log('BI')
// console.log(breakpointIndex)
// console.log(constants.STYLE_BREAKPOINTS)
// }
//Get device breakpoint styles for current style label
let deviceBreakpointStyles = this.styles[breakpointIndex]
// if(styleLabel === "carouselContainer"){
// console.log('DBS')
// console.log(deviceBreakpointStyles)
// }
if(deviceBreakpointStyles) deviceBreakpointStyles = deviceBreakpointStyles[styleLabel]
// if(styleLabel === "carouselContainer"){
// console.log('RESPONSIVE - '+styleLabel)
// console.log({...baseStyles, ...deviceBreakpointStyles})
// }
return {...baseStyles, ...deviceBreakpointStyles};
}
stylePicker(styleLabel, screenWidth) {
this.deviceScreenWidth = Dimensions.get("window").width;
return this.getBreakpointStyle(styleLabel)
}
}