fix(react-grid-material-ui): update MUI (#1430)

Fixes #1413
DevExpress · Sep 26, 2018 · c6ef66c · c6ef66c
1 parent fd386f5
commit c6ef66c
Show file tree

Hide file tree

Showing 20 changed files with 102 additions and 77 deletions.
diff --git a/packages/dx-react-chart-demos/package.json b/packages/dx-react-chart-demos/package.json
@@ -28,7 +28,7 @@
     "@devexpress/dx-react-chart": "1.8.0-beta.1",
     "@devexpress/dx-react-chart-bootstrap4": "1.8.0-beta.1",
     "@devexpress/dx-react-chart-material-ui": "1.8.0-beta.1",
-    "@material-ui/core": "^3.0.1",
+    "@material-ui/core": "^3.1.1",
     "@material-ui/icons": "^3.0.1",
     "@types/react": "^16.4.11",
     "@types/react-dom": "^16.0.7",

diff --git a/packages/dx-react-chart-material-ui/package.json b/packages/dx-react-chart-material-ui/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@devexpress/dx-react-core": "1.8.0-beta.1",
     "@devexpress/dx-testing": "1.8.0-beta.1",
-    "@material-ui/core": "^3.0.1",
+    "@material-ui/core": "^3.1.1",
     "@material-ui/icons": "^3.0.1",
     "babel-core": "^6.26.3",
     "babel-jest": "^23.4.2",

diff --git a/packages/dx-react-grid-demos/package.json b/packages/dx-react-grid-demos/package.json
@@ -33,7 +33,7 @@
     "@devexpress/dx-react-grid-bootstrap3": "1.8.0-beta.1",
     "@devexpress/dx-react-grid-bootstrap4": "1.8.0-beta.1",
     "@devexpress/dx-react-grid-material-ui": "1.8.0-beta.1",
-    "@material-ui/core": "^3.0.1",
+    "@material-ui/core": "^3.1.1",
     "@material-ui/icons": "^3.0.1",
     "@types/react": "^16.4.11",
     "@types/react-dom": "^16.0.7",

diff --git a/packages/dx-react-grid-material-ui/package.json b/packages/dx-react-grid-material-ui/package.json
@@ -47,7 +47,7 @@
     "@devexpress/dx-react-core": "1.8.0-beta.1",
     "@devexpress/dx-react-grid": "1.8.0-beta.1",
     "@devexpress/dx-testing": "1.8.0-beta.1",
-    "@material-ui/core": "^3.0.1",
+    "@material-ui/core": "^3.1.1",
     "@material-ui/icons": "^3.0.1",
     "babel-core": "^6.26.3",
     "babel-jest": "^23.4.2",

diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.jsx
@@ -3,15 +3,24 @@ import * as PropTypes from 'prop-types';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Checkbox from '@material-ui/core/Checkbox';
+import { withStyles } from '@material-ui/core/styles';
 
-export const Item = ({
+const styles = ({
+  checkbox: {
+    padding: 0,
+  },
+});
+
+const ItemBase = ({
   item: { column, hidden },
   disabled, onToggle,
+  classes,
   ...restProps
 }) => (
   <ListItem
     key={column.name}
     button={!disabled}
+    component="li"
     disabled={disabled}
     onClick={!disabled ? onToggle : null}
     {...restProps}
@@ -21,13 +30,13 @@ export const Item = ({
       tabIndex={-1}
       disableRipple
       disabled={disabled}
-      style={{ width: 'auto', height: 'auto' }}
+      className={classes.checkbox}
     />
     <ListItemText primary={column.title || column.name} />
   </ListItem>
 );
 
-Item.propTypes = {
+ItemBase.propTypes = {
   item: PropTypes.shape({
     column: PropTypes.shape({
       name: PropTypes.string,
@@ -36,9 +45,12 @@ Item.propTypes = {
   }).isRequired,
   disabled: PropTypes.bool,
   onToggle: PropTypes.func,
+  classes: PropTypes.object.isRequired,
 };
 
-Item.defaultProps = {
+ItemBase.defaultProps = {
   onToggle: () => { },
   disabled: false,
 };
+
+export const Item = withStyles(styles, { name: 'Item' })(ItemBase);
diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.test.jsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Checkbox from '@material-ui/core/Checkbox';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { Item } from './item';
 
 const defaultProps = {
@@ -13,13 +13,23 @@ const defaultProps = {
 };
 
 describe('Item', () => {
+  it('should use the "li" tag as an item element', () => {
+    const { component } = mount((
+      <Item
+        {...defaultProps}
+      />
+    )).find(ListItem).props();
+
+    expect(component)
+      .toBe('li');
+  });
+
   it('should set item checkbox value depending on the "hidden" property', () => {
-    const tree = shallow((
+    const tree = mount((
       <Item
         {...defaultProps}
       />
     ));
-
     expect(tree.find(Checkbox).prop('checked'))
       .toBe(true);
 
@@ -31,7 +41,7 @@ describe('Item', () => {
 
   it('should call the "onToggle" on the list item "onClick" event', () => {
     const toggleHandler = jest.fn();
-    const tree = shallow((
+    const tree = mount((
       <Item
         onToggle={toggleHandler}
         {...defaultProps}
@@ -63,7 +73,7 @@ describe('Item', () => {
   });
 
   it('should pass rest props to the root element', () => {
-    const tree = shallow((
+    const tree = mount((
       <Item
         {...defaultProps}
         data={{ a: 1 }}
@@ -75,7 +85,7 @@ describe('Item', () => {
   });
 
   it('should process the disabled prop', () => {
-    const tree = shallow((
+    const tree = mount((
       <Item
         {...defaultProps}
         disabled

diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.jsx
@@ -8,24 +8,16 @@ import { withStyles } from '@material-ui/core/styles';
 const styles = theme => ({
   pageSizeSelector: {
     ...theme.typography.caption,
-    float: 'right',
     paddingRight: theme.spacing.unit * 5,
   },
   label: {
     paddingRight: theme.spacing.unit * 3,
-    lineHeight: `${theme.spacing.unit * 5}px`,
-    float: 'left',
-  },
-  pageSizes: {
-    display: 'inline-block',
   },
   pageSizeTitle: {
     width: 'auto',
     marginRight: theme.spacing.unit / 2,
   },
   inputRoot: {
-    paddingTop: theme.spacing.unit * 0.75,
-    float: 'right',
     fontSize: theme.spacing.unit * 1.75,
     textAlign: 'right',
   },

diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.jsx
@@ -9,7 +9,10 @@ const styles = theme => ({
   pager: {
     overflow: 'hidden',
     padding: theme.spacing.unit * 1.5,
+    display: 'flex',
     flex: 'none',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
   },
 });
 
@@ -30,14 +33,6 @@ const PagerBase = ({
     className={classNames(classes.pager, className)}
     {...restProps}
   >
-    <Pagination
-      totalPages={totalPages}
-      totalCount={totalCount}
-      currentPage={currentPage}
-      onCurrentPageChange={page => onCurrentPageChange(page)}
-      pageSize={pageSize}
-      getMessage={getMessage}
-    />
     {!!pageSizes.length && (
     <PageSizeSelector
       pageSize={pageSize}
@@ -46,6 +41,14 @@ const PagerBase = ({
       getMessage={getMessage}
     />
     )}
+    <Pagination
+      totalPages={totalPages}
+      totalCount={totalCount}
+      currentPage={currentPage}
+      onCurrentPageChange={page => onCurrentPageChange(page)}
+      pageSize={pageSize}
+      getMessage={getMessage}
+    />
   </div>
 );
 

diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx
@@ -10,27 +10,21 @@ import { firstRowOnPage, lastRowOnPage, calculateStartPage } from '@devexpress/d
 
 const styles = theme => ({
   pagination: {
-    float: 'right',
     margin: 0,
   },
   rowsLabel: {
     ...theme.typography.caption,
     paddingRight: theme.spacing.unit * 5,
-    lineHeight: `${theme.spacing.unit * 5}px`,
   },
   button: {
     minWidth: theme.spacing.unit * 2,
-    height: theme.spacing.unit * 5,
   },
   activeButton: {
     fontWeight: 'bold',
     cursor: 'default',
   },
   arrowButton: {
-    width: theme.spacing.unit * 4,
-    height: theme.spacing.unit * 4,
     display: 'inline-block',
-    verticalAlign: 'middle',
     transform: theme.direction === 'rtl' ? 'rotate(180deg)' : null,
   },
   prev: {

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx
@@ -19,8 +19,7 @@ const styles = theme => ({
   toggleCellButton: {
     verticalAlign: 'middle',
     display: 'inline-block',
-    height: theme.spacing.unit * 5,
-    width: theme.spacing.unit * 5,
+    padding: theme.spacing.unit,
   },
 });