fix: issue when programmatically hiding a shown detail panel #282

material-table-core · Jul 29, 2021 · 4696507 · 4696507
1 parent 14f6721
commit 4696507
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 11 deletions.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -94,6 +94,49 @@ const global_cols = [
   }
 ];
 
+const rando = (max) => Math.floor(Math.random() * max);
+
+const words = ['Paper', 'Rock', 'Scissors'];
+
+const rawData = [];
+for (let i = 0; i < 100; i++) {
+  rawData.push({ id: rando(300), word: words[i % words.length] });
+}
+
+const columns = [
+  { title: 'Id', field: 'id' },
+  { title: 'Word', field: 'word' }
+];
+
+export const DetailPanelIssuesProgrammaticallyHidingWhenOpen = () => {
+  const [data, setData] = useState(rawData);
+  const [isPanelVisible, setIsPanelVisible] = useState(true);
+
+  const components = {
+    Row: (props) => <MTableBodyRow {...props} />
+  };
+
+  return (
+    <>
+      <button onClick={() => setIsPanelVisible((prevState) => !prevState)}>
+        Toggle details panel visibility
+      </button>
+      <MaterialTable
+        data={data}
+        columns={columns}
+        components={components}
+        title="Starter Template"
+        detailPanel={
+          // rowData => {
+          //   return isPanelVisible ? <div>Details Panel</div> : null
+          // }
+          isPanelVisible ? [{ render: () => <div>Details panel</div> }] : null
+        }
+      />
+    </>
+  );
+};
+
 export function BulkEdit() {
   const [data, setData] = useState([
     { name: 'joe', id: 1, age: 0, x: 'y', id: 0 },

diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -36,7 +36,8 @@ import {
   HidingColumns,
   Resizable,
   EditableRowDateColumnIssue,
-  DataSwitcher
+  DataSwitcher,
+  DetailPanelIssuesProgrammaticallyHidingWhenOpen
 } from './demo-components';
 import { I1353, I1941, I122 } from './demo-components/RemoteData';
 
@@ -47,6 +48,9 @@ render(
     <h1>Switcher</h1>
     <DataSwitcher />
 
+    <h1>DetailPanelIssuesProgrammaticallyHidingWhenOpen</h1>
+    <DetailPanelIssuesProgrammaticallyHidingWhenOpen />
+
     <h1>Basic</h1>
     <Basic />
 

diff --git a/esbuild.config.js b/esbuild.config.js
@@ -38,6 +38,7 @@ rimraf(path.resolve(__dirname, BUILD_DIR), async (error) => {
     minify: true,
     bundle: false,
     outdir: `${BUILD_DIR}`,
+    format: 'cjs',
     loader: {
       '.js': 'jsx'
     }

diff --git a/src/components/m-table-detailpanel.js b/src/components/m-table-detailpanel.js
@@ -5,6 +5,7 @@ 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
@@ -15,18 +16,25 @@ function MTableDetailPanel(props) {
   }, [props.data.tableData.showDetailPanel]);
 
   let renderFunction;
-  if (typeof props.detailPanel === 'function') {
-    renderFunction = props.detailPanel;
+
+  // See issue #282 for more on why we have to check for the existence of
+  if (!props.detailPanel) {
+    return <React.Fragment />;
   } else {
-    renderFunction = props.detailPanel
-      ? props.detailPanel.find(
-          (panel) =>
-            panel.render.toString() ===
-            (props.data.tableData.showDetailPanel || '').toString()
-        )
-      : undefined;
-    renderFunction = renderFunction ? renderFunction.render : null;
+    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;