From af37eead5b61f16ae0f8186d4e2a2a35b5feb652 Mon Sep 17 00:00:00 2001
From: Codar <20407539+Codar97@users.noreply.github.com>
Date: Mon, 19 Aug 2019 00:40:02 +0100
Subject: [PATCH] Sub rows are selected if the parent row is selected. (#1444)
* Sub rows are selected if the parent row is selected.
* Parent rows are updated accordingly if a subRow is selected.
* Updated useRowSelect snapshot tests to test subRow selection.
---
.../__snapshots__/useRowSelect.test.js.snap | 400 ++++++++++++++++--
src/plugin-hooks/tests/useRowSelect.test.js | 45 +-
src/plugin-hooks/useRowSelect.js | 26 +-
3 files changed, 420 insertions(+), 51 deletions(-)
diff --git a/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap b/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
index 721aea5..20eb419 100644
--- a/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
+++ b/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders a table with seletable rows 1`] = `
+exports[`renders a table with selectable rows 1`] = `
Snapshot Diff:
- First value
+ Second value
@@ -57,7 +57,227 @@ Snapshot Diff:
|
-@@ -314,15 +314,20 @@
+@@ -333,11 +333,11 @@
+ |
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -389,11 +389,11 @@
+ |
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -426,15 +426,22 @@
+ |
+
+
+
+
+- Selected Rows: 0
++ Selected Rows: 6
+
+
+
+ {
+- "selectedRows": []
++ "selectedRows": [
++ "0",
++ "1",
++ "2",
++ "2.0",
++ "2.1",
++ "3"
++ ]
+ }
+
+
+
+`;
+
+exports[`renders a table with selectable rows 2`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -109,11 +109,11 @@
+
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -165,11 +165,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -221,11 +221,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -277,11 +277,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -333,11 +333,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -389,11 +389,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -426,22 +426,15 @@
+ |
+
+
+
+
+- Selected Rows: 6
++ Selected Rows: 0
+
+
+
+ {
+- "selectedRows": [
+- "0",
+- "1",
+- "2",
+- "2.0",
+- "2.1",
+- "3"
+- ]
++ "selectedRows": []
+ }
+
+
+
+`;
+
+exports[`renders a table with selectable rows 3`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -109,11 +109,11 @@
+
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -221,11 +221,11 @@
+ |
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -277,11 +277,11 @@
+ |
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -333,11 +333,11 @@
+ |
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -426,15 +426,20 @@
|
@@ -72,9 +292,9 @@ Snapshot Diff:
- "selectedRows": []
+ "selectedRows": [
+ "0",
-+ "1",
+ "2",
-+ "3"
++ "2.0",
++ "2.1"
+ ]
}
@@ -82,37 +302,11 @@ Snapshot Diff:
`;
-exports[`renders a table with seletable rows 2`] = `
+exports[`renders a table with selectable rows 4`] = `
Snapshot Diff:
- First value
+ Second value
-@@ -109,11 +109,11 @@
-
-
-
-- Selected
-+ Not Selected
-
- |
-
-@@ -165,11 +165,11 @@
- |
-
-
-- Selected
-+ Not Selected
-
- |
-
@@ -221,11 +221,11 @@
|
-@@ -314,20 +314,15 @@
+@@ -333,11 +333,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -426,20 +426,17 @@
|
- Selected Rows: 4
-+ Selected Rows: 0
++ Selected Rows: 1
{
-- "selectedRows": [
+ "selectedRows": [
- "0",
-- "1",
- "2",
-- "3"
-- ]
-+ "selectedRows": []
+- "2.0",
+- "2.1"
++ "0"
+ ]
}
`;
-exports[`renders a table with seletable rows 3`] = `
+exports[`renders a table with selectable rows 5`] = `
Snapshot Diff:
- First value
+ Second value
-@@ -109,11 +109,11 @@
+@@ -277,11 +277,11 @@
+@@ -426,17 +426,18 @@
+ |
+
+
+
+
+- Selected Rows: 1
++ Selected Rows: 2
+
+
+
+ {
+ "selectedRows": [
+- "0"
++ "0",
++ "2.0"
+ ]
+ }
+
+
+
+`;
+
+exports[`renders a table with selectable rows 6`] = `
+Snapshot Diff:
+- First value
++ Second value
+
@@ -221,11 +221,11 @@
-@@ -314,15 +314,18 @@
+@@ -333,11 +333,11 @@
+ |
+
+
+- Not Selected
++ Selected
+
+ |
+
+@@ -426,18 +426,20 @@
|
-- Selected Rows: 0
-+ Selected Rows: 2
+- Selected Rows: 2
++ Selected Rows: 4
{
-- "selectedRows": []
-+ "selectedRows": [
-+ "0",
+ "selectedRows": [
+ "0",
+- "2.0"
++ "2.0",
++ "2.1",
+ "2"
-+ ]
+ ]
+ }
+
+
+
+`;
+
+exports[`renders a table with selectable rows 7`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -221,11 +221,11 @@
+
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -333,11 +333,11 @@
+ |
+
+
+- Selected
++ Not Selected
+
+ |
+
+@@ -426,20 +426,18 @@
+ |
+
+
+
+
+- Selected Rows: 4
++ Selected Rows: 2
+
+
+
+ {
+ "selectedRows": [
+ "0",
+- "2.0",
+- "2.1",
+- "2"
++ "2.0"
+ ]
}
diff --git a/src/plugin-hooks/tests/useRowSelect.test.js b/src/plugin-hooks/tests/useRowSelect.test.js
index 4e8ce39..d4e8de0 100644
--- a/src/plugin-hooks/tests/useRowSelect.test.js
+++ b/src/plugin-hooks/tests/useRowSelect.test.js
@@ -2,6 +2,7 @@ import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
import { useRowSelect } from '../useRowSelect'
+import { useExpanded } from '../useExpanded'
const data = [
{
@@ -27,6 +28,25 @@ const data = [
visits: 20,
status: 'Complicated',
progress: 10,
+ expanded: true,
+ subRows: [
+ {
+ firstName: 'bob',
+ lastName: 'ross',
+ age: 52,
+ visits: 40,
+ status: 'In Relationship',
+ progress: 30,
+ },
+ {
+ firstName: 'john',
+ lastName: 'smith',
+ age: 21,
+ visits: 30,
+ status: 'Single',
+ progress: 60,
+ },
+ ],
},
{
firstName: 'jaylen',
@@ -51,7 +71,8 @@ function Table({ columns, data }) {
columns,
data,
},
- useRowSelect
+ useRowSelect,
+ useExpanded
)
// Render the UI for your table
@@ -164,7 +185,7 @@ function App() {
return
}
-test('renders a table with seletable rows', () => {
+test('renders a table with selectable rows', () => {
const { getByLabelText, getAllByLabelText, asFragment } = render()
const fragment1 = asFragment()
@@ -182,7 +203,27 @@ test('renders a table with seletable rows', () => {
const fragment4 = asFragment()
+ fireEvent.click(getAllByLabelText('Select Row')[2])
+
+ const fragment5 = asFragment()
+
+ fireEvent.click(getAllByLabelText('Select Row')[3])
+
+ const fragment6 = asFragment()
+ fireEvent.click(getAllByLabelText('Select Row')[4])
+
+ const fragment7 = asFragment()
+
+ fireEvent.click(getAllByLabelText('Select Row')[4])
+
+ const fragment8 = asFragment()
+
+
expect(fragment1).toMatchDiffSnapshot(fragment2)
expect(fragment2).toMatchDiffSnapshot(fragment3)
expect(fragment3).toMatchDiffSnapshot(fragment4)
+ expect(fragment4).toMatchDiffSnapshot(fragment5)
+ expect(fragment5).toMatchDiffSnapshot(fragment6)
+ expect(fragment6).toMatchDiffSnapshot(fragment7)
+ expect(fragment7).toMatchDiffSnapshot(fragment8)
})
diff --git a/src/plugin-hooks/useRowSelect.js b/src/plugin-hooks/useRowSelect.js
index 5b6cf8e..17757a0 100644
--- a/src/plugin-hooks/useRowSelect.js
+++ b/src/plugin-hooks/useRowSelect.js
@@ -50,6 +50,20 @@ function useMain(instance) {
}, actions.toggleRowSelectedAll)
}
+ const updateParentRow = (selectedRows, path) => {
+ const parentPath = path.slice(0, path.length - 1)
+ const parentKey = parentPath.join(".")
+ const selected = rowPaths.filter(path =>
+ path !== parentKey && path.startsWith(parentKey) && !selectedRows.has(path)
+ ).length === 0
+ if (selected) {
+ selectedRows.add(parentKey)
+ } else {
+ selectedRows.delete(parentKey)
+ }
+ if (parentPath.length > 1) updateParentRow(selectedRows, parentPath)
+ }
+
const toggleRowSelected = (path, set) => {
const key = path.join('.')
@@ -62,13 +76,21 @@ function useMain(instance) {
let newSelectedRows = new Set(selectedRows)
if (!exists && shouldExist) {
- newSelectedRows.add(key)
+ rowPaths.forEach((rowPath) => {
+ if (rowPath.startsWith(key)) newSelectedRows.add(rowPath)
+ })
} else if (exists && !shouldExist) {
- newSelectedRows.delete(key)
+ rowPaths.forEach((rowPath) => {
+ if (rowPath.startsWith(key)) newSelectedRows.delete(rowPath)
+ })
} else {
return old
}
+ // If the row is a subRow update
+ // its parent row to reflect changes
+ if (path.length > 1) updateParentRow(newSelectedRows, path)
+
return {
...old,
selectedRows: [...newSelectedRows.values()],