@confi/conflux-react-ui-test-package/esm/table/table-body.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
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';
var defaultProps = {
  className: ''
};

var TableBody = function TableBody(_ref) {
  var data = _ref.data,
      hover = _ref.hover,
      emptyText = _ref.emptyText,
      onRow = _ref.onRow,
      onCell = _ref.onCell;
  var theme = useTheme();

  var _useTableContext = useTableContext(),
      columns = _useTableContext.columns;

  var rowClickHandler = function rowClickHandler(row, index) {
    onRow(row, index);
  };

  return /*#__PURE__*/React.createElement("tbody", {
    className: _JSXStyle.dynamic([["4092701551", [theme.palette.accents_1, theme.layout.gapHalf, theme.palette.border, theme.palette.accents_6]]])
  }, data.map(function (row, index) {
    return /*#__PURE__*/React.createElement("tr", {
      key: "tbody-row-".concat(index),
      onClick: function onClick() {
        return rowClickHandler(row, index);
      },
      className: _JSXStyle.dynamic([["4092701551", [theme.palette.accents_1, theme.layout.gapHalf, theme.palette.border, theme.palette.accents_6]]]) + " " + ((hover ? 'hover' : '') || "")
    }, /*#__PURE__*/React.createElement(TableCell, {
      columns: columns,
      row: row,
      rowIndex: index,
      emptyText: emptyText,
      onCellClick: onCell
    }));
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4092701551",
    dynamic: [theme.palette.accents_1, theme.layout.gapHalf, theme.palette.border, theme.palette.accents_6]
  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 ").concat(theme.layout.gapHalf, ";border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:0.875rem;text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:3.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
};

var MemoTableBody = React.memo(TableBody);
export default withDefaults(MemoTableBody, defaultProps);