import React from 'react' ; import { component , startWithType } from 'refun' ; import { normalizeWebStyle } from 'stili' ; import { isFunction , isNumber } from 'tsfn' ; import { round } from './round' ; import { onLayout } from './on-layout' ; import type { TSize } from './types' ; const style = normalizeWebStyle ( { display : 'flex' , flexDirection : 'row' , flexGrow : 0 , flexShrink : 0 , alignSelf : 'flex-start' , } ) ; export const Size = component ( startWithType < TSize > ( ) , onLayout ( 'ref' , ( ref , { width , height , onWidthChange , onHeightChange , onChange } ) => { const newWidth = isNumber ( width ) ? round ( ref . offsetWidth ) : width ! ; const newHeight = isNumber ( height ) ? round ( ref . offsetHeight ) : height ! ; const hasWidthChanged = width !== newWidth ; const hasHeightChaged = height !== newHeight ; if ( hasWidthChanged && isFunction ( onWidthChange ) ) { onWidthChange ( newWidth ) ; } if ( hasHeightChaged && isFunction ( onHeightChange ) ) { onHeightChange ( newHeight ) ; } if ( ( hasWidthChanged || hasHeightChaged ) && isFunction ( onChange ) ) { onChange ( { width : newWidth , height : newHeight } ) ; } } ) ) ( ( { ref , children } ) => ( < div style = { style } ref = { ref } > { children } < /div>)); Size . displayName = 'Size' ;