fix: selection with tree data

material-table-core · Jan 13, 2023 · 5590bad · 5590bad
1 parent 37ce2c4
commit 5590bad
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 88 deletions.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -1154,25 +1154,30 @@ const TREE_COLUMNS = [
   }
 ];
 export function TreeData() {
-  const [path, setPath] = useState();
-  const myTableRef = useRef(null);
+  const words = ['Paper', 'Rock', 'Scissors'];
+
+  const rawData = [];
+  for (let i = 0; i < 10; i++) {
+    rawData.push({ id: i, word: words[i % words.length] });
+  }
+
+  const columns = [
+    { title: 'Id', field: 'id' },
+    { title: 'Word', field: 'word' }
+  ];
   return (
-    <React.Fragment>
-      <MaterialTable
-        tableRef={myTableRef}
-        data={TREE_DATA}
-        columns={TREE_COLUMNS}
-        parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
-        onRowClick={(e, rowData) => {
-          setPath(rowData.tableData.path);
-          myTableRef.current.onTreeExpandChanged(
-            rowData.tableData.path,
-            rowData
-          );
-        }}
-      />
-      <pre>{JSON.stringify(path)}</pre>
-    </React.Fragment>
+    <MaterialTable
+      parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
+      data={[
+        ...rawData,
+        { id: 11, word: 'test', parentId: 0 },
+        { id: 12, word: 'test', parentId: 1 }
+      ]}
+      columns={columns}
+      options={{
+        selection: true
+      }}
+    />
   );
 }
 

diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -62,7 +62,6 @@ root.render(
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={createTheme()}>
         <h1>DetailPanelRemounting</h1>
-        <DetailPanelRemounting />
         {/* <h1>Switcher</h1>
     <DataSwitcher />
 
@@ -91,74 +90,8 @@ root.render(
    <h1>Custom Export </h1>
    <CustomExport />
    */}
-        <h1>Bulk Edit</h1>
-        <BulkEdit />
-        <h1>Default Order Issue</h1>
-        <DefaultOrderIssue />
-        <h1>Bulk Edit With Detail Panel</h1>
-        <BulkEditWithDetailPanel />
-        <h1>Hiding Columns</h1>
-        <HidingColumns />
-        <h1>TestingNewActionHandlersProp</h1>
-        <TestingNewActionHandlersProp />
-        <h1>Editable Rows</h1>
-        <EditableRow />
-        <h1>One Detail Panel</h1>
-        <OneDetailPanel />
-        <h1>Multiple Detail Panels</h1>
-        <MultipleDetailPanels />
-        <h1>Editable</h1>
-        <EditableCells />
-        <h1>Frankenstein</h1>
-        <FrankensteinDemo />
-        <h1>Resizable Columns</h1>
-        <Resizable />
-        <h1>Persistent Groupings</h1>
-        <PersistentGroupings persistentGroupingsId="persistence-id" />
-        <h1>Persistent Groupings Same ID</h1>
-        <PersistentGroupings persistentGroupingsId="persistence-id" />
-        <h1>Persistent Groupings unshared</h1>
-        <PersistentGroupings persistentGroupingsId="some-other-id" />
         <h1>Tree data</h1>
         <TreeData />
-        <h1>Table with Summary Row</h1>
-        <TableWithSummary />
-        <h1>
-          Table with custom numbers of pages around current page in stepped
-          navigation
-        </h1>
-        <TableWithNumberOfPagesAround />
-        <h1>Fixed Column with Row Edits</h1>
-        <FixedColumnWithEdit />
-        <h1>Remote Data Related</h1>
-        <ol>
-          <li>
-            <h3>
-              mbrn{' '}
-              <a href="https://github.com/mbrn/material-table/issues/1353">
-                #1353
-              </a>
-            </h3>
-            <I1353 />
-          </li>
-          <li>
-            <h3>
-              mbrn{' '}
-              <a href="https://github.com/mbrn/material-table/issues/1941">
-                #1941
-              </a>
-            </h3>
-            <I1941 />
-          </li>
-          <li>
-            <h3>
-              <a href="https://github.com/material-table-core/core/issues/122">
-                #122
-              </a>
-            </h3>
-            <I122 />
-          </li>
-        </ol>
       </ThemeProvider>
     </StyledEngineProvider>
   </StrictMode>

diff --git a/__tests__/selection.test.js b/__tests__/selection.test.js
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { screen, render, fireEvent } from '@testing-library/react';
+import {
+  screen,
+  render,
+  fireEvent,
+  within,
+  waitFor
+} from '@testing-library/react';
 import MaterialTable from '../src';
 import '@testing-library/jest-dom';
 
@@ -53,4 +59,130 @@ describe('Selection tests', () => {
       })
     ).toBeNull();
   });
+  test('Parent Child Selection', async () => {
+    const words = ['Paper', 'Rock', 'Scissors'];
+
+    const rawData = [];
+    for (let i = 0; i < 5; i++) {
+      rawData.push({ id: i, word: words[i % words.length] });
+    }
+
+    const columns = [
+      { title: 'Id', field: 'id' },
+      { title: 'Word', field: 'word' }
+    ];
+    render(
+      <MaterialTable
+        parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
+        data={[
+          ...rawData,
+          { id: 11, word: 'test', parentId: 0 },
+          { id: 12, word: 'test', parentId: 1 }
+        ]}
+        columns={columns}
+        options={{
+          selection: true
+        }}
+      />
+    );
+    expect(screen.getAllByRole('checkbox')).toHaveLength(6);
+    screen
+      .getAllByRole('checkbox')
+      .forEach((box) => expect(box).not.toBeChecked());
+    const [all, first, second, third, fourth, fifth] = screen.getAllByRole(
+      'checkbox'
+    );
+
+    fireEvent.click(first);
+    screen.getByRole('heading', {
+      name: /2 row\(s\) selected/i
+    });
+    expect(first).toBeChecked();
+    expect(all).toHaveAttribute('data-indeterminate', 'true');
+    const row = screen.getByRole('row', {
+      name: /0 paper/i
+    });
+
+    const firstToggle = within(row).getByRole('button', {
+      name: /detail panel visibility toggle/i
+    });
+    expect(
+      screen.queryByRole('cell', {
+        name: /11/i
+      })
+    ).toBeNull;
+
+    fireEvent.click(firstToggle);
+
+    screen.getByRole('cell', {
+      name: /11/i
+    });
+    expect(screen.getAllByRole('checkbox')).toHaveLength(7);
+    fireEvent.click(second);
+    screen.getByRole('heading', {
+      name: /4 row\(s\) selected/i
+    });
+    fireEvent.click(third);
+    fireEvent.click(fourth);
+    fireEvent.click(fifth);
+    screen.getByRole('heading', {
+      name: /7 row\(s\) selected/i
+    });
+    expect(screen.getAllByRole('checkbox')[0]).toBeChecked();
+  });
+  test('Parent Child Selection with search', async () => {
+    const words = ['Paper', 'Rock', 'Scissors'];
+
+    const rawData = [];
+    for (let i = 0; i < 5; i++) {
+      rawData.push({ id: i, word: words[i % words.length] });
+    }
+
+    const columns = [
+      { title: 'Id', field: 'id' },
+      { title: 'Word', field: 'word' }
+    ];
+    render(
+      <MaterialTable
+        parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
+        data={[
+          ...rawData,
+          { id: 11, word: 'test', parentId: 0 },
+          { id: 12, word: 'test', parentId: 1 }
+        ]}
+        columns={columns}
+        options={{
+          selection: true
+        }}
+      />
+    );
+    expect(screen.getAllByRole('checkbox')).toHaveLength(6);
+    screen
+      .getAllByRole('checkbox')
+      .forEach((box) => expect(box).not.toBeChecked());
+    const search = screen.getByRole('textbox', {
+      name: /search/i
+    });
+    fireEvent.change(search, { target: { value: '1' } });
+    expect(search.value).toBe('1');
+    await waitFor(() =>
+      expect(screen.getAllByRole('checkbox')).toHaveLength(5)
+    );
+    const [all] = screen.getAllByRole('checkbox');
+    fireEvent.click(all);
+    screen
+      .getAllByRole('checkbox')
+      .forEach((box, i) => (i !== 1 ? expect(box).toBeChecked() : null));
+
+    fireEvent.click(all);
+    screen
+      .getAllByRole('checkbox')
+      .forEach((box) => expect(box).not.toBeChecked());
+
+    const [a, b, third, d, fifth] = screen.getAllByRole('checkbox');
+    fireEvent.click(third);
+    fireEvent.click(fifth);
+    expect(all).not.toBeChecked();
+    screen.logTestingPlaygroundURL();
+  });
 });
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "lint:fix": "npx eslint src/** -c ./.eslintrc --ignore-path ./.eslintignore --fix",
     "prettify": "npx prettier -c ./.prettierrc --write **/*.js",
     "pretest": "npm run build",
-    "test": "npx jest && check-dts **/*.ts",
+    "test": "npx jest selection && check-dts **/*.ts",
     "test:build": "npx jest __tests__/post.build.test.js",
     "prerelease": "npm run t",
     "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major -m 'Release v%s' && npm run git:push:tags",

diff --git a/src/components/MTableHeader/index.js b/src/components/MTableHeader/index.js
@@ -342,6 +342,7 @@ export function MTableHeader({
       { ...props, options },
       props.treeDataMaxLevel
     );
+    console.log(props);
     return (
       <TableCell
         padding="none"

diff --git a/src/material-table.js b/src/material-table.js
@@ -980,7 +980,7 @@ export default class MaterialTable extends React.Component {
           selectedCount={this.state.selectedCount}
           dataCount={
             props.parentChildData
-              ? this.state.treefiedDataLength
+              ? this.dataManager.searchedData.length
               : this.state.columns.some((col) => col.tableData.groupOrder > -1)
               ? this.state.groupedDataLength
               : this.state.data.length