1import { css } from '@emotion/react'; 2import { theme } from '@expo/styleguide'; 3import { spacing } from '@expo/styleguide-base'; 4import type { PropsWithChildren } from 'react'; 5 6import { TextAlign } from './types'; 7import { convertAlign } from './utils'; 8 9type CellProps = PropsWithChildren<{ 10 fitContent?: boolean; 11 align?: TextAlign | 'char'; 12 colSpan?: number; 13}>; 14 15export const Cell = ({ children, colSpan, fitContent = false, align = 'left' }: CellProps) => ( 16 <td 17 css={[tableCellStyle, { textAlign: convertAlign(align) }, fitContent && fitContentStyle]} 18 colSpan={colSpan}> 19 {children} 20 </td> 21); 22 23const tableCellStyle = css({ 24 padding: spacing[4], 25 verticalAlign: 'middle', 26 borderRight: `1px solid ${theme.border.default}`, 27 28 '&:last-child': { 29 borderRight: 0, 30 }, 31 32 '> *:last-child': { 33 marginBottom: '0 !important', 34 }, 35}); 36 37const fitContentStyle = css({ 38 width: 'fit-content', 39}); 40