import { css } from './index' ; import { StyledProps , Sx , ThemedOptions } from './types' ; import { DripsyFinalTheme } from '../declarations' ; import { get } from './get' ; import { StyleSheet } from 'react-native' ; import { DefaultStyleKey } from '../css/types' ; type ThemedOptionsWithoutFunctionStyle < ThemeKey extends keyof DripsyFinalTheme > = Omit < ThemedOptions < any , ThemeKey > , DefaultStyleKey > & Record < DefaultStyleKey , Sx | undefined > ; export function mapPropsToStyledComponent < ThemeKey extends keyof DripsyFinalTheme > ( props , options ) { const { themeKey , defaultStyle , defaultVariant , defaultVariants = [ ] , } = options ; const { breakpoint , sx , theme , variant , style , variants } = props ; let multipleVariants = [ ... defaultVariants , defaultVariant ] ; if ( variants ?. length ) { multipleVariants = [ ... multipleVariants , ... variants ] ; } if ( variant ) multipleVariants = [ ... multipleVariants , variant ] ; multipleVariants = multipleVariants . filter ( Boolean ) ; const maybeUnstyledVariantObjectFromTheme = get ( theme , themeKey + '.' + variant , get ( theme , ( variant || defaultVariant ) as string ) ) ; let { fontFamily } = maybeUnstyledVariantObjectFromTheme || { } ; fontFamily = fontFamily || ( defaultStyle ?. fontFamily as any ) ; const baseStyle = css ( defaultStyle , breakpoint ) ( { theme , fontFamily , themeKey } ) ; const multipleVariantsStyle = multipleVariants . map ( ( variantKey ) => css ( get ( theme , themeKey + '.' + variantKey , get ( theme , variantKey ) ) , breakpoint ) ( { theme , fontFamily , themeKey } ) ) . reduce ( ( prev = { } , next = { } ) => ( { ... prev , ... next } ) , { } ) ; const superStyle = css ( sx , breakpoint ) ( { theme , fontFamily , themeKey } ) ; const createStyleSheet = ( style ) => { const stylesheet = StyleSheet . create ( { style } ) ; return stylesheet . style ; } ; const baseStyleSheet = createStyleSheet ( { ... baseStyle , ... multipleVariantsStyle } ) ; const superStyleSheet = createStyleSheet ( superStyle ) ; let styles = [ baseStyleSheet , ... ( Array . isArray ( style ) ? style : [ style ] ) , superStyleSheet , ] ; if ( typeof style == 'function' ) { styles = ( interactionState ) => [ baseStyleSheet , style ( interactionState ) , superStyleSheet , ] ; } return { styles } ; }