Каков правильный контейнер / стиль для @ material-ui / core / TablePagination? - PullRequest
Новая
       8

Каков правильный контейнер / стиль для @ material-ui / core / TablePagination?

0 голосов
/ 07 декабря 2018

A @material-ui/core/Table отрисовывается отлично в реакции, но при добавлении TablePagination возникает ошибка: 

Uncaught TypeError: Cannot read property '@global' of undefined 
at handleNestedGlobalContainerRule (index.js?1115:125)
...

Приведенный ниже код выдает ошибку, когда присутствует элемент TablePagination, но работаетесли он был удален из TableFooter: 

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {withStyles} from 'material-ui/styles'
import Typography from 'material-ui/Typography'
import GridList, { GridListTile, GridListTileBar } from 'material-ui/GridList'
import {Link} from 'react-router-dom'
import AddToCart from '../cart/AddToCart'

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableFooter from '@material-ui/core/TableFooter';
import TableRow from '@material-ui/core/TableRow';
import TablePagination from '@material-ui/core/TablePagination';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
    background: theme.palette.background.paper,
    textAlign: 'left',
    padding: '0 8px'
  },
  container: {
    minWidth: '100%',
    paddingBottom: '14px'
  },
  title: {
    padding:`${theme.spacing.unit * 3}px ${theme.spacing.unit * 2.5}px ${theme.spacing.unit * 2}px`,
    color: theme.palette.openTitle,
    width: '100%'
  },
  table: {
    width: '100%'
  },
  tableRow: {
    fontSize:'1em'
  },
  cellShort: {
    padding: '4px 4px 4px 4px!important'
  },
  cartStyle: {
    width: '20px', height: '20px'
  }
})

class ProductsView extends Component {

  state = {
    order: 'asc',
    orderBy: 'ServiceName',
    selected: [],
    page: 0,
    rowsPerPage: 5,
  };

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value });
  };


  render() {
    const {classes} = this.props
    const { data, order, orderBy, selected, rowsPerPage, page } = this.state;
    return (
      <div className={classes.root}>
      {this.props.products.length > 0 ?
        (<div className={classes.container}>
          <Table className={classes.table} >            
            <TableHead>
              <TableRow>
                <TableCell className={classes.cellShort}>SKU</TableCell>
                <TableCell className={classes.cellShort}>ServiceName</TableCell>
                <TableCell className={classes.cellShort} numeric>NumPacks</TableCell>
                <TableCell className={classes.cellShort}>Format</TableCell>
                <TableCell className={classes.cellShort}>Unit</TableCell>
                <TableCell className={classes.cellShort} numeric>Price</TableCell>
                <TableCell className={classes.cellShort}></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>

          {this.props.products.map((product, i) => (

            <TableRow key={i} className={classes.tableRow}>
              <TableCell component="th" scope="row" className={classes.cellShort}>
              <Link to={"/product/"+product._id}>{product.ProductCode}</Link>
              </TableCell>
              <TableCell className={classes.cellShort}>{product.ServiceName}</TableCell>
              <TableCell className={classes.cellShort} numeric>{product.NumPacks}</TableCell>
              <TableCell className={classes.cellShort}>{product.Format}</TableCell>
              <TableCell className={classes.cellShort}>{product.unit}</TableCell>
              <TableCell className={classes.cellShort} numeric>{product.price}</TableCell>
              <TableCell className={classes.cellShort}><AddToCart item={product} cartStyle={classes.cartStyle}/></TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>

            <TablePagination
                  rowsPerPageOptions={[5, 10, 25]}
                  colSpan={6}
                  component="div"
                  count={this.props.products.length}
                  rowsPerPage={rowsPerPage}
                  page={page}
                  onChangePage={this.handleChangePage}
                  onChangeRowsPerPage={this.handleChangeRowsPerPage}
                  backIconButtonProps={{
                    'aria-label': 'Previous Page',
                  }}
                  nextIconButtonProps={{
                    'aria-label': 'Next Page',
                  }}
            />

          </TableRow>
        </TableFooter>
      </Table> </div> ) : this.props.searched && (<Typography type="subheading" component="h4" className={classes.title}>No products found! :(</Typography>)}           
      </div> )
  }
}
ProductsView.propTypes = {
  classes: PropTypes.object.isRequired,
  products: PropTypes.array.isRequired,
  searched: PropTypes.bool.isRequired
}

export default withStyles(styles)(ProductsView)

, я попробовал несколько комбинаций размещения элемента TablePagination, а также жестко заданных значений для count, rowsPerPage иpage.

Я не уверен, какое свойство @global пытается быть прочитано, а какое неопределенное.Ошибка может быть связана с контейнером или стилем - могут ли одновременно использоваться material-ui и @ material-ui?

...