From 1e4f8383264a76f45ca3ef0fccedb6488a8c579f Mon Sep 17 00:00:00 2001 From: Jan Z Date: Mon, 6 Feb 2017 17:09:35 -0500 Subject: [PATCH] 'collapseOnChange' and 'freezeWhenExpanded' (#61) * rough draft of "closeSubComponentOnDataChange" and "preventAutoSortWhenComponentIsOpen" * changed flag name from ...component to ...subcomponent * fixed problem with sorting not immediately being applied. passes tests now * changed var names * Cleanup and simplification * Fix deps * Better freezing strategy * subcomponent reverse --- .DS_Store | Bin 0 -> 6148 bytes package.json | 1 + src/componentMethods.js | 4 +-- src/index.js | 54 +++++++++++++++++++++++++++++++-------- src/utils.js | 13 +++++++++- stories/SubComponents.js | 2 +- yarn.lock | 6 ++++- 7 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c43fc012866d1f0025b41e9d38b0988a1501422b GIT binary patch literal 6148 zcmeHKJ8A<_3>+mcOx(D1`A!hX4IaihfiDnDz(s-$&Ii(Mm2>529(^z|>l7){gwZ0+ zds@v~c8b*sfGyu1?|?agDcupD9>(VP-A8s+86(np#sMGLV9)DmRDC(&+#B5D1+Qd% z*b9fm_;fJD z2tb@L9maLc62#^SVlNyLnW0%yiAl8@F)ZoKx2o%fLt@flHGEh-*=j#04v9f$KIlaK47e^bDe%_{906bN6`}wD literal 0 HcmV?d00001 diff --git a/package.json b/package.json index 7fce584..69853f2 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "react-dom": "^15.4.2", "react-json-tree": "^0.10.1", "standard": "^8.0.0", + "storybook": "^0.0.0", "stylus": "^0.54.5", "uglifyify": "3.0.3" }, diff --git a/src/componentMethods.js b/src/componentMethods.js index 70a8a90..5d6b98c 100644 --- a/src/componentMethods.js +++ b/src/componentMethods.js @@ -221,13 +221,13 @@ export default { hasHeaderGroups } }, - getSortedData (nextProps, nextState) { + getSortedData (state) { const { manual, sorting, allDecoratedColumns, resolvedData - } = this.getResolvedState(nextProps, nextState) + } = state const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns) diff --git a/src/index.js b/src/index.js index ad7aa2b..0856e06 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,8 @@ export const ReactTableDefaults = { defaultPageSize: 20, showPageJump: true, expanderColumnWidth: 35, + collapseOnChange: true, + freezeWhenExpanded: false, // Controlled State Overrides // page: undefined, @@ -154,10 +156,10 @@ export default React.createClass({ getResolvedState (props, state) { const resolvedState = { - ...this.state, - ...state, - ...this.props, - ...props + ..._.compactObject(this.state), + ..._.compactObject(state), + ..._.compactObject(this.props), + ..._.compactObject(props) } return resolvedState }, @@ -173,6 +175,7 @@ export default React.createClass({ componentWillReceiveProps (nextProps, nextState) { const oldState = this.getResolvedState() const newState = this.getResolvedState(nextProps, nextState) + // Props that trigger a data update if ( oldState.data !== newState.data || @@ -187,22 +190,49 @@ export default React.createClass({ setStateWithData (newState, cb) { const oldState = this.getResolvedState() const newResolvedState = this.getResolvedState({}, newState) - if ( - oldState.resolvedData !== newResolvedState.resolvedData || - oldState.sorting !== newResolvedState.sorting - ) { - Object.assign(newState, this.getSortedData({}, newState)) + const { freezeWhenExpanded } = newResolvedState + + // Default to unfrozen state + newResolvedState.frozen = false + + // If freezeWhenExpanded is set, check for frozen conditions + if (freezeWhenExpanded) { + // if any rows are expanded, freeze the existing data and sorting + const keys = Object.keys(newResolvedState.expandedRows) + for (var i = 0; i < keys.length; i++) { + if (newResolvedState.expandedRows[keys[i]]) { + newResolvedState.frozen = true + break + } + } } + + // If the data isn't frozen and either the data or + // sorting model has changed, update the data + if ( + (oldState.frozen && !newResolvedState.frozen) || + oldState.sorting !== newResolvedState.sorting || + (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData) + ) { + // If collapseOnChange is set, automatically close expanded subcomponents + if (this.props.collapseOnChange) { + newResolvedState.expandedRows = {} + } + Object.assign(newResolvedState, this.getSortedData(newResolvedState)) + } + // Calculate pageSize all the time if (newResolvedState.resolvedData) { - newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize) + newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize) } - return this.setState(newState, cb) + + return this.setState(newResolvedState, cb) }, shouldComponentUpdate (nextProps, nextState) { const oldState = this.getResolvedState() const newState = this.getResolvedState(nextProps, nextState) + // State changes that trigger a render if ( oldState.sortedData !== newState.sortedData || @@ -390,6 +420,7 @@ export default React.createClass({ } return ( ) ` -} +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9a2cefe..53cc18e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2998,7 +2998,7 @@ indexof@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d" -inflight@^1.0.4: +inflight@^1.0.4, inflight@^1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" dependencies: @@ -5248,6 +5248,10 @@ standard@^8.0.0: version "1.3.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e" +storybook@^0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/storybook/-/storybook-0.0.0.tgz#b3b9508fb99fd83615674917583cfe9e1532931d" + stream-browserify@^2.0.0, stream-browserify@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"