Merge branch 'feature/mui5' of https://github.com/villuv/material-table…

… into villuv-feature/mui5
material-table-core · Jun 5, 2021 · 1a6d73e · 1a6d73e
2 parents cf635b1 + a403d08
commit 1a6d73e
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 51 deletions.
diff --git a/__tests__/demo/demo.original.js b/__tests__/demo/demo.original.js
@@ -1,12 +1,14 @@
-import { Grid, MuiThemeProvider, Button } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core';
+import { Grid, ThemeProvider } from '@material-ui/core';
+import { createTheme } from '@material-ui/core/styles';
+import React, { Component } from 'react';
+import MaterialTable from '../src';
 
 let direction = 'ltr';
 // direction = 'rtl';
-const theme = createMuiTheme({
+const theme = createTheme({
   direction: direction,
   palette: {
-    type: 'light'
+    mode: 'light'
   }
 });
 
@@ -483,7 +485,7 @@ class App extends Component {
   render() {
     return (
       <>
-        <MuiThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
           <div style={{ maxWidth: '100%', direction }}>
             <Grid container>
               <Grid item xs={12}>
@@ -678,7 +680,7 @@ class App extends Component {
               // />
             }
           </div>
-        </MuiThemeProvider>
+        </ThemeProvider>
       </>
     );
   }

diff --git a/package.json b/package.json
@@ -113,7 +113,12 @@
   },
   "peerDependencies": {
     "@date-io/core": "^1.3.13",
-    "@material-ui/core": "^4.11.2",
+    "@material-ui/core": "^5.0.0-alpha.35",
+    "@material-ui/styles": "^5.0.0-alpha.35",
+    "@material-ui/lab": "^5.0.0-alpha.35",
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   }

diff --git a/src/components/MTableSteppedPaginationInner/index.js b/src/components/MTableSteppedPaginationInner/index.js
@@ -1,33 +1,30 @@
-/* eslint-disable no-unused-vars */
 import IconButton from '@material-ui/core/IconButton';
 import { withStyles } from '@material-ui/core';
 import Tooltip from '@material-ui/core/Tooltip';
-import Hidden from '@material-ui/core/Hidden';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
 import React from 'react';
-/* eslint-enable no-unused-vars */
 
 function MTablePaginationInner(props) {
   const handleFirstPageButtonClick = (event) => {
-    props.onChangePage(event, 0);
+    this.props.onPageChange(event, 0);
   };
 
   const handleBackButtonClick = (event) => {
-    props.onChangePage(event, props.page - 1);
+    this.props.onPageChange(event, this.props.page - 1);
   };
 
   const handleNextButtonClick = (event) => {
-    props.onChangePage(event, props.page + 1);
+    this.props.onPageChange(event, this.props.page + 1);
   };
 
   const handleNumberButtonClick = (number) => (event) => {
-    props.onChangePage(event, number);
+    this.props.onPageChange(event, number);
   };
 
   const handleLastPageButtonClick = (event) => {
-    props.onChangePage(
-      event,
+    this.props.onPageChange(
       Math.max(0, Math.ceil(props.count / props.rowsPerPage) - 1)
     );
   };
@@ -109,7 +106,9 @@ function MTablePaginationInner(props) {
             </IconButton>
           </span>
         </Tooltip>
-        <Hidden smDown={true}>{renderPagesButton(pageStart, pageEnd)}</Hidden>
+        <Box sx={{ display: { xs: 'false', sm: 'false', md: 'block' } }}>
+          {renderPagesButton(pageStart, pageEnd)}
+        </Box>
         <Tooltip title={localization.nextTooltip}>
           <span>
             <IconButton
@@ -153,7 +152,7 @@ const actionsStyles = (theme) => ({
 });
 
 MTablePaginationInner.propTypes = {
-  onChangePage: PropTypes.func,
+  onPageChange: PropTypes.func,
   page: PropTypes.number,
   count: PropTypes.number,
   rowsPerPage: PropTypes.number,

diff --git a/src/components/m-table-body.js b/src/components/m-table-body.js
@@ -4,7 +4,7 @@ import { TableBody, TableCell, TableRow } from '@material-ui/core';
 
 class MTableBody extends React.Component {
   renderEmpty(emptyRowCount, renderData) {
-    const rowHeight = this.props.options.padding === 'default' ? 49 : 36;
+    const rowHeight = this.props.options.padding === 'normal' ? 49 : 36;
     const localization = {
       ...MTableBody.defaultProps.localization,
       ...this.props.localization

diff --git a/src/components/m-table-edit-field.js b/src/components/m-table-edit-field.js
@@ -9,11 +9,11 @@ import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import DateFnsUtils from '@date-io/date-fns';
 import {
-  MuiPickersUtilsProvider,
+  LocalizationProvider,
   TimePicker,
   DatePicker,
   DateTimePicker
-} from '@material-ui/pickers';
+} from '@material-ui/lab';
 import PropTypes from 'prop-types';
 
 class MTableEditField extends React.Component {
@@ -92,9 +92,13 @@ class MTableEditField extends React.Component {
         ? this.props.columnDef.dateSetting.format
         : 'dd.MM.yyyy';
     return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={this.props.locale}>
+      <LocalizationProvider
+        dateAdapter={DateFnsUtils}
+        locale={this.props.locale}
+      >
         <DatePicker
           {...this.getProps()}
+          renderInput={(props) => <TextField {...props} />}
           format={dateFormat}
           value={this.props.value || null}
           onChange={this.props.onChange}
@@ -108,15 +112,19 @@ class MTableEditField extends React.Component {
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     );
   }
 
   renderTimeField() {
     return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={this.props.locale}>
+      <LocalizationProvider
+        dateAdapter={DateFnsUtils}
+        locale={this.props.locale}
+      >
         <TimePicker
           {...this.getProps()}
+          renderInput={(props) => <TextField {...props} />}
           format="HH:mm:ss"
           value={this.props.value || null}
           onChange={this.props.onChange}
@@ -130,15 +138,19 @@ class MTableEditField extends React.Component {
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     );
   }
 
   renderDateTimeField() {
     return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={this.props.locale}>
+      <LocalizationProvider
+        dateAdapter={DateFnsUtils}
+        locale={this.props.locale}
+      >
         <DateTimePicker
           {...this.getProps()}
+          renderInput={(props) => <TextField {...props} />}
           format="dd.MM.yyyy HH:mm:ss"
           value={this.props.value || null}
           onChange={this.props.onChange}
@@ -152,14 +164,15 @@ class MTableEditField extends React.Component {
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     );
   }
 
   renderTextField() {
     return (
       <TextField
         {...this.getProps()}
+        variant="standard"
         fullWidth
         type={this.props.columnDef.type === 'numeric' ? 'number' : 'text'}
         placeholder={
@@ -181,7 +194,10 @@ class MTableEditField extends React.Component {
         }}
         inputProps={{
           'aria-label': this.props.columnDef.title,
-          style: this.props.columnDef.type === 'numeric' ? { textAlign: 'right' } : {}
+          style:
+            this.props.columnDef.type === 'numeric'
+              ? { textAlign: 'right' }
+              : {}
         }}
       />
     );
@@ -191,6 +207,7 @@ class MTableEditField extends React.Component {
     return (
       <TextField
         {...this.getProps()}
+        variant="standard"
         placeholder={
           this.props.columnDef.editPlaceholder || this.props.columnDef.title
         }

diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { defaultProps } from './defaults';
 import { propTypes } from './prop-types';
 import MaterialTable from './material-table';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
 
 MaterialTable.defaultProps = defaultProps;
 MaterialTable.propTypes = propTypes;

diff --git a/src/material-table.js b/src/material-table.js
@@ -10,8 +10,8 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import DataManager from './utils/data-manager';
 import { debounce } from 'debounce';
 import equal from 'fast-deep-equal/react';
-import { withStyles } from '@material-ui/core';
 import * as CommonValues from './utils/common-values';
+import { withStyles } from '@material-ui/styles';
 
 /* eslint-enable no-unused-vars */
 
@@ -160,7 +160,7 @@ export default class MaterialTable extends React.Component {
       : this.state.pageSize;
 
     if (count <= pageSize * currentPage && currentPage !== 0) {
-      this.onChangePage(null, Math.max(0, Math.ceil(count / pageSize) - 1));
+      this.onPageChange(null, Math.max(0, Math.ceil(count / pageSize) - 1));
     }
   }
 
@@ -370,45 +370,45 @@ export default class MaterialTable extends React.Component {
     }
   };
 
-  onChangePage = (event, page) => {
+  onPageChange = (event, page) => {
     if (this.isRemoteData()) {
       const query = { ...this.state.query };
       query.page = page;
       this.onQueryChange(query, () => {
-        this.props.onChangePage &&
-          this.props.onChangePage(page, query.pageSize);
+        this.props.onPageChange &&
+          this.props.onPageChange(page, query.pageSize);
       });
     } else {
       if (!this.isOutsidePageNumbers(this.props)) {
         this.dataManager.changeCurrentPage(page);
       }
       this.setState(this.dataManager.getRenderState(), () => {
-        this.props.onChangePage &&
-          this.props.onChangePage(page, this.state.pageSize);
+        this.props.onPageChange &&
+          this.props.onPageChange(page, this.state.pageSize);
       });
     }
   };
 
-  onChangeRowsPerPage = (event) => {
+  onRowsPerPageChange = (event) => {
     const pageSize = event.target.value;
 
     this.dataManager.changePageSize(pageSize);
 
-    this.props.onChangePage && this.props.onChangePage(0, pageSize);
+    this.props.onPageChange && this.props.onPageChange(0, pageSize);
 
     if (this.isRemoteData()) {
       const query = { ...this.state.query };
       query.pageSize = event.target.value;
       query.page = 0;
       this.onQueryChange(query, () => {
-        this.props.onChangeRowsPerPage &&
-          this.props.onChangeRowsPerPage(pageSize);
+        this.props.onRowsPerPageChange &&
+          this.props.onRowsPerPageChange(pageSize);
       });
     } else {
       this.dataManager.changeCurrentPage(0);
       this.setState(this.dataManager.getRenderState(), () => {
-        this.props.onChangeRowsPerPage &&
-          this.props.onChangeRowsPerPage(pageSize);
+        this.props.onRowsPerPageChange &&
+          this.props.onRowsPerPageChange(pageSize);
       });
     }
   };
@@ -785,8 +785,8 @@ export default class MaterialTable extends React.Component {
                   )
                 }}
                 page={this.isRemoteData() ? this.state.query.page : currentPage}
-                onChangePage={this.onChangePage}
-                onChangeRowsPerPage={this.onChangeRowsPerPage}
+                onPageChange={this.onPageChange}
+                onRowsPerPageChange={this.onRowsPerPageChange}
                 ActionsComponent={(subProps) =>
                   props.options.paginationType === 'normal' ? (
                     <MTablePagination

diff --git a/src/prop-types.js b/src/prop-types.js
@@ -341,7 +341,7 @@ export const propTypes = {
       'initial',
       'inherit'
     ]),
-    padding: PropTypes.oneOf(['default', 'dense']),
+    padding: PropTypes.oneOf(['normal', 'dense']),
     paging: PropTypes.bool,
     pageSize: PropTypes.number,
     pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
@@ -383,8 +383,8 @@ export const propTypes = {
   onColumnDragged: PropTypes.func,
   onGroupRemoved: PropTypes.func,
   onSelectionChange: PropTypes.func,
-  onChangeRowsPerPage: PropTypes.func,
-  onChangePage: PropTypes.func,
+  onRowsPerPageChange: PropTypes.func,
+  onPageChange: PropTypes.func,
   onChangeColumnHidden: PropTypes.func,
   onOrderChange: PropTypes.func,
   onRowClick: PropTypes.func,

diff --git a/src/utils/common-values.js b/src/utils/common-values.js
@@ -1,5 +1,5 @@
 export const elementSize = (props) =>
-  props.options.padding === 'default' ? 'medium' : 'small';
+  props.options.padding === 'normal' ? 'medium' : 'small';
 export const baseIconSize = (props) =>
   elementSize(props) === 'medium' ? 48 : 32;
 export const rowActions = (props) =>

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -64,8 +64,8 @@ export interface MaterialTableProps<RowData extends object> {
   options?: Options<RowData>;
   parentChildData?: (row: RowData, rows: RowData[]) => RowData | undefined;
   localization?: Localization;
-  onChangeRowsPerPage?: (pageSize: number) => void;
-  onChangePage?: (page: number, pageSize: number) => void;
+  onRowsPerPageChange?: (pageSize: number) => void;
+  onPageChange?: (page: number, pageSize: number) => void;
   onChangeColumnHidden?: (column: Column<RowData>, hidden: boolean) => void;
   onColumnDragged?: (sourceIndex: number, destinationIndex: number) => void;
   onOrderChange?: (orderBy: number, orderDirection: 'asc' | 'desc') => void;
@@ -357,7 +357,7 @@ export interface Options<RowData extends object> {
   loadingType?: 'overlay' | 'linear';
   maxBodyHeight?: number | string;
   minBodyHeight?: number | string;
-  padding?: 'default' | 'dense';
+  padding?: 'normal' | 'dense';
   paging?: boolean;
   grouping?: boolean;
   groupTitle?: (groupData: any) => any;