import { Screens , States , Props } from './types' ; import { mediaMinWidth , getBreakpointMin } from './media' ; import { XCache } from './cache' ; type PropsScreens < T extends Props > = T [ 'theme' ] extends { screens : Screens ; } ? T [ 'theme' ] [ 'screens' ] : Screens ; export const getScreens = < T extends Props > ( props ) : PropsScreens < T > => { return ( props . theme && props . theme . screens ? props . theme . screens : { } ) as PropsScreens < T > ; } ; type PropsStates < T extends Props > = T [ 'theme' ] extends { states : States ; } ? T [ 'theme' ] [ 'states' ] : Screens ; export const getStates = < T extends Props > ( props ) : PropsStates < T > => { return ( props . theme && props . theme . states ? props . theme . states : { } ) as PropsStates < T > ; } ; type PropsScreensVariants < T extends Props > = { [ P in keyof PropsScreens < T > ] : string | null ; } ; export type PropsVariants < T extends Props > = PropsScreensVariants < T > & PropsStates < T > ; export const getVariants = < T extends Props > ( props ) : PropsVariants < T > => { const screens = getScreens ( props ) ; const states = getStates ( props ) ; const medias = { } as PropsScreensVariants < T > ; for ( const value in screens ) { medias [ value ] = mediaMinWidth ( getBreakpointMin ( screens , value ) ) ; } return { ... medias , ... states } ; } ; export const getCachedVariants = < T extends Props > ( props , cache ) : PropsVariants < T > => { if ( cache . has ( '_variants' ) ) return cache . get ( '_variants' ) as PropsVariants < T > ; const states = getVariants ( props ) ; cache . set ( '_variants' , states ) ; return states ; } ;