From 14a9248595c159d3da728af022256aace3027cd1 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 30 Nov 2019 23:19:45 -0700 Subject: [PATCH] Fix row selection when used with grouping --- .size-snapshot.json | 12 +-- examples/pagination-controlled/src/App.js | 1 - src/plugin-hooks/useGroupBy.js | 19 +++- src/plugin-hooks/useRowSelect.js | 109 ++++++++-------------- 4 files changed, 60 insertions(+), 81 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 83bb56e..1bfd6d1 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,13 +1,13 @@ { "dist/index.js": { - "bundled": 90080, - "minified": 43077, - "gzipped": 11412 + "bundled": 90278, + "minified": 43057, + "gzipped": 11502 }, "dist/index.es.js": { - "bundled": 89497, - "minified": 42569, - "gzipped": 11292, + "bundled": 89695, + "minified": 42549, + "gzipped": 11382, "treeshaked": { "rollup": { "code": 450, diff --git a/examples/pagination-controlled/src/App.js b/examples/pagination-controlled/src/App.js index c05e33b..d8016fc 100644 --- a/examples/pagination-controlled/src/App.js +++ b/examples/pagination-controlled/src/App.js @@ -82,7 +82,6 @@ function Table({ // Listen for changes in pagination and use the state to fetch our new data React.useEffect(() => { - console.log(pageIndex) fetchData({ pageIndex, pageSize }) }, [fetchData, pageIndex, pageSize]) diff --git a/src/plugin-hooks/useGroupBy.js b/src/plugin-hooks/useGroupBy.js index 69b2506..de39cb1 100755 --- a/src/plugin-hooks/useGroupBy.js +++ b/src/plugin-hooks/useGroupBy.js @@ -50,6 +50,7 @@ function useMain(instance) { const { debug, rows, + flatRows, flatColumns, flatHeaders, groupByFn = defaultGroupByFn, @@ -152,9 +153,9 @@ function useMain(instance) { return row }) - const groupedRows = React.useMemo(() => { + const [groupedRows, groupedFlatRows] = React.useMemo(() => { if (manualGroupBy || !groupBy.length) { - return rows + return [rows, flatRows] } if (process.env.NODE_ENV === 'development' && debug) @@ -209,10 +210,16 @@ function useMain(instance) { return values } + let groupedFlatRows = [] + // Recursively group the data const groupRecursively = (rows, depth = 0, parentPath = []) => { // This is the last level, just return the rows if (depth >= groupBy.length) { + rows.forEach(row => { + row.path = [...parentPath, ...row.path] + }) + groupedFlatRows = groupedFlatRows.concat(rows) return rows } @@ -244,6 +251,8 @@ function useMain(instance) { path, } + groupedFlatRows.push(row) + return row } ) @@ -251,13 +260,16 @@ function useMain(instance) { return groupedRows } + const groupedRows = groupRecursively(rows) + // Assign the new data - return groupRecursively(rows) + return [groupedRows, groupedFlatRows] }, [ manualGroupBy, groupBy, debug, rows, + flatRows, flatColumns, userAggregations, groupByFn, @@ -267,6 +279,7 @@ function useMain(instance) { ...instance, toggleGroupBy, rows: groupedRows, + flatRows: groupedFlatRows, preGroupedRows: rows, } } diff --git a/src/plugin-hooks/useRowSelect.js b/src/plugin-hooks/useRowSelect.js index 20496c1..cc607d4 100644 --- a/src/plugin-hooks/useRowSelect.js +++ b/src/plugin-hooks/useRowSelect.js @@ -29,15 +29,10 @@ function useRows(rows, instance) { instance.selectedFlatRows = React.useMemo(() => { const selectedFlatRows = [] + rows.forEach(row => { - if (row.isAggregated) { - const subRowPaths = row.subRows.map(row => row.path) - row.isSelected = subRowPaths.every(path => - selectedRowPaths.includes(path.join('.')) - ) - } else { - row.isSelected = selectedRowPaths.includes(row.path.join('.')) - } + row.isSelected = getRowIsSelected(row, selectedRowPaths) + if (row.isSelected) { selectedFlatRows.push(row) } @@ -193,74 +188,36 @@ function useMain(instance) { } hooks.prepareRow.push(row => { - // Aggregate rows have entirely different select logic - if (row.isAggregated) { - const subRowPaths = row.subRows.map(row => row.path) - row.toggleRowSelected = set => { - set = typeof set !== 'undefined' ? set : !row.isSelected - subRowPaths.forEach(path => { - toggleRowSelected(path, set) - }) + row.toggleRowSelected = set => toggleRowSelected(row.path, set) + row.getToggleRowSelectedProps = props => { + let checked = false + + if (row.original && row.original[manualRowSelectedKey]) { + checked = true + } else { + checked = row.isSelected } - row.getToggleRowSelectedProps = props => { - let checked = false - if (row.original && row.original[manualRowSelectedKey]) { - checked = true - } else { - checked = row.isSelected - } - - return mergeProps( - { - onChange: e => { - row.toggleRowSelected(e.target.checked) - }, - style: { - cursor: 'pointer', - }, - checked, - title: 'Toggle Row Selected', + return mergeProps( + { + onChange: e => { + row.toggleRowSelected(e.target.checked) }, - applyPropHooks( - instanceRef.current.hooks.getToggleRowSelectedProps, - row, - instanceRef.current - ), - props - ) - } - } else { - row.toggleRowSelected = set => toggleRowSelected(row.path, set) - row.getToggleRowSelectedProps = props => { - let checked = false - - if (row.original && row.original[manualRowSelectedKey]) { - checked = true - } else { - checked = row.isSelected - } - - return mergeProps( - { - onChange: e => { - row.toggleRowSelected(e.target.checked) - }, - style: { - cursor: 'pointer', - }, - checked, - title: 'Toggle Row Selected', + style: { + cursor: 'pointer', }, - applyPropHooks( - instanceRef.current.hooks.getToggleRowSelectedProps, - row, - instanceRef.current - ), - props - ) - } + checked, + title: 'Toggle Row Selected', + }, + applyPropHooks( + instanceRef.current.hooks.getToggleRowSelectedProps, + row, + instanceRef.current + ), + props + ) } + // } return row }) @@ -273,3 +230,13 @@ function useMain(instance) { isAllRowsSelected, } } + +function getRowIsSelected(row, selectedRowPaths) { + if (row.isAggregated) { + return row.subRows.every(subRow => + getRowIsSelected(subRow, selectedRowPaths) + ) + } + + return selectedRowPaths.includes(row.path.join('.')) +}