From 7e89b8405a97b630b9adb4ed3870aeb2c77e11a3 Mon Sep 17 00:00:00 2001 From: Domino987 Date: Wed, 28 Jul 2021 12:05:06 +0200 Subject: [PATCH] chore: update to mui beta v2 --- src/components/MTableHeader/index.js | 20 ++++--- src/components/MTablePagination/index.js | 24 ++++----- .../MTableSteppedPaginationInner/index.js | 17 ++---- src/components/MTableToolbar/index.js | 53 +++++++++---------- src/index.js | 27 +--------- src/material-table.js | 40 +++++--------- 6 files changed, 65 insertions(+), 116 deletions(-) diff --git a/src/components/MTableHeader/index.js b/src/components/MTableHeader/index.js index db20dfc6..665f439f 100644 --- a/src/components/MTableHeader/index.js +++ b/src/components/MTableHeader/index.js @@ -7,12 +7,10 @@ import TableSortLabel from '@material-ui/core/TableSortLabel'; import Checkbox from '@material-ui/core/Checkbox'; import { Draggable } from 'react-beautiful-dnd'; import { Tooltip, useTheme } from '@material-ui/core'; -import { makeStyles } from '@material-ui/styles'; import * as CommonValues from '../../utils/common-values'; export function MTableHeader({ onColumnResized, ...props }) { const theme = useTheme(); - const classes = useStyles(); const [ { resizingColumnDef, lastX, lastAdditionalWidth }, // Extract the props to use instead of the whole state object setState @@ -79,7 +77,7 @@ export function MTableHeader({ onColumnResized, ...props }) { @@ -269,7 +267,7 @@ export function MTableHeader({ onColumnResized, ...props }) { {props.showSelectAllCheckbox && ( @@ -295,7 +293,7 @@ export function MTableHeader({ onColumnResized, ...props }) { ); @@ -335,7 +333,7 @@ export function MTableHeader({ onColumnResized, ...props }) { ); @@ -349,7 +347,7 @@ export function MTableHeader({ onColumnResized, ...props }) { ); }); @@ -404,15 +402,15 @@ MTableHeader.propTypes = { tooltip: PropTypes.string }; -export const useStyles = makeStyles((theme) => ({ +export const styles = { header: { // display: 'inline-block', // position: 'sticky', top: 0, zIndex: 10, - backgroundColor: theme.palette.background.paper // Change according to theme, + backgroundColor: 'background.paper ' // Change according to theme, } -})); +}; const MTableHeaderRef = React.forwardRef(function MTableHeaderRef(props, ref) { return ; diff --git a/src/components/MTablePagination/index.js b/src/components/MTablePagination/index.js index 1493639a..971937e5 100644 --- a/src/components/MTablePagination/index.js +++ b/src/components/MTablePagination/index.js @@ -1,15 +1,13 @@ /* eslint-disable no-unused-vars */ import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; import PropTypes from 'prop-types'; import React from 'react'; -import { useTheme } from '@material-ui/core'; +import { useTheme, Box } from '@material-ui/core'; /* eslint-enable no-unused-vars */ function MTablePagination(props) { - const classes = useStyles(); const theme = useTheme(); const handleFirstPageButtonClick = (event) => { props.onPageChange(event, 0); @@ -39,7 +37,14 @@ function MTablePagination(props) { }; return ( -
+ {showFirstLastPageButtons && ( @@ -124,22 +129,13 @@ function MTablePagination(props) { )} -
+ ); } return render(); } -const useStyles = makeStyles((theme) => ({ - root: { - flexShrink: 0, - color: theme.palette.text.secondary, - display: 'flex' - // lineHeight: '48px' - } -})); - MTablePagination.propTypes = { onPageChange: PropTypes.func, page: PropTypes.number, diff --git a/src/components/MTableSteppedPaginationInner/index.js b/src/components/MTableSteppedPaginationInner/index.js index 61a0053b..75f83587 100644 --- a/src/components/MTableSteppedPaginationInner/index.js +++ b/src/components/MTableSteppedPaginationInner/index.js @@ -1,5 +1,4 @@ import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; @@ -8,7 +7,6 @@ import React from 'react'; import { useTheme } from '@material-ui/core'; function MTablePaginationInner(props) { - const classes = useStyles(); const theme = useTheme(); const handleFirstPageButtonClick = (event) => { props.onPageChange(event, 0); @@ -74,7 +72,10 @@ function MTablePaginationInner(props) { const pageEnd = Math.min(maxPages, page + 1); return ( -
+ {showFirstLastPageButtons && ( @@ -134,20 +135,12 @@ function MTablePaginationInner(props) { )} -
+ ); } return render(); } -const useStyles = makeStyles((theme) => ({ - root: { - flexShrink: 0, - color: theme.palette.text.secondary, - marginLeft: theme.spacing(2.5) - } -})); - MTablePaginationInner.propTypes = { onPageChange: PropTypes.func, page: PropTypes.number, diff --git a/src/components/MTableToolbar/index.js b/src/components/MTableToolbar/index.js index 74e19ca6..e6ad1f8a 100644 --- a/src/components/MTableToolbar/index.js +++ b/src/components/MTableToolbar/index.js @@ -7,14 +7,12 @@ import TextField from '@material-ui/core/TextField'; import Toolbar from '@material-ui/core/Toolbar'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; -import { lighten } from '@material-ui/core'; -import { makeStyles } from '@material-ui/styles'; -import classNames from 'classnames'; +import { lighten, Box, useTheme } from '@material-ui/core'; import PropTypes from 'prop-types'; import React from 'react'; export function MTableToolbar(props) { - const classes = useStyles(); + const theme = useTheme(); const [state, setState] = React.useState(() => ({ columnsButtonAnchorEl: null, exportButtonAnchorEl: null, @@ -68,10 +66,10 @@ export function MTableToolbar(props) { return ( onSearchChange(event.target.value)} @@ -171,7 +169,7 @@ export function MTableToolbar(props) { return (
  • +
    {props.selectedRows && props.selectedRows.length > 0 ? renderSelectedActions() : renderDefaultActions()}
    - +     ); } @@ -287,7 +285,7 @@ export function MTableToolbar(props) { title ); - return
    {toolBarTitle}
    ; + return {toolBarTitle}; } function render() { @@ -308,17 +306,19 @@ export function MTableToolbar(props) { return ( 0 - })} + sx={{ + ...styles.root, + ...(props.showTextRowsSelected && + props.selectedRows && + props.selectedRows.length > 0 + ? styles.highlight(theme) + : {}) + }} > {title && renderToolbarTitle(title)} {props.searchFieldAlignment === 'left' && renderSearch()} {props.toolbarButtonAlignment === 'left' && renderActions()} -
    + {props.searchFieldAlignment === 'right' && renderSearch()} {props.toolbarButtonAlignment === 'right' && renderActions()} @@ -389,12 +389,12 @@ MTableToolbar.propTypes = { searchAutoFocus: PropTypes.bool }; -export const useStyles = makeStyles((theme) => ({ +const styles = { root: { - paddingRight: theme.spacing(1), - paddingLeft: theme.spacing(2) + paddingRight: 1, + paddingLeft: 2 }, - highlight: + highlight: (theme) => theme.palette.mode === 'light' ? { color: theme.palette.secondary.main, @@ -408,20 +408,19 @@ export const useStyles = makeStyles((theme) => ({ flex: '1 1 10%' }, actions: { - color: theme.palette.text.secondary + color: 'text.secondary' }, title: { overflow: 'hidden' }, searchField: { minWidth: 150, - paddingLeft: theme.spacing(2) + paddingLeft: 2 }, formControlLabel: { - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1) + px: 1 } -})); +}; const MTableToolbarRef = React.forwardRef(function MTableToolbarRef( props, diff --git a/src/index.js b/src/index.js index 9ef13070..8e1e0ef9 100644 --- a/src/index.js +++ b/src/index.js @@ -3,39 +3,14 @@ import React from 'react'; import { defaultProps } from './defaults'; import { propTypes } from './prop-types'; import MaterialTable from './material-table'; -import { makeStyles } from '@material-ui/styles'; import { useTheme } from '@material-ui/core'; MaterialTable.defaultProps = defaultProps; MaterialTable.propTypes = propTypes; -const useStyles = makeStyles({ - paginationRoot: { - width: '100%' - }, - paginationToolbar: { - padding: '0 !important', - width: '100%' - }, - paginationCaption: { - display: 'none' - }, - paginationSelectRoot: { - margin: 0 - } -}); - export default function Table(props) { - const classes = useStyles(); const theme = useTheme(); - return ( - - ); + return ; } export { diff --git a/src/material-table.js b/src/material-table.js index ea7c8c89..34ccfe12 100644 --- a/src/material-table.js +++ b/src/material-table.js @@ -11,7 +11,7 @@ import DataManager from './utils/data-manager'; import { debounce } from 'debounce'; import equal from 'fast-deep-equal/react'; import * as CommonValues from './utils/common-values'; -import { makeStyles } from '@material-ui/styles'; +import { Box } from '@material-ui/core'; /* eslint-enable no-unused-vars */ @@ -785,7 +785,6 @@ export default class MaterialTable extends React.Component { const totalCount = isOutsidePageNumbers ? props.totalCount : this.state.data.length; - return ( @@ -797,9 +796,13 @@ export default class MaterialTable extends React.Component { caption: props.classes.paginationCaption, selectRoot: props.classes.paginationSelectRoot }} - style={{ - float: props.theme.direction === 'rtl' ? '' : 'right', - overflowX: 'auto' + sx={{ + float: (theme) => (theme.direction === 'rtl' ? '' : 'right'), + overflowX: 'auto', + width: '100%', + '& .MuiTypography-root': { + display: 'none' + } }} colSpan={3} count={ @@ -1223,34 +1226,19 @@ export default class MaterialTable extends React.Component { } } -const useStyles = makeStyles(() => ({ - horizontalScrollContainer: { - '& ::-webkit-scrollbar': { - '-webkit-appearance': 'none' - }, - '& ::-webkit-scrollbar:horizontal': { - height: 8 - }, - '& ::-webkit-scrollbar-thumb': { - borderRadius: 4, - border: '2px solid white', - backgroundColor: 'rgba(0, 0, 0, .3)' - } - } -})); - const ScrollBar = ({ double, children }) => { - const classes = useStyles(); if (double) { return {children}; } else { return ( -
    {children} -
    + ); } };