import { Theme } from '@ulangi/ulangi-common/enums' ; import * as _ from 'lodash' ; import { memoize } from 'lodash-decorators' ; import { Dimensions , StyleSheet } from 'react-native' ; const { width : windowWidth , height : windowHeight } = Dimensions . get ( 'window' ) ; export const shortDimension = windowWidth < windowHeight ? windowWidth : windowHeight ; export const longDimension = windowWidth < windowHeight ? windowHeight : windowWidth ; export interface Layout { width : number ; height : number ; } export type ScaleByFactor = ( value : number , factor ? : number ) => number ; export type ScaleByBreakpoints = ( values : readonly [ number , number , number , number ] ) => number ; export abstract class ResponsiveStyleSheet < T , O = { } > { private defaultFactor = 0.1 ; public abstract baseStyles ( scaleByFactor , scaleByBreakpoints , layout , options ? ) ; public abstract lightStyles ( scaleByFactor , scaleByBreakpoints , layout , options ? ) ; public abstract darkStyles ( scaleByFactor , scaleByBreakpoints , layout , options ? ) ; public compile ( layout , theme , options ? ) { return this . memoizedCompile ( layout . width , layout . height , theme , options ) ; } @ memoize ( ( ... args ) : string => JSON . stringify ( args ) ) protected memoizedCompile ( width , height , theme , options ? ) { const scaleByFactor = ( value , factor ? ) : number => { return this . scaleByFactor ( value , typeof factor !== 'undefined' ? factor : this . defaultFactor , width ) ; } ; const scaleByBreakpoints = ( values ) : number => { return this . scaleByBreakpoints ( values , width ) ; } ; return StyleSheet . create ( _ . merge ( { } , this . baseStyles ( scaleByFactor , scaleByBreakpoints , { width , height } , options ) , theme === Theme . LIGHT ? this . lightStyles ( scaleByFactor , scaleByBreakpoints , { width , height } , options ) : this . darkStyles ( scaleByFactor , scaleByBreakpoints , { width , height } , options ) ) ) ; } protected scaleByFactor ( value , factor , width ) { const baseWidth = 350 ; return Math . round ( value + ( ( width / baseWidth ) * value - value ) * factor ) ; } protected scaleByBreakpoints ( values , width ) { if ( width < 576 ) { return values [ 0 ] ; } else if ( width < 768 ) { return values [ 1 ] ; } else if ( width < 992 ) { return values [ 2 ] ; } else { return values [ 3 ] ; } } } export const defaultHorizontalMarginByBreakpoints = [ 16 , 56 , 106 , 196 ] ;