import { Box } from 'native-base' ; import React from 'react' ; import type { SpaceType as ThemeSpaceType } from '../components/types' ; import { ResponsiveQueryContext } from './useResponsiveQuery/ResponsiveQueryProvider' ; type SpaceType = 'gutter' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | ThemeSpaceType ; const getSpacedChildren = ( children , space , axis , reverse , divider ) : any => { let childrenArray = React . Children . toArray ( children ) ; childrenArray = reverse === 'reverse' ? [ ... childrenArray ] . reverse ( ) : childrenArray ; const orientation = axis === 'X' ? 'vertical' : 'horizontal' ; const responsiveQueryContext = React . useContext ( ResponsiveQueryContext ) ; const disableCSSMediaQueries = responsiveQueryContext . disableCSSMediaQueries ; if ( divider ) { const spacingProp = { ... ( axis === 'X' ? { mx : space } : { my : space } ) , } ; divider = React . cloneElement ( divider , { orientation , ... spacingProp , } ) ; childrenArray = childrenArray . map ( ( child , index ) => { return ( < React . Fragment key = { child . key ?? `spaced-child-${ index }` } > { child } { index < childrenArray . length - 1 && divider } < /React.Fragment>); } ) ; } else { const spacingProp = { ... ( axis === 'X' ? { width : space } : { height : space } ) , } ; childrenArray = childrenArray . map ( ( child , index ) => { return ( < React . Fragment key = { child . key ?? `spaced-child-${ index }` } > { child } { disableCSSMediaQueries ? ( index < childrenArray . length - 1 && < Box { ... spacingProp } / > ) : ( < > < />)} < /React.Fragment>); } ) ; } return childrenArray ; } ; export default getSpacedChildren ;