chore: update to mui beta v2

material-table-core · Jul 28, 2021 · 7e89b84 · 7e89b84
1 parent 53eb867
commit 7e89b84
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 116 deletions.
diff --git 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 }) {
       <TableCell
         key="key-actions-column"
         padding="checkbox"
-        className={classes.header}
+        sx={styles.header}
         style={{
           ...props.headerStyle,
           width: width,
@@ -249,7 +247,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
           <TableCell
             key={columnDef.tableData.id}
             align={cellAlignment}
-            className={classes.header}
+            sx={styles.header}
             style={getCellStyle(columnDef)}
             size={size}
           >
@@ -269,7 +267,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       <TableCell
         padding="none"
         key="key-selection-column"
-        className={classes.header}
+        sx={styles.header}
         style={{ ...props.headerStyle, width: selectionWidth }}
       >
         {props.showSelectAllCheckbox && (
@@ -295,7 +293,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       <TableCell
         padding="none"
         key="key-detail-panel-column"
-        className={classes.header}
+        sx={styles.header}
         style={{ ...props.headerStyle }}
       />
     );
@@ -335,7 +333,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
         <TableCell
           padding="none"
           key={'key-tree-data-header'}
-          className={classes.header}
+          sx={styles.header}
           style={{ ...props.headerStyle }}
         />
       );
@@ -349,7 +347,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
           <TableCell
             padding="checkbox"
             key={'key-group-header' + columnDef.tableData.id}
-            className={classes.header}
+            sx={styles.header}
           />
         );
       });
@@ -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 <MTableHeader {...props} forwardedRef={ref} />;

diff --git 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 (
-      <div className={classes.root} ref={props.forwardedRef}>
+      <Box
+        sx={{
+          flexShrink: 0,
+          color: 'text.secondary',
+          display: 'flex'
+        }}
+        ref={props.forwardedRef}
+      >
         {showFirstLastPageButtons && (
           <Tooltip title={localization.firstTooltip}>
             <span>
@@ -124,22 +129,13 @@ function MTablePagination(props) {
             </span>
           </Tooltip>
         )}
-      </div>
+      </Box>
     );
   }
 
   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
@@ -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 (
-      <div className={classes.root} ref={props.forwardedRef}>
+      <Box
+        sx={{ flexShrink: 0, color: 'text.secondary', marginLeft: 2.5 }}
+        ref={props.forwardedRef}
+      >
         {showFirstLastPageButtons && (
           <Tooltip title={localization.firstTooltip}>
             <span>
@@ -134,20 +135,12 @@ function MTablePaginationInner(props) {
             </span>
           </Tooltip>
         )}
-      </div>
+      </Box>
     );
   }
   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
@@ -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 (
         <TextField
           autoFocus={props.searchAutoFocus}
-          className={
+          sx={
             props.searchFieldAlignment === 'left' && props.showTitle === false
-              ? null
-              : classes.searchField
+              ? undefined
+              : styles.searchField
           }
           value={state.searchText}
           onChange={(event) => onSearchChange(event.target.value)}
@@ -171,7 +169,7 @@ export function MTableToolbar(props) {
                 return (
                   <li key={col.tableData.id}>
                     <MenuItem
-                      className={classes.formControlLabel}
+                      sx={styles.formControlLabel}
                       component="label"
                       htmlFor={`column-toggle-${col.tableData.id}`}
                       disabled={col.removable === false}
@@ -259,13 +257,13 @@ export function MTableToolbar(props) {
 
   function renderActions() {
     return (
-      <div className={classes.actions}>
+      <Box sx={styles.actions}>
         <div>
           {props.selectedRows && props.selectedRows.length > 0
             ? renderSelectedActions()
             : renderDefaultActions()}
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -287,7 +285,7 @@ export function MTableToolbar(props) {
         title
       );
 
-    return <div className={classes.title}>{toolBarTitle}</div>;
+    return <Box sx={styles.title}>{toolBarTitle}</Box>;
   }
 
   function render() {
@@ -308,17 +306,19 @@ export function MTableToolbar(props) {
     return (
       <Toolbar
         ref={props.forwardedRef}
-        className={classNames(classes.root, {
-          [classes.highlight]:
-            props.showTextRowsSelected &&
-            props.selectedRows &&
-            props.selectedRows.length > 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()}
-        <div className={classes.spacer} />
+        <Box sx={styles.spacer} />
         {props.searchFieldAlignment === 'right' && renderSearch()}
         {props.toolbarButtonAlignment === 'right' && renderActions()}
       </Toolbar>
@@ -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
@@ -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 (
-    <MaterialTable
-      classes={classes}
-      theme={theme}
-      {...props}
-      ref={props.tableRef}
-    />
-  );
+  return <MaterialTable theme={theme} {...props} ref={props.tableRef} />;
 }
 
 export {