react/components/table/table-body.tsx

import React from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../styles/use-theme'
import TableCell from './table-cell'
import { useTableContext } from './table-context'

interface Props {
  hover: boolean
  emptyText: string
  onRow: (row: any, index: number) => void
  onCell: (cell: any, index: number, colunm: number) => void
  data: Array<any>
  className?: string
}

const defaultProps = {
  className: '',
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type TableBodyProps = Props & typeof defaultProps & NativeAttrs

export type cellActions = {
  remove: Function
}

export type cellData = {
  row: number
  column: number
  value: any
}

const TableBody: React.FC<TableBodyProps> = React.memo(({
  data, hover, emptyText, onRow, onCell
}) => {
  const theme = useTheme()
  const { columns } = useTableContext()
  const rowClickHandler = (row: any, index: number) => {
    onRow(row, index)
  }
  
  return (
    <tbody>
      {data.map((row, index) => {
        return (
          <tr key={`tbody-row-${index}`} className={hover ? 'hover' : ''}
            onClick={() => rowClickHandler(row, index)}>
            <TableCell columns={columns}
              row={row}
              rowIndex={index}
              emptyText={emptyText}
              onCellClick={onCell} />
          </tr>
        )
      })}
      <style jsx>{`
        tr {
          transition: background-color .25s ease;
        }
        
        tr.hover:hover {
          background-color: ${theme.palette.accents_1};
        }

        tr :global(td) {
          padding: 0 ${theme.layout.gapHalf};
          border-bottom: 1px solid ${theme.palette.border};
          color: ${theme.palette.accents_6};
          font-size: 0.875rem;
          text-align: left;
        }
        
        tr :global(.cell) {
          min-height: 3.125rem;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          flex-flow: row wrap;
        }
      `}</style>
    </tbody>
  )
})

export default withDefaults(TableBody, defaultProps)