refactor(react-grid-material-ui): get rid of the Paper wrapper (#487)

BREAKING CHANGE: To make Grid for Material UI more flexible we've stopped using the [Paper](https://material-ui-1dab0.firebaseapp.com/demos/paper/) component inside the Grid's layout. It allows placing our Grid to an existing Paper with other components. For example: ```js <Paper> <Button>Products</Button> <Button>Customers</Button> <Button>Sales</Button> <Grid /* ... */ > {/* ... */} </Grid> </Paper> ```
DevExpress · Nov 18, 2017 · 2e40de9 · 2e40de9
1 parent fdfab56
commit 2e40de9
Show file tree

Hide file tree

Showing 55 changed files with 981 additions and 886 deletions.
diff --git a/packages/dx-react-demos/src/demo-viewer/demo-renderer.jsx b/packages/dx-react-demos/src/demo-viewer/demo-renderer.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { themes, demos } from '../demo-registry';
 
 export const DemoRenderer = ({

diff --git a/packages/dx-react-demos/src/material-ui/basic/basic.jsx b/packages/dx-react-demos/src/material-ui/basic/basic.jsx
@@ -5,6 +5,8 @@ import {
   TableHeaderRow,
 } from '@devexpress/dx-react-grid-material-ui';
 
+import Paper from 'material-ui/Paper';
+
 import {
   generateRows,
   globalSalesValues,
@@ -30,13 +32,15 @@ export default class Demo extends React.PureComponent {
     const { rows, columns } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <TableView />
-        <TableHeaderRow />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <TableView />
+          <TableHeaderRow />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/basic/table-cell-template.jsx b/packages/dx-react-demos/src/material-ui/basic/table-cell-template.jsx
@@ -6,7 +6,7 @@ import {
   TableHeaderRow,
 } from '@devexpress/dx-react-grid-material-ui';
 
-import { TableCell } from 'material-ui';
+import { TableCell, Paper } from 'material-ui';
 
 import {
   generateRows,
@@ -68,13 +68,15 @@ export default class Demo extends React.PureComponent {
     const { rows, columns } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <TableView tableCellTemplate={this.tableCellTemplate} />
-        <TableHeaderRow />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <TableView tableCellTemplate={this.tableCellTemplate} />
+          <TableHeaderRow />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/basic/table-row-template.jsx b/packages/dx-react-demos/src/material-ui/basic/table-row-template.jsx
@@ -6,7 +6,7 @@ import {
   TableHeaderRow,
 } from '@devexpress/dx-react-grid-material-ui';
 
-import { TableRow } from 'material-ui';
+import { TableRow, Paper } from 'material-ui';
 
 import {
   generateRows,
@@ -41,13 +41,15 @@ export default class Demo extends React.PureComponent {
     const { rows, columns } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <TableView tableRowTemplate={this.tableRowTemplate} />
-        <TableHeaderRow />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <TableView tableRowTemplate={this.tableRowTemplate} />
+          <TableHeaderRow />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/basic.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/basic.jsx
@@ -39,16 +39,18 @@ export default class Demo extends React.PureComponent {
     return (
       <MUIGrid container>
         <MUIGrid item xs={12} sm={9}>
-          <Grid
-            rows={rows}
-            columns={columns}
-          >
-            <TableView />
-            <TableHeaderRow />
-            <TableColumnVisibility
-              hiddenColumns={hiddenColumns}
-            />
-          </Grid>
+          <Paper>
+            <Grid
+              rows={rows}
+              columns={columns}
+            >
+              <TableView />
+              <TableHeaderRow />
+              <TableColumnVisibility
+                hiddenColumns={hiddenColumns}
+              />
+            </Grid>
+          </Paper>
         </MUIGrid>
         <MUIGrid item xs={12} sm={3}>
           <Paper>

diff --git a/packages/dx-react-demos/src/material-ui/column-reordering/controlled.jsx b/packages/dx-react-demos/src/material-ui/column-reordering/controlled.jsx
@@ -6,7 +6,7 @@ import {
   TableHeaderRow,
   TableColumnReordering,
 } from '@devexpress/dx-react-grid-material-ui';
-
+import Paper from 'material-ui/Paper';
 import {
   generateRows,
 } from '../../demo-data/generator';
@@ -35,18 +35,20 @@ export default class Demo extends React.PureComponent {
     const { rows, columns, columnOrder } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <DragDropContext />
-        <TableView />
-        <TableColumnReordering
-          order={columnOrder}
-          onOrderChange={this.changeColumnOrder}
-        />
-        <TableHeaderRow allowDragging />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <DragDropContext />
+          <TableView />
+          <TableColumnReordering
+            order={columnOrder}
+            onOrderChange={this.changeColumnOrder}
+          />
+          <TableHeaderRow allowDragging />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/column-reordering/uncontrolled.jsx b/packages/dx-react-demos/src/material-ui/column-reordering/uncontrolled.jsx
@@ -6,7 +6,7 @@ import {
   TableHeaderRow,
   TableColumnReordering,
 } from '@devexpress/dx-react-grid-material-ui';
-
+import Paper from 'material-ui/Paper';
 import {
   generateRows,
 } from '../../demo-data/generator';
@@ -29,17 +29,19 @@ export default class Demo extends React.PureComponent {
     const { rows, columns } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <DragDropContext />
-        <TableView />
-        <TableColumnReordering
-          defaultOrder={['city', 'sex', 'car', 'name']}
-        />
-        <TableHeaderRow allowDragging />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <DragDropContext />
+          <TableView />
+          <TableColumnReordering
+            defaultOrder={['city', 'sex', 'car', 'name']}
+          />
+          <TableHeaderRow allowDragging />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/column-resizing/controlled.jsx b/packages/dx-react-demos/src/material-ui/column-resizing/controlled.jsx
@@ -5,7 +5,7 @@ import {
   TableHeaderRow,
   TableColumnResizing,
 } from '@devexpress/dx-react-grid-material-ui';
-
+import Paper from 'material-ui/Paper';
 import {
   generateRows,
 } from '../../demo-data/generator';
@@ -35,17 +35,19 @@ export default class Demo extends React.PureComponent {
     const { rows, columns, columnWidths } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <TableView />
-        <TableColumnResizing
-          columnWidths={columnWidths}
-          onColumnWidthsChange={this.changeColumnWidths}
-        />
-        <TableHeaderRow allowResizing />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <TableView />
+          <TableColumnResizing
+            columnWidths={columnWidths}
+            onColumnWidthsChange={this.changeColumnWidths}
+          />
+          <TableHeaderRow allowResizing />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/column-resizing/uncontrolled.jsx b/packages/dx-react-demos/src/material-ui/column-resizing/uncontrolled.jsx
@@ -5,7 +5,7 @@ import {
   TableHeaderRow,
   TableColumnResizing,
 } from '@devexpress/dx-react-grid-material-ui';
-
+import Paper from 'material-ui/Paper';
 import {
   generateRows,
 } from '../../demo-data/generator';
@@ -31,14 +31,16 @@ export default class Demo extends React.PureComponent {
     const { rows, columns, defaultColumnWidths } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-      >
-        <TableView />
-        <TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
-        <TableHeaderRow allowResizing />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <TableView />
+          <TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
+          <TableHeaderRow allowResizing />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/data-accessors/custom-data-accessors-in-columns.jsx b/packages/dx-react-demos/src/material-ui/data-accessors/custom-data-accessors-in-columns.jsx
@@ -9,7 +9,7 @@ import {
   TableEditRow,
   TableEditColumn,
 } from '@devexpress/dx-react-grid-material-ui';
-
+import Paper from 'material-ui/Paper';
 import {
   generateRows,
   defaultNestedColumnValues,
@@ -91,19 +91,21 @@ export default class Demo extends React.PureComponent {
     const { rows, columns } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-        getRowId={getRowId}
-      >
-        <EditingState
-          onCommitChanges={this.commitChanges}
-        />
-        <TableView />
-        <TableHeaderRow />
-        <TableEditRow />
-        <TableEditColumn allowAdding allowEditing allowDeleting />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+          getRowId={getRowId}
+        >
+          <EditingState
+            onCommitChanges={this.commitChanges}
+          />
+          <TableView />
+          <TableHeaderRow />
+          <TableEditRow />
+          <TableEditColumn allowAdding allowEditing allowDeleting />
+        </Grid>
+      </Paper>
     );
   }
 }
diff --git a/packages/dx-react-demos/src/material-ui/data-accessors/custom-data-accessors.jsx b/packages/dx-react-demos/src/material-ui/data-accessors/custom-data-accessors.jsx
@@ -9,7 +9,7 @@ import {
   TableEditRow,
   TableEditColumn,
 } from '@devexpress/dx-react-grid-material-ui';
-
+import Paper from 'material-ui/Paper';
 import {
   generateRows,
   defaultNestedColumnValues,
@@ -89,21 +89,23 @@ export default class Demo extends React.PureComponent {
     const { rows, columns } = this.state;
 
     return (
-      <Grid
-        rows={rows}
-        columns={columns}
-        getRowId={getRowId}
-        getCellValue={getCellValue}
-      >
-        <EditingState
-          createRowChange={createRowChange}
-          onCommitChanges={this.commitChanges}
-        />
-        <TableView />
-        <TableHeaderRow />
-        <TableEditRow />
-        <TableEditColumn allowAdding allowEditing allowDeleting />
-      </Grid>
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+          getRowId={getRowId}
+          getCellValue={getCellValue}
+        >
+          <EditingState
+            createRowChange={createRowChange}
+            onCommitChanges={this.commitChanges}
+          />
+          <TableView />
+          <TableHeaderRow />
+          <TableEditRow />
+          <TableEditColumn allowAdding allowEditing allowDeleting />
+        </Grid>
+      </Paper>
     );
   }
 }