@krowdy-ui/views/es/TableInfinity/TableInfinity.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { Paper, TableCell } from '@material-ui/core';
import { AutoSizer, Column, Table, InfiniteLoader } from 'react-virtualized';
import { Typography } from '@krowdy-ui/core';
const useStyles = makeStyles(theme => ({
  flexContainer: {
    alignItems: 'center',
    boxSizing: 'border-box',
    display: 'flex',
    justifyContent: 'space-between'
  },
  noClick: {
    cursor: 'initial'
  },
  selected: {
    backgroundColor: theme.palette.primary[50]
  },
  table: {
    // temporary right-to-left patch, waiting for
    // https://github.com/bvaughn/react-virtualized/issues/454
    '& .ReactVirtualized__Table__headerRow': {
      backgroundColor: theme.palette.secondary[50],
      display: 'flex',
      flip: false,
      justifyContent: 'space-between',
      paddingRight: '0px !important'
    }
  },
  tableCell: {
    flex: 1
  },
  tableRow: {
    borderBottom: '1px solid rgba(224, 224, 224, 1)',
    boxSizing: 'border-box',
    cursor: 'pointer'
  },
  tableRowHover: {
    '&:hover': {
      backgroundColor: theme.palette.primary[50]
    }
  }
}));
const StyledTableCell = withStyles(theme => ({
  body: {
    fontSize: 14
  },
  head: {
    backgroundColor: theme.palette.secondary[50],
    color: theme.palette.grey[800]
  }
}))(TableCell);

const VirtualizedTable = props => {
  const {
    columns,
    rowHeight = 48,
    headerHeight = 48,
    onRowClick,
    rowCount = 100000,
    rows,
    isRowLoaded = () => {},
    loadMoreRows = () => {},
    threshold = 15,
    minimumBatchSize = 10,
    children
  } = props,
        tableProps = _objectWithoutPropertiesLoose(props, ["columns", "rowHeight", "headerHeight", "onRowClick", "rowCount", "rows", "isRowLoaded", "loadMoreRows", "threshold", "minimumBatchSize", "children"]);

  const classes = useStyles();

  const getRowClassName = ({
    index
  }) => {
    let checked = false;

    if (index > -1) {
      const {
        checked: rowChecked,
        selected
      } = rows[index];
      checked = rowChecked || selected;
    }

    return clsx(classes.tableRow, classes.flexContainer, index !== -1 && onRowClick != null && classes.tableRowHover, checked && classes.selected);
  };

  const cellRenderer = ({
    cellData,
    columnIndex,
    rowData
  }) => {
    const {
      numeric,
      rowComponent: Component
    } = columns[columnIndex];
    return /*#__PURE__*/React.createElement(TableCell, {
      align: columnIndex != null && numeric || false ? 'right' : 'left',
      className: clsx(classes.tableCell, classes.flexContainer, onRowClick == null && classes.noClick),
      component: "div",
      style: {
        height: rowHeight
      },
      variant: "body"
    }, /*#__PURE__*/React.createElement(Typography, {
      style: {
        fontSize: 12
      },
      variant: "body2"
    }, Component ? /*#__PURE__*/React.createElement(Component, {
      rowData: rowData,
      value: cellData
    }) : cellData));
  };

  const headerRenderer = data => {
    const {
      label,
      columnIndex
    } = data;
    const {
      numeric,
      columnComponent: Component
    } = columns[columnIndex];
    return /*#__PURE__*/React.createElement(StyledTableCell, {
      align: numeric || false ? 'right' : 'left',
      className: clsx(classes.tableCell, classes.flexContainer, classes.noClick),
      component: "div",
      style: {
        height: headerHeight
      },
      variant: "head"
    }, /*#__PURE__*/React.createElement(Typography, {
      style: {
        fontSize: 14
      },
      variant: "h5"
    }, Component ? /*#__PURE__*/React.createElement(Component, {
      value: label
    }) : label));
  };

  return /*#__PURE__*/React.createElement(InfiniteLoader, {
    children: children,
    isRowLoaded: isRowLoaded,
    loadMoreRows: loadMoreRows,
    minimumBatchSize: minimumBatchSize,
    rowCount: rowCount,
    threshold: threshold
  }, ({
    onRowsRendered,
    registerChild
  }) => /*#__PURE__*/React.createElement(AutoSizer, null, ({
    height,
    width
  }) => /*#__PURE__*/React.createElement(Table, _extends({
    className: classes.table,
    gridStyle: {
      direction: 'inherit'
    },
    headerHeight: headerHeight,
    height: height,
    onRowClick: onRowClick,
    onRowsRendered: onRowsRendered,
    ref: registerChild,
    rowCount: rowCount,
    rowHeight: rowHeight,
    width: width
  }, tableProps, {
    rowClassName: getRowClassName
  }), columns.map((_ref, index) => {
    let {
      key
    } = _ref,
        other = _objectWithoutPropertiesLoose(_ref, ["key"]);

    return /*#__PURE__*/React.createElement(Column, _extends({
      cellRenderer: cellRenderer,
      className: classes.flexContainer,
      dataKey: key,
      headerRenderer: headerProps => headerRenderer(_extends({}, headerProps, {
        columnIndex: index
      })),
      key: key
    }, other));
  }))));
};

process.env.NODE_ENV !== "production" ? VirtualizedTable.propTypes = {
  columns: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    numeric: PropTypes.bool,
    width: PropTypes.number
  })).isRequired,
  headerHeight: PropTypes.number,
  onRowClick: PropTypes.func,
  rowHeight: PropTypes.number
} : void 0;

const TableInfinity = _ref2 => {
  let {
    height = 400,
    width = '100%',
    columns,
    rows,
    onRowClick,
    rowCount
  } = _ref2,
      rest = _objectWithoutPropertiesLoose(_ref2, ["height", "width", "columns", "rows", "onRowClick", "rowCount"]);

  const classes = useMainStyles({
    height,
    width
  });
  return /*#__PURE__*/React.createElement(Paper, {
    className: classes.paper,
    square: true
  }, /*#__PURE__*/React.createElement(VirtualizedTable, _extends({
    columns: columns,
    onRowClick: onRowClick,
    rowCount: rowCount,
    rowLength: rows.length,
    rows: rows
  }, rest, {
    rowGetter: ({
      index
    }) => rows[index]
  })));
};

const useMainStyles = makeStyles(() => ({
  paper: {
    height: ({
      height
    }) => height,
    width: ({
      width
    }) => width
  }
}));
export default TableInfinity;