text: import React from 'react';
  import { connect } from 'react-redux'
  
  import { postData } from '../helpers'
  
  import classNames from 'classnames';
  import TableCell from '@material-ui/core/TableCell';
  import TableSortLabel from '@material-ui/core/TableSortLabel';
  import { AutoSizer, Column, SortDirection, Table } from 'react-virtualized';
  
  import { withStyles } from '@material-ui/core/styles';
  import { theme, addToTheme } from './theme';
  
  const styles = addToTheme(
    {
      table: {
        fontFamily: theme.typography.fontFamily,
      },
      flexContainer: {
        display: 'flex',
        alignItems: 'center',
        boxSizing: 'border-box',
      },
      tableRow: {
        cursor: 'pointer',
      },
      tableRowHover: {
        '&:hover': {
          backgroundColor: theme.palette.grey[200],
        },
      },
      tableCell: {
        flex: 1,
      },
      noClick: {
        cursor: 'initial',
      },
    }
  )
  
  
  class MuiVirtualizedTable extends React.PureComponent {
    getRowClassName = ({ index }) => {
      const { classes, rowClassName, onRowClick, onRowDoubleClick } = this.props;
  
      return classNames(classes.tableRow, classes.flexContainer, rowClassName, {
        [classes.tableRowHover]: index !== -1 && (onRowClick != null || onRowDoubleClick != null),
      });
    };
  
    cellRenderer = ({ cellData, columnIndex = null }) => {
      const { columns, classes, rowHeight, onRowClick, onRowDoubleClick } = this.props;
      return (
        <TableCell
          component="div"
          className={classNames(classes.tableCell, classes.flexContainer, {
            [classes.noClick]: (onRowClick == null) && (onRowDoubleClick == null),
          })}
          variant="body"
          style={{ height: rowHeight }}
          align={(columnIndex != null && columns[columnIndex].numeric) || false ? 'right' : 'left'}
        >
          {cellData}
        </TableCell>
      );
    };
  
    headerRenderer = ({ label, columnIndex, dataKey, sortBy, sortDirection }) => {
      const { headerHeight, columns, classes, sort } = this.props;
      const direction = {
        [SortDirection.ASC]: 'asc',
        [SortDirection.DESC]: 'desc',
      };
  
      const inner =
        !columns[columnIndex].disableSort && sort != null ? (
          <TableSortLabel active={dataKey === sortBy} direction={direction[sortDirection]}>
            {label}
          </TableSortLabel>
        ) : (
          label
        );
  
      return (
        <TableCell
          component="div"
          className={classNames(classes.tableCell, classes.flexContainer, classes.noClick)}
          variant="head"
          style={{ height: headerHeight }}
          align={columns[columnIndex].numeric || false ? 'right' : 'left'}
        >
          {inner}
        </TableCell>
      );
    };
  
    render() {
      const { classes, columns, ...tableProps } = this.props;
      return (
        <AutoSizer>
          {({ height, width }) => (
            <Table
              className={classes.table}
              height={height}
              width={width}
              {...tableProps}
              rowClassName={this.getRowClassName}
            >
              {columns.map(({ cellContentRenderer = null, className, dataKey, ...other }, index) => {
                let renderer;
                if (cellContentRenderer != null) {
                  renderer = cellRendererProps =>
                    this.cellRenderer({
                      cellData: cellContentRenderer(cellRendererProps),
                      columnIndex: index,
                    });
                } else {
                  renderer = this.cellRenderer;
                }
  
                return (
                  <Column
                    key={dataKey}
                    headerRenderer={headerProps =>
                      this.headerRenderer({
                        ...headerProps,
                        columnIndex: index,
                      })
                    }
                    className={classNames(classes.flexContainer, className)}
                    cellRenderer={renderer}
                    dataKey={dataKey}
                    {...other}
                  />
                );
              })}
            </Table>
          )}
        </AutoSizer>
      );
    }
  }
  
  MuiVirtualizedTable.defaultProps = {
    headerHeight: 56,
    rowHeight: 65,
  };
  
  export const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);