import React from 'react' ; import { Box , HStack , VStack } from '../../primitives' ; import type { ISimpleGridProps } from './types' ; import { useThemeProps } from '../../../hooks/useThemeProps' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const DEBUG_STYLES = false ? { rows : { borderWidth : '1px' , } , cols : { borderWidth : '1px' , } , } : { rows : { } , cols : { } , } ; const SimpleGrid = ( props , ref ? ) : JSX . Element => { const { columns , space , spacingX , spacingY , minChildWidth , children , ... remainingProps } = useThemeProps ( 'SimpleGrid' , props ) ; if ( useHasResponsiveProps ( props ) ) { return < > < />; } let cellSpacing = space ?? 0 ; let cellSpacingX = spacingX ?? cellSpacing ; let cellSpacingY = spacingY ?? cellSpacing ; const childrenArray = React . Children . toArray ( children ) ; if ( columns ) { let rowSlices = [ ] ; for ( let i = 0 ; i < childrenArray . length ; i = i + columns ) { rowSlices . push ( childrenArray . slice ( i , i + columns ) ) ; } return ( < VStack { ... DEBUG_STYLES . rows } space = { cellSpacingY } { ... remainingProps } ref = { ref } > { rowSlices . map ( ( row , rowIndex ) => { return ( < HStack space = { cellSpacingX } key = { rowIndex } > { row . map ( ( col ) => { return ( < Box { ... DEBUG_STYLES . cols } key = { col . key } > { col } < /Box>); } ) } < /HStack>); } ) } < /VStack>); } else if ( minChildWidth ) { return ( < Box flexDirection = "row" flexWrap = "wrap" justifyContent = "center" { ... remainingProps } ref = { ref } > { childrenArray . map ( ( col ) => { return ( < Box { ... DEBUG_STYLES . cols } mx = { cellSpacingX } my = { cellSpacingY } key = { col . key } minWidth = { minChildWidth } > { col } < /Box>); } ) } < /Box>); } return < > < />; } ; export default React . memo ( React . forwardRef ( SimpleGrid ) ) ;