import { PropertyJustifySelf , PropertyAlignSelf , PropertyOrder } from './types' ; /** style props to for flexbox item properties */ export type FlexItemStyleProps = { /** sets `flex` property */ flex ? : number | string ; /** sets `flex-grow` property */ flexGrow ? : number | string ; /** sets `flex-shrink` property */ flexShrink ? : number | string ; /** sets `flex-basis` property */ flexBasis ? : number | string ; /** sets `justify-self` property */ justifySelf ? : PropertyJustifySelf ; /** sets `align-self` property */ alignSelf ? : PropertyAlignSelf ; /** sets `order` property */ order ? : PropertyOrder ; } ; /** style props to for flexbox item properties */ const flexItemProps = { flex : 'flex' , flexGrow : 'flexGrow' , flexShrink : 'flexShrink' , flexBasis : 'flexBasis' , justifySelf : 'justifySelf' , alignSelf : 'alignSelf' , order : 'order' , } ; example export function flexItem < P extends FlexItemStyleProps > ( props ) { const styles = { } ; for ( const key in props ) { if ( key in flexItemProps ) { const attr = flexItemProps [ key as keyof FlexItemStyleProps ] ; const value = props [ key ] ; styles [ attr ] = value ; } } return styles ; }