This closes mbrn#26, DetailPanel feature added

JJeurissen · Dec 29, 2018 · a65ac00 · a65ac00
1 parent 83de146
commit a65ac00
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 38 deletions.
diff --git a/docz/examples/02-example-column-types.mdx b/docz/examples/02-example-column-types.mdx
@@ -41,7 +41,6 @@ import MaterialTable from '../../src/material-table'
     ]}
     title="Currency"
     options={{
-      toolbar: false,
       paging: false
     }}
   />
@@ -63,7 +62,6 @@ import MaterialTable from '../../src/material-table'
     ]}
     title="Currency"
     options={{
-      toolbar: false,
       paging: false
     }}
   />

diff --git a/docz/examples/11-example-detail-panel.mdx b/docz/examples/11-example-detail-panel.mdx
@@ -0,0 +1,36 @@
+---
+name: Detail Panel Examples
+order: 11
+menu: Examples
+---
+
+import Playground from '../utils/Playground'
+import MaterialTable from '../../src/material-table'
+
+## Detail Panel Examples
+
+<Playground>
+  <MaterialTable
+    columns={[
+      {title: 'Name', field: 'name'},
+      {title: 'Surname', field: 'surname'},
+      {title: 'Birth Year', field: 'birthYear', type: 'numeric'},
+      {title: 'Birth Place', field: 'birthCity', lookup: {34: 'İstanbul', 63: 'Şanlıurfa'}},      
+    ]}
+    data={[
+      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+    ]}
+    title="Detail Panel Example"
+    detailPanel={rowData => {
+      return (
+        <iframe width="100%" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      )
+    }}
+  />
+</Playground>
+
+
+
+
diff --git a/docz/examples/11-example-others.mdx → docz/examples/12-example-others.mdx b/docz/examples/11-example-others.mdx → docz/examples/12-example-others.mdx
@@ -1,13 +1,13 @@
 ---
 name: Other Examples
-order: 11
+order: 12
 menu: Examples
 ---
 
 import Playground from '../utils/Playground'
 import MaterialTable from '../../src/material-table'
 
-## Other Examples Example
+## Other Examples
 
 <Playground>
   <MaterialTable
@@ -20,16 +20,11 @@ import MaterialTable from '../../src/material-table'
     data={[ ]}
     title="Empty DataSource Example"
     options={{
-      toolbar: false,
       paging: true,      
       showEmptyDataSourceMessage:true
     }}
      localization={{
        emptyDataSourceMessage:'No records to display'
     }}
   />
-</Playground>
-
-
-
-
+</Playground>
diff --git a/docz/props.mdx b/docz/props.mdx
@@ -13,6 +13,7 @@ import MaterialTable from '../src/material-table'
 | columns             | Array  |                   | Column definitions                                                |
 | components          | object |                   | Component customization                                           |
 | data                | Array  |                   | Data to be rendered                                               |
+| detailPanel         | func   |                   | Component to be rendered on detail panel                          |
 | icons               | object |                   | Icons customization                                               |
 | localization        | object |                   | All text for localization                                         |
 | onChangePage        | func   |                   | To handle page changes (page)                                     |
@@ -75,6 +76,7 @@ import MaterialTable from '../src/material-table'
 | Field           | Type          | Default                         | Description           |
 |:----------------|:--------------|:--------------------------------|:----------------------|
 | Check           | React.Element | material icons 'check'          | Check icon            |
+| DetailPanel     | React.Element | material icons 'chevron_right'  | DetailPanel icon      |
 | Export          | React.Element | material icons 'save_alt'       | Export icon           |
 | Filter          | React.Element | material icons 'filter_list'    | Filter icon           |
 | FirstPage       | React.Element | material icons 'first_page'     | FirstPage icon        |

diff --git a/index.d.ts b/index.d.ts
@@ -4,9 +4,10 @@ import { IconProps } from '@material-ui/core/Icon';
 export interface MaterialTableProps {
   actions?: (Action | ((rowData:any) => Action)) [];
   columns: Column[];
-  components?: Components;
-  icons?: Icons,
+  components?: Components;  
   data: object;
+  detailPanel: (rowData: any) => React.ComponentType<any>;
+  icons?: Icons,
   title: string;
   options?: Options;
   localization?: Localization;
@@ -54,6 +55,7 @@ export interface Components {
 
 export interface Icons {
   Check: React.ReactElement<any>;
+  DetailPanel: React.ReactElement<any>;
   Export: React.ReactElement<any>;
   Filter: React.ReactElement<any>;
   FirstPage: React.ReactElement<any>;

diff --git a/package.json b/package.json
@@ -49,7 +49,8 @@
     "babel-eslint": "10.0.1",
     "babel-loader": "^8.0.4",
     "buble": "0.19.3",
-    "docz": "0.13.5",
+    "docz": "0.13.7",
+    "docz-theme-default": "^0.13.7",
     "eslint": "5.7.0",
     "eslint-config-defaults": "9.0.0",
     "eslint-config-standard": "12.0.0",
@@ -60,10 +61,10 @@
     "eslint-plugin-standard": "4.0.0",
     "husky": "^1.2.0",
     "react-hot-loader": "^4.3.12",
+    "typescript": "^3.2.2",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10",
-    "typescript": "^3.2.2"
+    "webpack-dev-server": "^3.1.10"
   },
   "peerDependencies": {
     "react": "^16.5.2",

diff --git a/src/demo.js b/src/demo.js
@@ -3,30 +3,59 @@ import ReactDOM from 'react-dom';
 import MaterialTable from './material-table';
 
 class App extends Component {
+  state = {
+    data: [
+      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63, tableData: { checked: true } },
+      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+    ],
+    selecteds: [],
+    counter: 0
+  }
+
   render() {
     return (
       <div style={{ maxWidth: '100%' }}>
         <MaterialTable
           columns={[
-            { title: 'Adı', field: 'name', filtering: false, render: () => <div>merhaba</div> },
-            { title: 'Soyadı', field: 'surname', filtering: false },
+            { title: 'Adı', field: 'name' },
+            { title: 'Soyadı', field: 'surname' },
             { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
-            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, filtering: false }
-          ]}
-          data={[
-            { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
-            { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
-            { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
           ]}
+          data={this.state.data}
           title="Demo Title"
+          onSelectionChange={(data) => {
+            this.setState({selecteds: data});
+          }}
           options={{
             emptyRowsWhenPaging: false,
             exportButton: true,
             pageSize: 100,
             pageSizeOptions: [100, 150, 200],            
             filtering: true,
+            selection: true
           }}
+          detailPanel={rowData => (
+            <div style={{textAlign: 'center'}}>
+              {rowData.name}
+              <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
+            </div>
+          )}
+          actions={[
+            {
+              icon: 'save',
+              onClick: (event, data) => {
+                this.setState({counter: 0});
+              }
+            }
+          ]}
         />
+        {this.state.selecteds.length}
+        <br/>
+        Counter is {this.state.counter}
+        <br/>
+        <button onClick={() => this.setState({counter: this.state.counter + 1})}>++</button>
       </div>
     );
   }

diff --git a/src/m-table-body-row.js b/src/m-table-body-row.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { Checkbox, TableCell, TableRow } from '@material-ui/core';
+import { Checkbox, TableCell, TableRow, IconButton, Collapse } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 /* eslint-enable no-unused-vars */
@@ -11,9 +11,9 @@ export default class MTableBodyRow extends React.Component {
       .map((columnDef) => {
         const value = this.props.getFieldValue(this.props.data, columnDef);
         return (
-          <this.props.components.Cell 
+          <this.props.components.Cell
             icons={this.props.icons}
-            columnDef={columnDef} 
+            columnDef={columnDef}
             value={value}
             key={columnDef.tableData.id}
             rowData={this.props.data} />
@@ -33,7 +33,7 @@ export default class MTableBodyRow extends React.Component {
   }
   renderSelectionColumn() {
     return (
-      <TableCell padding="checkbox" key="key-selection-column">
+      <TableCell padding="none" key="key-selection-column">
         <Checkbox
           checked={this.props.data.tableData.checked === true}
           value={`${this.props.data.tableData.id}`}
@@ -42,6 +42,22 @@ export default class MTableBodyRow extends React.Component {
       </TableCell>
     );
   }
+
+  renderDetailPanelColumn() {
+    return (
+      <TableCell padding="none" key="key-detail-panel-column" style={{width: 48, textAlign: 'center'}}>
+        <IconButton
+          onClick={() => this.props.onToggleDetailPanel(this.props.data)} 
+          style={{            
+            transition: 'all ease 200ms', 
+            transform: this.props.data.tableData.showDetailPanel ? 'rotate(90deg)' : 'none'}}
+        >
+          <this.props.icons.DetailPanel />
+        </IconButton>
+      </TableCell>
+    );
+  }
+
   render() {
     const columns = this.renderColumns();
     if (this.props.options.selection) {
@@ -59,10 +75,25 @@ export default class MTableBodyRow extends React.Component {
         columns.splice(this.props.options.actionsColumnIndex + endPos, 0, this.renderActions());
       }
     }
+
+    // Lastly we add detail panel icon
+    if (this.props.detailPanel) {
+      columns.splice(0, 0, this.renderDetailPanelColumn());
+    }
+
     return (
-      <TableRow selected={this.props.index % 2 === 0}>
-        {columns}
-      </TableRow>
+      <>
+        <TableRow selected={this.props.index % 2 === 0}>
+          {columns}
+        </TableRow>
+        {this.props.data.tableData.showDetailPanel &&
+          <TableRow selected={this.props.index % 2 === 0}>
+            <TableCell colSpan={columns.length} padding="none">
+              {this.props.detailPanel(this.props.data)}          
+            </TableCell>
+          </TableRow>
+        }
+      </>
     );
   }
 }
@@ -79,8 +110,10 @@ MTableBodyRow.propTypes = {
   icons: PropTypes.any.isRequired,
   index: PropTypes.number.isRequired,
   data: PropTypes.object.isRequired,
+  detailPanel: PropTypes.bool.isRequired,
   options: PropTypes.object.isRequired,
   onRowSelected: PropTypes.func,
   getFieldValue: PropTypes.func.isRequired,
   columns: PropTypes.array,
+  onToggleDetailPanel: PropTypes.func.isRequired
 };
diff --git a/src/m-table-body.js b/src/m-table-body.js
@@ -51,6 +51,7 @@ class MTableBody extends React.Component {
             selection={this.props.options.selection}
             onFilterSelectionChanged={this.props.onFilterSelectionChanged}
             localization={{ ...MTableBody.defaultProps.localization.filterRow, ...this.props.localization.filterRow }}
+            detailPanel={this.props.detailPanel}
           />
         }
         {
@@ -67,6 +68,8 @@ class MTableBody extends React.Component {
                 actions={this.props.actions}
                 columns={this.props.columns}
                 getFieldValue={this.props.getFieldValue}
+                detailPanel={this.props.detailPanel}
+                onToggleDetailPanel={this.props.onToggleDetailPanel}
               />
             );
           })
@@ -94,6 +97,7 @@ MTableBody.propTypes = {
   components: PropTypes.object.isRequired,
   columns: PropTypes.array.isRequired,
   currentPage: PropTypes.number,
+  detailPanel: PropTypes.bool.isRequired,
   getFieldValue: PropTypes.func.isRequired,
   icons: PropTypes.object.isRequired,
   onRowSelected: PropTypes.func,
@@ -103,7 +107,8 @@ MTableBody.propTypes = {
   selection: PropTypes.bool.isRequired,
   onFilterSelectionChanged: PropTypes.func.isRequired,
   localization: PropTypes.object,
-  onFilterChanged: PropTypes.func
+  onFilterChanged: PropTypes.func,
+  onToggleDetailPanel: PropTypes.func.isRequired
 };
 
 export default MTableBody;
diff --git a/src/m-table-filter-row.js b/src/m-table-filter-row.js
@@ -153,7 +153,7 @@ class MTableFilterRow extends React.Component {
 
     if (this.props.selection) {
       columns.splice(0, 0, (
-        <TableCell style={{ padding: '0 12px' }}>
+        <TableCell padding="none" key="key-selection-column">
           <Checkbox onChange={this.props.onFilterSelectionChanged} />
         </TableCell>)
       );
@@ -170,6 +170,10 @@ class MTableFilterRow extends React.Component {
       }
     }
 
+    if(this.props.detailPanel) {
+      columns.splice(0, 0, <TableCell padding="none" key="key-detail-panel-column"/>);
+    }
+
     return (
       <TableRow style={{ height: 10 }}>
         {columns}
@@ -191,6 +195,7 @@ MTableFilterRow.defaultProps = {
 MTableFilterRow.propTypes = {
   emptyCell: PropTypes.bool,
   columns: PropTypes.array.isRequired,
+  detailPanel: PropTypes.bool.isRequired,
   onFilterChanged: PropTypes.func.isRequired,
   selection: PropTypes.bool.isRequired,
   onFilterSelectionChanged: PropTypes.func.isRequired,

diff --git a/src/m-table-header.js b/src/m-table-header.js
@@ -43,7 +43,7 @@ class MTableHeader extends React.Component {
   }
   renderSelectionHeader() {
     return (
-      <TableCell padding="checkbox" key="key-selection-column">
+      <TableCell padding="none" key="key-selection-column">
         <Checkbox
           indeterminate={this.props.selectedCount > 0 && this.props.selectedCount < this.props.dataCount}
           checked={this.props.selectedCount === this.props.dataCount}
@@ -70,6 +70,10 @@ class MTableHeader extends React.Component {
       }
     }
 
+    if(this.props.detailPanel) {
+      headers.splice(0, 0, <TableCell padding="none" key="key-detail-panel-column"/>);
+    }
+
     return (
       <TableHead>
         <TableRow>
@@ -96,6 +100,7 @@ MTableHeader.defaultProps = {
 MTableHeader.propTypes = {
   columns: PropTypes.array.isRequired,
   dataCount: PropTypes.number,
+  detailPanel: PropTypes.bool.isRequired,
   hasSelection: PropTypes.bool,
   localization: PropTypes.object,
   selectedCount: PropTypes.number,