refactor :adapt to mui beta

material-table-core · Jul 1, 2021 · 7ff8464 · 7ff8464
1 parent 5fda984
commit 7ff8464
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 199 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@material-ui/core": "^4.11.2",
+    "@material-ui/core": "^5.0.0-beta.0",
     "@types/jest": "^26.0.20",
     "@webpack-cli/serve": "^1.2.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
@@ -101,21 +101,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
+    "@date-io/core": "^1.3.13",
     "@date-io/date-fns": "^1.3.13",
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@material-ui/lab": "^5.0.0-alpha.39",
+    "@material-ui/styles": "^5.0.0-beta.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.0",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.7.2",
     "react-beautiful-dnd": "^13.0.0",
-    "react-double-scrollbar": "0.0.15",
-    "@date-io/core": "^1.3.13",
-    "@material-ui/core": "^5.0.0-alpha.36",
-    "@material-ui/styles": "^5.0.0-alpha.35",
-    "@material-ui/lab": "^5.0.0-alpha.36",
-    "@emotion/core": "^11.0.0",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0"
+    "react-double-scrollbar": "0.0.15"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

diff --git a/src/components/MTableHeader/index.js b/src/components/MTableHeader/index.js
@@ -6,11 +6,12 @@ import TableCell from '@material-ui/core/TableCell';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import { Draggable } from 'react-beautiful-dnd';
-import { Tooltip } from '@material-ui/core';
-import { withStyles } from '@material-ui/styles';
+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 classes = useStyles();
   const [
     { resizingColumnDef, lastX, lastAdditionalWidth }, // Extract the props to use instead of the whole state object
     setState
@@ -69,7 +70,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       <TableCell
         key="key-actions-column"
         padding="checkbox"
-        className={props.classes.header}
+        className={classes.header}
         style={{
           ...props.headerStyle,
           width: width,
@@ -236,7 +237,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
           <TableCell
             key={columnDef.tableData.id}
             align={cellAlignment}
-            className={props.classes.header}
+            className={classes.header}
             style={getCellStyle(columnDef)}
             size={size}
           >
@@ -256,7 +257,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       <TableCell
         padding="none"
         key="key-selection-column"
-        className={props.classes.header}
+        className={classes.header}
         style={{ ...props.headerStyle, width: selectionWidth }}
       >
         {props.showSelectAllCheckbox && (
@@ -282,7 +283,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       <TableCell
         padding="none"
         key="key-detail-panel-column"
-        className={props.classes.header}
+        className={classes.header}
         style={{ ...props.headerStyle }}
       />
     );
@@ -322,7 +323,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
         <TableCell
           padding="none"
           key={'key-tree-data-header'}
-          className={props.classes.header}
+          className={classes.header}
           style={{ ...props.headerStyle }}
         />
       );
@@ -336,7 +337,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
           <TableCell
             padding="checkbox"
             key={'key-group-header' + columnDef.tableData.id}
-            className={props.classes.header}
+            className={classes.header}
           />
         );
       });
@@ -391,18 +392,19 @@ MTableHeader.propTypes = {
   tooltip: PropTypes.string
 };
 
-export const styles = (theme) => ({
+export const useStyles = makeStyles((theme) => ({
   header: {
     // display: 'inline-block',
     position: 'sticky',
     top: 0,
     zIndex: 10,
     backgroundColor: theme.palette.background.paper // Change according to theme,
   }
-});
+}));
 
 const MTableHeaderRef = React.forwardRef(function MTableHeaderRef(props, ref) {
-  return <MTableHeader {...props} forwardedRef={ref} />;
+  const theme = useTheme();
+  return <MTableHeader theme={theme} {...props} forwardedRef={ref} />;
 });
 
-export default withStyles(styles, { withTheme: true })(MTableHeaderRef);
+export default MTableHeaderRef;
diff --git a/src/components/MTablePagination/index.js b/src/components/MTablePagination/index.js
@@ -1,13 +1,16 @@
 /* eslint-disable no-unused-vars */
 import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/styles';
+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';
 /* eslint-enable no-unused-vars */
 
 function MTablePagination(props) {
+  const classes = useStyles();
+  const theme = useTheme();
   const handleFirstPageButtonClick = (event) => {
     props.onPageChange(event, 0);
   };
@@ -28,14 +31,7 @@ function MTablePagination(props) {
   };
 
   function render() {
-    const {
-      classes,
-      count,
-      page,
-      rowsPerPage,
-      theme,
-      showFirstLastPageButtons
-    } = props;
+    const { count, page, rowsPerPage, showFirstLastPageButtons } = props;
 
     const localization = {
       ...MTablePagination.defaultProps.localization,
@@ -135,14 +131,14 @@ function MTablePagination(props) {
   return render();
 }
 
-const actionsStyles = (theme) => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
     display: 'flex'
     // lineHeight: '48px'
   }
-});
+}));
 
 MTablePagination.propTypes = {
   onChangePage: PropTypes.func,
@@ -178,8 +174,6 @@ const MTableGroupRowRef = React.forwardRef(function MTablePaginationRef(
   return <MTablePagination {...props} forwardedRef={ref} />;
 });
 
-const MTablePaginationOuter = withStyles(actionsStyles, { withTheme: true })(
-  MTableGroupRowRef
-);
+const MTablePaginationOuter = MTableGroupRowRef;
 
 export default MTablePaginationOuter;
diff --git a/src/components/MTableSteppedPaginationInner/index.js b/src/components/MTableSteppedPaginationInner/index.js
@@ -1,12 +1,15 @@
 import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/styles';
+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';
 import PropTypes from 'prop-types';
 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);
   };
@@ -58,14 +61,7 @@ function MTablePaginationInner(props) {
   }
 
   function render() {
-    const {
-      classes,
-      count,
-      page,
-      rowsPerPage,
-      theme,
-      showFirstLastPageButtons
-    } = props;
+    const { count, page, rowsPerPage, showFirstLastPageButtons } = props;
 
     const localization = {
       ...MTablePaginationInner.defaultProps.localization,
@@ -143,13 +139,13 @@ function MTablePaginationInner(props) {
   return render();
 }
 
-const actionsStyles = (theme) => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
     marginLeft: theme.spacing(2.5)
   }
-});
+}));
 
 MTablePaginationInner.propTypes = {
   onPageChange: PropTypes.func,
@@ -183,8 +179,6 @@ const MTableSteppedPaginationRef = React.forwardRef(
   }
 );
 
-const MTableSteppedPagination = withStyles(actionsStyles, { withTheme: true })(
-  MTableSteppedPaginationRef
-);
+const MTableSteppedPagination = MTableSteppedPaginationRef;
 
 export default MTableSteppedPagination;
diff --git a/src/components/MTableSummaryRow/index.js b/src/components/MTableSummaryRow/index.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { TableRow, TableCell } from '@material-ui/core';
-import { withStyles } from '@material-ui/styles';
 import { getStyle } from '../MTableCell/utils';
 import * as CommonValues from '../../utils/common-values';
 import PropTypes from 'prop-types';
@@ -113,6 +112,4 @@ MTableSummaryRow.propTypes = {
   renderSummaryRow: PropTypes.func
 };
 
-export const styles = (theme) => ({});
-
-export default withStyles(styles)(MTableSummaryRow);
+export default MTableSummaryRow;
diff --git a/src/components/MTableToolbar/index.js b/src/components/MTableToolbar/index.js
@@ -8,12 +8,13 @@ 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 { withStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 export function MTableToolbar(props) {
+  const classes = useStyles();
   const [state, setState] = React.useState(() => ({
     columnsButtonAnchorEl: null,
     exportButtonAnchorEl: null,
@@ -70,7 +71,7 @@ export function MTableToolbar(props) {
           className={
             props.searchFieldAlignment === 'left' && props.showTitle === false
               ? null
-              : props.classes.searchField
+              : classes.searchField
           }
           value={state.searchText}
           onChange={(event) => onSearchChange(event.target.value)}
@@ -115,7 +116,6 @@ export function MTableToolbar(props) {
       ...MTableToolbar.defaultProps.localization,
       ...props.localization
     };
-    const { classes } = props;
 
     return (
       <div style={{ display: 'flex' }}>
@@ -258,8 +258,6 @@ export function MTableToolbar(props) {
   }
 
   function renderActions() {
-    const { classes } = props;
-
     return (
       <div className={classes.actions}>
         <div>
@@ -272,7 +270,6 @@ export function MTableToolbar(props) {
   }
 
   function renderToolbarTitle(title) {
-    const { classes } = props;
     const toolBarTitle =
       // eslint-disable-next-line multiline-ternary
       typeof title === 'string' ? (
@@ -294,7 +291,6 @@ export function MTableToolbar(props) {
   }
 
   function render() {
-    const { classes } = props;
     const localization = {
       ...MTableToolbar.defaultProps.localization,
       ...props.localization
@@ -390,11 +386,10 @@ MTableToolbar.propTypes = {
       handler: PropTypes.func
     })
   ),
-  classes: PropTypes.object,
   searchAutoFocus: PropTypes.bool
 };
 
-export const styles = (theme) => ({
+export const useStyles = makeStyles((theme) => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(2)
@@ -426,7 +421,7 @@ export const styles = (theme) => ({
     paddingLeft: theme.spacing(1),
     paddingRight: theme.spacing(1)
   }
-});
+}));
 
 const MTableToolbarRef = React.forwardRef(function MTableToolbarRef(
   props,
@@ -435,4 +430,4 @@ const MTableToolbarRef = React.forwardRef(function MTableToolbarRef(
   return <MTableToolbar {...props} forwardedRef={ref} />;
 });
 
-export default withStyles(styles)(MTableToolbarRef);
+export default MTableToolbarRef;
diff --git a/src/components/Overlay/OverlayError.js b/src/components/Overlay/OverlayError.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from '@material-ui/core';
 
 function OverlayError(props) {
+  const theme = useTheme();
   return (
     <div
       ref={props.forwardedRef}
       style={{
         display: 'table',
         width: '100%',
         height: '100%',
-        backgroundColor: props.theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
         opacity: 0.7
       }}
     >

diff --git a/src/components/Overlay/OverlayLoading.js b/src/components/Overlay/OverlayLoading.js
@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress, useTheme } from '@material-ui/core';
 
 function OverlayLoading(props) {
+  const theme = useTheme();
   return (
     <div
       ref={props.forwardedRef}
       style={{
         display: 'table',
         width: '100%',
         height: '100%',
-        backgroundColor: props.theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
         opacity: 0.7
       }}
     >