Merge branch 'master' into data_id

Author: Domino987

__tests__/demo/demo-components/index.js

@@ -111,7 +111,7 @@ export function BulkEditWithDetailPanel() {
         options={{
           showDetailPanelIcon: false
         }}
-        detailPanel={(rowData) => {
+        detailPanel={({ rowData }) => {
           return (
             <iframe
               width="100%"
@@ -323,7 +323,7 @@ export function OneDetailPanel() {
       title="One Detail Panel Preview"
       columns={global_cols}
       data={global_data}
-      detailPanel={(rowData) => {
+      detailPanel={({ rowData }) => {
         return (
           <div
             style={{
@@ -352,7 +352,7 @@ export function MultipleDetailPanels() {
       detailPanel={[
         {
           tooltip: 'Show Name',
-          render: (rowData) => {
+          render: ({ rowData }) => {
             return (
               <div
                 style={{
@@ -370,7 +370,7 @@ export function MultipleDetailPanels() {
         {
           icon: 'account_circle',
           tooltip: 'Show Surname',
-          render: (rowData) => {
+          render: ({ rowData }) => {
             return (
               <div
                 style={{
@@ -389,7 +389,7 @@ export function MultipleDetailPanels() {
           icon: 'favorite_border',
           openIcon: 'favorite',
           tooltip: 'Show Both',
-          render: (rowData) => {
+          render: ({ rowData }) => {
             return (
               <div
                 style={{

src/components/m-table-body-row.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
 import IconButton from '@material-ui/core/IconButton';
 import Icon from '@material-ui/core/Icon';
 import Tooltip from '@material-ui/core/Tooltip';
-import Collapse from '@material-ui/core/Collapse';
+import TableRow from '@material-ui/core/TableRow';
+import { MTableDetailPanel } from './m-table-detailpanel';
 import PropTypes from 'prop-types';
 import * as CommonValues from '../utils/common-values';
 import { useDoubleClick } from '../utils/hooks/useDoubleClick';
@@ -358,9 +358,7 @@ export default function MTableBodyRow(props) {
   };
 
   const getStyle = (index, level) => {
-    let style = {
-      transition: 'all ease 300ms'
-    };
+    let style = {};
 
     if (typeof props.options.rowStyle === 'function') {
       style = {
@@ -439,7 +437,6 @@ export default function MTableBodyRow(props) {
         />
       );
     });
-
   return (
     <>
       <TableRow
@@ -451,38 +448,13 @@ export default function MTableBodyRow(props) {
       >
         {renderColumns}
       </TableRow>
-        <TableRow
-        // selected={props.index % 2 === 0}
-        >
-          {props.options.detailPanelOffset.left > 0 && (
-            <TableCell colSpan={props.options.detailPanelOffset.left} />
-          )}
-          <TableCell
-            size={size}
-            colSpan={
-              renderColumns.length -
-              props.options.detailPanelOffset.left -
-              props.options.detailPanelOffset.right
-            }
-            padding="none"
-          >
-              {(typeof props.detailPanel === 'function') &&
-                <Collapse in={Boolean(props.data.tableData && props.data.tableData.showDetailPanel)} timeout="auto" unmountOnExit>
-                  {props.detailPanel(props.data)}
-                </Collapse>
-              }
-              {(typeof props.detailPanel === 'object') &&
-                props.detailPanel.map((panel, index) => {
-                  return (
-                    <Collapse key={index} in={Boolean(props.data.tableData && props.data.tableData.showDetailPanel) && (props.data.tableData.showDetailPanel || '').toString() ===
-                    panel.render.toString()} timeout="auto" unmountOnExit>
-                      {panel.render(props.data)}
-                    </Collapse>
-                  )
-                })
-              }
-          </TableCell>
-        </TableRow>
+      <MTableDetailPanel
+        options={props.options}
+        data={props.data}
+        detailPanel={props.detailPanel}
+        renderColumns={renderColumns}
+        size={size}
+      />
       {props.data.tableData.childRows &&
         props.data.tableData.isTreeExpanded &&
         props.data.tableData.childRows.map((data, index) => {

src/components/m-table-detailpanel.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { TableCell, Collapse, TableRow } from '@material-ui/core';
+
+function MTableDetailPanel(props) {
+  const [isOpen, setOpen] = React.useState(false);
+  const [, rerender] = React.useReducer((s) => s + 1, 0);
+  const renderRef = React.useRef();
+  React.useEffect(() => {
+    const shouldOpen = Boolean(
+      props.data.tableData && props.data.tableData.showDetailPanel
+    );
+    setTimeout(() => {
+      setOpen(shouldOpen);
+    }, 5);
+  }, [props.data.tableData.showDetailPanel]);
+
+  let renderFunction;
+  if (typeof props.detailPanel === 'function') {
+    renderFunction = props.detailPanel;
+  } else {
+    renderFunction = props.detailPanel
+      ? props.detailPanel.find(
+          (panel) =>
+            panel.render.toString() ===
+            (props.data.tableData.showDetailPanel || '').toString()
+        )
+      : undefined;
+    renderFunction = renderFunction ? renderFunction.render : null;
+  }
+  React.useEffect(() => {
+    if (renderFunction && isOpen) {
+      renderRef.current = renderFunction;
+    }
+  });
+
+  if (!renderRef.current && !props.data.tableData.showDetailPanel) {
+    return null;
+  }
+  const Render = renderFunction || renderRef.current;
+  return (
+    <TableRow>
+      {props.options.detailPanelOffset.left > 0 && (
+        <TableCell colSpan={props.options.detailPanelOffset.left} />
+      )}
+      <TableCell
+        size={props.size}
+        colSpan={
+          props.renderColumns.length -
+          props.options.detailPanelOffset.left -
+          props.options.detailPanelOffset.right
+        }
+        padding="none"
+      >
+        <Collapse
+          in={isOpen}
+          timeout="auto"
+          unmountOnExit
+          mountOnEnter
+          onExited={() => {
+            renderRef.current = undefined;
+            rerender();
+          }}
+        >
+          <Render rowData={props.data} />
+        </Collapse>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export { MTableDetailPanel };

types/index.d.ts

@@ -25,8 +25,11 @@ export interface MaterialTableProps<RowData extends object> {
   components?: Components;
   data: RowData[] | ((query: Query<RowData>) => Promise<QueryResult<RowData>>);
   detailPanel?:
-    | ((rowData: RowData) => React.ReactNode)
-    | (DetailPanel<RowData> | ((rowData: RowData) => DetailPanel<RowData>))[];
+    | (({ rowData }: { rowData: RowData }) => React.ReactNode)
+    | (
+        | DetailPanel<RowData>
+        | (({ rowData }: { rowData: RowData }) => DetailPanel<RowData>)
+      )[];
   editable?: {
     isEditable?: (rowData: RowData) => boolean;
     isDeletable?: (rowData: RowData) => boolean;
@@ -50,8 +53,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;
@@ -127,7 +130,7 @@ export interface DetailPanel<RowData extends object> {
   icon?: string | React.ComponentType<any>;
   openIcon?: string | React.ComponentType<any>;
   tooltip?: string;
-  render: (rowData: RowData) => string | React.ReactNode;
+  render: ({ rowData }: { rowData: RowData }) => string | React.ReactNode;
 }
 
 export interface Action<RowData extends object> {