From 9de699bfd3a12bc8884ec467f72bf93e29e68ff6 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Mon, 9 Dec 2019 09:52:27 -0700 Subject: [PATCH] Add/rename a few hooks, fix useColumnVisibility header deps - The `columnsBeforeHeaderGroups` and `columnsBeforeHeaderGroupsDeps` hooks have been renamed to `flatColumns` and `flatColumnsDeps` respectively, which better reflects what they are used for, rather than their order, which can remain implicit. - Added `headerGroups` and `headerGroupDeps` hooks, which, similar to `flatColumns`, allow you to decorate (and trigger) the memoized header group generation. - Added `columns` and `columnsDeps` hooks, which, similar to `flatColumns` and `headerGroups`, allow you to decorate (and trigger) the memoized column generation/decoration. - The new hook order is as follows: `columns/columnsDeps` => `flatColumns/flatColumnsDeps` => `headerGroups/headerGroupsDeps` - `useColumnVisibility` now uses the new `headerGroupsDeps` hook to trigger header group regeneration when visibility changes --- .size-snapshot.json | 14 ++-- CHANGELOG.md | 8 ++ src/hooks/useColumnVisibility.js | 2 +- src/hooks/useTable.js | 114 ++++++++++++++++++++--------- src/plugin-hooks/useColumnOrder.js | 6 +- src/plugin-hooks/useGroupBy.js | 6 +- 6 files changed, 103 insertions(+), 47 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 12445f5..427b197 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,20 +1,20 @@ { "dist/index.js": { - "bundled": 103166, - "minified": 48591, - "gzipped": 12715 + "bundled": 103833, + "minified": 48853, + "gzipped": 12789 }, "dist/index.es.js": { - "bundled": 102323, - "minified": 47841, - "gzipped": 12565, + "bundled": 102990, + "minified": 48103, + "gzipped": 12638, "treeshaked": { "rollup": { "code": 80, "import_statements": 21 }, "webpack": { - "code": 8457 + "code": 8444 } } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 4db90a6..596805c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 7.0.0-rc.6 + +- The `columnsBeforeHeaderGroups` and `columnsBeforeHeaderGroupsDeps` hooks have been renamed to `flatColumns` and `flatColumnsDeps` respectively, which better reflects what they are used for, rather than their order, which can remain implicit. +- Added `headerGroups` and `headerGroupDeps` hooks, which, similar to `flatColumns`, allow you to decorate (and trigger) the memoized header group generation. +- Added `columns` and `columnsDeps` hooks, which, similar to `flatColumns` and `headerGroups`, allow you to decorate (and trigger) the memoized column generation/decoration. +- The new hook order is as follows: `columns/columnsDeps` => `flatColumns/flatColumnsDeps` => `headerGroups/headerGroupsDeps` +- `useColumnVisibility` now uses the new `headerGroupsDeps` hook to trigger header group regeneration when visibility changes + ## 7.0.0-rc.5 - Fixed an issue where the exported `useAsyncDebounce` method would crash if its promise throw an error. diff --git a/src/hooks/useColumnVisibility.js b/src/hooks/useColumnVisibility.js index 65de1aa..e9a9651 100644 --- a/src/hooks/useColumnVisibility.js +++ b/src/hooks/useColumnVisibility.js @@ -19,7 +19,7 @@ export const useColumnVisibility = hooks => { hooks.stateReducers.push(reducer) hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions) - hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [ + hooks.headerGroupsDeps.push((deps, instance) => [ ...deps, instance.state.hiddenColumns, ]) diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js index fe0629d..0d55a39 100755 --- a/src/hooks/useTable.js +++ b/src/hooks/useTable.js @@ -49,8 +49,12 @@ export const useTable = (props, ...plugins) => { data, hooks: { stateReducers: [], - columnsBeforeHeaderGroups: [], - columnsBeforeHeaderGroupsDeps: [], + columns: [], + columnsDeps: [], + flatColumns: [], + flatColumnsDeps: [], + headerGroups: [], + headerGroupsDeps: [], useInstanceBeforeDimensions: [], useInstance: [], useRows: [], @@ -117,58 +121,102 @@ export const useTable = (props, ...plugins) => { dispatch, // The resolved table state }) + // Snapshot hook and disallow more from being added + const getColumns = useConsumeHookGetter(instanceRef.current.hooks, 'columns') + + // Snapshot hook and disallow more from being added + const getColumnsDeps = useConsumeHookGetter( + instanceRef.current.hooks, + 'columnsDeps' + ) + // Decorate All the columns let columns = React.useMemo( - () => decorateColumnTree(userColumns, defaultColumn), - [defaultColumn, userColumns] + () => + applyHooks( + getColumns(), + decorateColumnTree(userColumns, defaultColumn), + instanceRef.current + ), + [ + defaultColumn, + getColumns, + userColumns, + // eslint-disable-next-line react-hooks/exhaustive-deps + ...getColumnsDeps(instanceRef.current), + ] + ) + + instanceRef.current.columns = columns + + // Snapshot hook and disallow more from being added + const getFlatColumns = useConsumeHookGetter( + instanceRef.current.hooks, + 'flatColumns' ) // Snapshot hook and disallow more from being added - const getColumnsBeforeHeaderGroups = useConsumeHookGetter( + const getFlatColumnsDeps = useConsumeHookGetter( instanceRef.current.hooks, - 'columnsBeforeHeaderGroups' - ) - - // Snapshot hook and disallow more from being added - const getColumnsBeforeHeaderGroupsDeps = useConsumeHookGetter( - instanceRef.current.hooks, - 'columnsBeforeHeaderGroupsDeps' + 'flatColumnsDeps' ) // Get the flat list of all columns and allow hooks to decorate // those columns (and trigger this memoization via deps) - let flatColumns = React.useMemo(() => { - let newColumns = applyHooks( - getColumnsBeforeHeaderGroups(), - flattenBy(columns, 'columns'), - instanceRef.current - ) + let flatColumns = React.useMemo( + () => + applyHooks( + getFlatColumns(), + flattenBy(columns, 'columns'), + instanceRef.current + ), + [ + columns, + getFlatColumns, + // eslint-disable-next-line react-hooks/exhaustive-deps + ...getFlatColumnsDeps(instanceRef.current), + ] + ) - return newColumns - }, [ - columns, - getColumnsBeforeHeaderGroups, - // eslint-disable-next-line react-hooks/exhaustive-deps - ...getColumnsBeforeHeaderGroupsDeps(), - ]) + instanceRef.current.flatColumns = flatColumns + + // Snapshot hook and disallow more from being added + const getHeaderGroups = useConsumeHookGetter( + instanceRef.current.hooks, + 'headerGroups' + ) + + // Snapshot hook and disallow more from being added + const getHeaderGroupsDeps = useConsumeHookGetter( + instanceRef.current.hooks, + 'headerGroupsDeps' + ) // Make the headerGroups const headerGroups = React.useMemo( - () => makeHeaderGroups(flatColumns, defaultColumn), - [defaultColumn, flatColumns] + () => + applyHooks( + getHeaderGroups(), + makeHeaderGroups(flatColumns, defaultColumn), + instanceRef.current + ), + [ + defaultColumn, + flatColumns, + getHeaderGroups, + // eslint-disable-next-line react-hooks/exhaustive-deps + ...getHeaderGroupsDeps(), + ] ) + instanceRef.current.headerGroups = headerGroups + const headers = React.useMemo( () => (headerGroups.length ? headerGroups[0].headers : []), [headerGroups] ) - Object.assign(instanceRef.current, { - columns, - flatColumns, - headerGroups, - headers, - }) + instanceRef.current.headers = headers // Access the row model const [rows, flatRows] = React.useMemo(() => { diff --git a/src/plugin-hooks/useColumnOrder.js b/src/plugin-hooks/useColumnOrder.js index 82be54a..c1b7cfc 100644 --- a/src/plugin-hooks/useColumnOrder.js +++ b/src/plugin-hooks/useColumnOrder.js @@ -8,10 +8,10 @@ actions.setColumnOrder = 'setColumnOrder' export const useColumnOrder = hooks => { hooks.stateReducers.push(reducer) - hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => { + hooks.flatColumnsDeps.push((deps, instance) => { return [...deps, instance.state.columnOrder] }) - hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups) + hooks.flatColumns.push(flatColumns) hooks.useInstance.push(useInstance) } @@ -40,7 +40,7 @@ function reducer(state, action) { } } -function columnsBeforeHeaderGroups(columns, instance) { +function flatColumns(columns, instance) { const { state: { columnOrder }, } = instance diff --git a/src/plugin-hooks/useGroupBy.js b/src/plugin-hooks/useGroupBy.js index 8fa80c5..849a5c8 100755 --- a/src/plugin-hooks/useGroupBy.js +++ b/src/plugin-hooks/useGroupBy.js @@ -18,11 +18,11 @@ actions.toggleGroupBy = 'toggleGroupBy' export const useGroupBy = hooks => { hooks.stateReducers.push(reducer) - hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [ + hooks.flatColumnsDeps.push((deps, instance) => [ ...deps, instance.state.groupBy, ]) - hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups) + hooks.flatColumns.push(flatColumns) hooks.useInstance.push(useInstance) } @@ -64,7 +64,7 @@ function reducer(state, action) { } } -function columnsBeforeHeaderGroups(flatColumns, { state: { groupBy } }) { +function flatColumns(flatColumns, { state: { groupBy } }) { // Sort grouped columns to the start of the column list // before the headers are built