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