this closes #509, render flash on isLoading problem resolved

mbrn · May 4, 2019 · eba40b5 · eba40b5
1 parent e8b015f
commit eba40b5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/src/demo.js b/src/demo.js
@@ -25,7 +25,7 @@ class App extends Component {
       { id: 3, name: 'c', surname: 'baran', isMarried: true, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 1 },
       { id: 4, name: 'd', surname: 'baran', isMarried: true, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 3 },
       { id: 5, name: 'e', surname: 'baran', isMarried: false, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35) },
-      { id: 6, name: 'f', surname: 'baran', isMarried: true, birthDate: new Date(1989, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 5 },      
+      { id: 6, name: 'f', surname: 'baran', isMarried: true, birthDate: new Date(1989, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 5 },
     ],
     columns: [
       { title: 'Adı', field: 'name' },
@@ -60,9 +60,8 @@ class App extends Component {
                   data={this.state.data}
                   title="Demo Title"
                   options={{
-                    grouping: true,
-                    defaultExpanded: true
                   }}
+                  isLoading
                 />
               </Grid>
 
@@ -76,20 +75,16 @@ class App extends Component {
           </button>
 
           </div>
-        </MuiThemeProvider>
-        {/* <MuiThemeProvider theme={createMuiTheme({ palette: { primary: { main: '#abc' } } })}>
           <MaterialTable
-            ref={this.tableRef}
-            columns={this.state.columns}
-            data={(query) => new Promise(() => {
-            })}
-            title="Demo Title"
-            options={{
-              selection: true,
-            }}
-            isLoading
-          />
-        </MuiThemeProvider> */}
+          ref={this.tableRef}
+          columns={this.state.columns}
+          data={this.state.data}
+          title="Demo Title"
+          options={{
+          }}
+        />
+        </MuiThemeProvider>
+
       </>
     );
   }

diff --git a/src/material-table.js b/src/material-table.js
@@ -20,6 +20,7 @@ import MTableToolbar from './m-table-toolbar';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import DataManager from './utils/data-manager';
 import { debounce } from 'debounce';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 
 /* eslint-enable no-unused-vars */
 
@@ -549,8 +550,8 @@ class MaterialTable extends React.Component {
           {this.renderFooter()}
 
           {(this.state.isLoading || props.isLoading) && props.options.loadingType === 'overlay' &&
-            <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }}>
-              <div style={{ display: 'table', width: '100%', height: '100%', backgroundColor: '#FFFFFFAA' }}>
+            <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%', zIndex: 11 }}>
+              <div style={{ display: 'table', width: '100%', height: '100%', backgroundColor: fade(props.theme.palette.background.paper, 0.7) }}>
                 <div style={{ display: 'table-cell', width: '100%', height: '100%', verticalAlign: 'middle', textAlign: 'center' }}>
                   <CircularProgress />
                 </div>