import { PropertyAlignItems , PropertyAlignContent , PropertyJustifyItems , PropertyJustifyContent , PropertyFlexWrap , PropertyFlexDirection , } from './types' ; /** style props to for flexbox container properties */ export type FlexStyleProps = { /** sets `align-items` property */ alignItems ? : PropertyAlignItems ; /** sets `align-content` property */ alignContent ? : PropertyAlignContent ; default display ? : 'flex' | 'inline-flex' ; /** sets `justify-items` property */ justifyItems ? : PropertyJustifyItems ; /** sets `justify-content` property */ justifyContent ? : PropertyJustifyContent ; /** sets `flex-wrap` property */ flexWrap ? : PropertyFlexWrap ; /** sets `flex-direction` property */ flexDirection ? : PropertyFlexDirection ; } ; const flexProps = { alignContent : 'alignContent' , alignItems : 'alignItems' , display : 'display' , flexDirection : 'flexDirection' , flexWrap : 'flexWrap' , justifyContent : 'justifyContent' , justifyItems : 'justifyItems' , } ; example export function flex < P extends FlexStyleProps > ( props ) { const styles = { } ; for ( const key in props ) { if ( key in flexProps ) { const attr = flexProps [ key as keyof FlexStyleProps ] ; const value = props [ key ] ; styles [ attr ] = value ; } } return styles ; }