import * as React from 'react' ; import { ViewProps as RNViewProps } from 'react-native' ; import { createComponent , createElement , createHook } from 'bumbag/utils' ; import { Box , BoxProps } from '../Box' ; import * as styles from './Level.styles' ; import { useBreakpoint } from '../utils' ; export type LocalLevelProps = { /** Sets the orientation of the level. */ orientation ? : 'vertical' | 'horizontal' ; /** Sets the spacing of the level when it snaps to a vertical orientation. */ spacing ? : string ; /** Sets the breakpoint at which the level should become vertical. */ verticalBelow ? : string ; } ; export type LevelProps = BoxProps & RNViewProps & LocalLevelProps ; const useProps = createHook < LevelProps > ( ( props ) => { const { orientation , spacing , verticalBelow : _verticalBelow } = props ; let verticalBelow = _verticalBelow ; if ( orientation === 'vertical' ) { verticalBelow = undefined ; } const boxProps = Box . useProps ( { ... props , alignX : undefined , alignY : undefined } ) ; const isCollapsed = useBreakpoint ( 'width' , `max-${ verticalBelow }` ) ; let children = boxProps . children ; if ( ! Array . isArray ( children ) ) { children = [ children ] ; } return { ... boxProps , alignX : props . alignX , alignY : props . alignY , children : children . map ( ( child , i ) => child ? React . cloneElement ( child , { key : i , marginBottom : child ?. props ?. marginBottom || ( isCollapsed ? ( i < children . length - 1 ? spacing : undefined ) : undefined ) , } ) : null ) , } ; } , { defaultProps : { alignX : 'center' , orientation : 'horizontal' , spacing : 'major-2' , verticalBelow : 'tablet' } , themeKey : 'native.Level' , } ) ; export const Level = createComponent < LevelProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledLevel , htmlProps , } ) ; } , { attach : { useProps , displayName : 'native.Level' , } , themeKey : 'native.Level' , } ) ;