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.

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:
           <td
             class=""
           >
-@@ -314,15 +314,20 @@
+@@ -333,11 +333,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -389,11 +389,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -426,15 +426,22 @@
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p>
+-     Selected Rows: 0
++     Selected Rows: 6
+    </p>
+    <pre>
+      <code>
+        {
+-   "selectedRows": []
++   "selectedRows": [
++     "0",
++     "1",
++     "2",
++     "2.0",
++     "2.1",
++     "3"
++   ]
+  }
+      </code>
+    </pre>
+  </DocumentFragment>
+`;
+
+exports[`renders a table with selectable rows 2`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -109,11 +109,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -165,11 +165,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -221,11 +221,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -277,11 +277,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -333,11 +333,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -389,11 +389,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -426,22 +426,15 @@
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p>
+-     Selected Rows: 6
++     Selected Rows: 0
+    </p>
+    <pre>
+      <code>
+        {
+-   "selectedRows": [
+-     "0",
+-     "1",
+-     "2",
+-     "2.0",
+-     "2.1",
+-     "3"
+-   ]
++   "selectedRows": []
+  }
+      </code>
+    </pre>
+  </DocumentFragment>
+`;
+
+exports[`renders a table with selectable rows 3`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -109,11 +109,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -221,11 +221,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -277,11 +277,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -333,11 +333,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -426,15 +426,20 @@
           </td>
         </tr>
       </tbody>
@@ -72,9 +292,9 @@ Snapshot Diff:
 -   "selectedRows": []
 +   "selectedRows": [
 +     "0",
-+     "1",
 +     "2",
-+     "3"
++     "2.0",
++     "2.1"
 +   ]
   }
       </code>
@@ -82,37 +302,11 @@ Snapshot Diff:
   </DocumentFragment>
 `;
 
-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 @@
-          </td>
-          <td
-            class=""
-          >
-            <div>
--             Selected
-+             Not Selected
-            </div>
-          </td>
-          <td
-            class=""
-          >
-@@ -165,11 +165,11 @@
-          </td>
-          <td
-            class=""
-          >
-            <div>
--             Selected
-+             Not Selected
-            </div>
-          </td>
-          <td
-            class=""
-          >
 @@ -221,11 +221,11 @@
           </td>
           <td
@@ -139,37 +333,50 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -314,20 +314,15 @@
+@@ -333,11 +333,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -426,20 +426,17 @@
           </td>
         </tr>
       </tbody>
     </table>
     <p>
 -     Selected Rows: 4
-+     Selected Rows: 0
++     Selected Rows: 1
     </p>
     <pre>
       <code>
         {
--   "selectedRows": [
+    "selectedRows": [
 -     "0",
--     "1",
 -     "2",
--     "3"
--   ]
-+   "selectedRows": []
+-     "2.0",
+-     "2.1"
++     "0"
+    ]
   }
       </code>
     </pre>
   </DocumentFragment>
 `;
 
-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 @@
           </td>
           <td
             class=""
@@ -182,6 +389,34 @@ Snapshot Diff:
           <td
             class=""
           >
+@@ -426,17 +426,18 @@
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p>
+-     Selected Rows: 1
++     Selected Rows: 2
+    </p>
+    <pre>
+      <code>
+        {
+    "selectedRows": [
+-     "0"
++     "0",
++     "2.0"
+    ]
+  }
+      </code>
+    </pre>
+  </DocumentFragment>
+`;
+
+exports[`renders a table with selectable rows 6`] = `
+Snapshot Diff:
+- First value
++ Second value
+
 @@ -221,11 +221,11 @@
           </td>
           <td
@@ -195,23 +430,94 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -314,15 +314,18 @@
+@@ -333,11 +333,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Not Selected
++             Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -426,18 +426,20 @@
           </td>
         </tr>
       </tbody>
     </table>
     <p>
--     Selected Rows: 0
-+     Selected Rows: 2
+-     Selected Rows: 2
++     Selected Rows: 4
     </p>
     <pre>
       <code>
         {
--   "selectedRows": []
-+   "selectedRows": [
-+     "0",
+    "selectedRows": [
+      "0",
+-     "2.0"
++     "2.0",
++     "2.1",
 +     "2"
-+   ]
+    ]
+  }
+      </code>
+    </pre>
+  </DocumentFragment>
+`;
+
+exports[`renders a table with selectable rows 7`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -221,11 +221,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -333,11 +333,11 @@
+          </td>
+          <td
+            class=""
+          >
+            <div>
+-             Selected
++             Not Selected
+            </div>
+          </td>
+          <td
+            class=""
+          >
+@@ -426,20 +426,18 @@
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p>
+-     Selected Rows: 4
++     Selected Rows: 2
+    </p>
+    <pre>
+      <code>
+        {
+    "selectedRows": [
+      "0",
+-     "2.0",
+-     "2.1",
+-     "2"
++     "2.0"
+    ]
   }
       </code>
     </pre>

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 <Table columns={columns} data={data} />
 }
 
-test('renders a table with seletable rows', () => {
+test('renders a table with selectable rows', () => {
   const { getByLabelText, getAllByLabelText, asFragment } = render(<App />)
 
   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)
 })

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()],