fixes deprecated lifecycle method warnings in v6 (#1536)

* try to migrate all the UNSAFE lifecycle methods

* fixes lifecycle.js

* fixes foldableTable

* changes how to reset state in pagination
This commit is contained in:
Yurui Zhang
2019-09-22 15:41:01 -06:00
committed by Tanner Linsley
parent 6584dbdad2
commit e1690ea151
6 changed files with 146 additions and 205 deletions
+109 -178
View File
@@ -1,6 +1,6 @@
{
"name": "react-table",
"version": "6.8.7",
"version": "6.10.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -377,12 +377,6 @@
"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
"dev": true
},
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
"dev": true
},
"asn1": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
@@ -2078,15 +2072,6 @@
"integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==",
"dev": true
},
"encoding": {
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
"integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
"dev": true,
"requires": {
"iconv-lite": "~0.4.13"
}
},
"error-ex": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
@@ -3037,29 +3022,6 @@
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
"dev": true
},
"fbjs": {
"version": "0.8.16",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
"integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
"dev": true,
"requires": {
"core-js": "^1.0.0",
"isomorphic-fetch": "^2.1.1",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.9"
},
"dependencies": {
"core-js": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
"dev": true
}
}
},
"figures": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -3234,7 +3196,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@@ -3248,8 +3211,8 @@
"dev": true,
"optional": true,
"requires": {
"delegates": "1.0.0",
"readable-stream": "2.3.6"
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
}
},
"balanced-match": {
@@ -3264,7 +3227,7 @@
"dev": true,
"optional": true,
"requires": {
"balanced-match": "1.0.0",
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
@@ -3331,7 +3294,7 @@
"dev": true,
"optional": true,
"requires": {
"minipass": "2.2.4"
"minipass": "^2.2.1"
}
},
"fs.realpath": {
@@ -3346,14 +3309,14 @@
"dev": true,
"optional": true,
"requires": {
"aproba": "1.2.0",
"console-control-strings": "1.1.0",
"has-unicode": "2.0.1",
"object-assign": "4.1.1",
"signal-exit": "3.0.2",
"string-width": "1.0.2",
"strip-ansi": "3.0.1",
"wide-align": "1.1.2"
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
"has-unicode": "^2.0.0",
"object-assign": "^4.1.0",
"signal-exit": "^3.0.0",
"string-width": "^1.0.1",
"strip-ansi": "^3.0.1",
"wide-align": "^1.1.0"
}
},
"glob": {
@@ -3362,12 +3325,12 @@
"dev": true,
"optional": true,
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
"inherits": "2.0.3",
"minimatch": "3.0.4",
"once": "1.4.0",
"path-is-absolute": "1.0.1"
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"has-unicode": {
@@ -3382,7 +3345,7 @@
"dev": true,
"optional": true,
"requires": {
"safer-buffer": "2.1.2"
"safer-buffer": "^2.1.0"
}
},
"ignore-walk": {
@@ -3391,7 +3354,7 @@
"dev": true,
"optional": true,
"requires": {
"minimatch": "3.0.4"
"minimatch": "^3.0.4"
}
},
"inflight": {
@@ -3400,8 +3363,8 @@
"dev": true,
"optional": true,
"requires": {
"once": "1.4.0",
"wrappy": "1.0.2"
"once": "^1.3.0",
"wrappy": "1"
}
},
"inherits": {
@@ -3422,7 +3385,7 @@
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "1.0.1"
"number-is-nan": "^1.0.0"
}
},
"isarray": {
@@ -3437,7 +3400,7 @@
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "1.1.11"
"brace-expansion": "^1.1.7"
}
},
"minimist": {
@@ -3452,8 +3415,8 @@
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.1",
"yallist": "3.0.2"
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
}
},
"minizlib": {
@@ -3462,7 +3425,7 @@
"dev": true,
"optional": true,
"requires": {
"minipass": "2.2.4"
"minipass": "^2.2.1"
}
},
"mkdirp": {
@@ -3486,9 +3449,9 @@
"dev": true,
"optional": true,
"requires": {
"debug": "2.6.9",
"iconv-lite": "0.4.21",
"sax": "1.2.4"
"debug": "^2.1.2",
"iconv-lite": "^0.4.4",
"sax": "^1.2.4"
}
},
"node-pre-gyp": {
@@ -3497,16 +3460,16 @@
"dev": true,
"optional": true,
"requires": {
"detect-libc": "1.0.3",
"mkdirp": "0.5.1",
"needle": "2.2.0",
"nopt": "4.0.1",
"npm-packlist": "1.1.10",
"npmlog": "4.1.2",
"rc": "1.2.6",
"rimraf": "2.6.2",
"semver": "5.5.0",
"tar": "4.4.1"
"detect-libc": "^1.0.2",
"mkdirp": "^0.5.1",
"needle": "^2.2.0",
"nopt": "^4.0.1",
"npm-packlist": "^1.1.6",
"npmlog": "^4.0.2",
"rc": "^1.1.7",
"rimraf": "^2.6.1",
"semver": "^5.3.0",
"tar": "^4"
}
},
"nopt": {
@@ -3515,8 +3478,8 @@
"dev": true,
"optional": true,
"requires": {
"abbrev": "1.1.1",
"osenv": "0.1.5"
"abbrev": "1",
"osenv": "^0.1.4"
}
},
"npm-bundled": {
@@ -3531,8 +3494,8 @@
"dev": true,
"optional": true,
"requires": {
"ignore-walk": "3.0.1",
"npm-bundled": "1.0.3"
"ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1"
}
},
"npmlog": {
@@ -3541,10 +3504,10 @@
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "1.1.4",
"console-control-strings": "1.1.0",
"gauge": "2.7.4",
"set-blocking": "2.0.0"
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
"gauge": "~2.7.3",
"set-blocking": "~2.0.0"
}
},
"number-is-nan": {
@@ -3565,7 +3528,7 @@
"dev": true,
"optional": true,
"requires": {
"wrappy": "1.0.2"
"wrappy": "1"
}
},
"os-homedir": {
@@ -3586,8 +3549,8 @@
"dev": true,
"optional": true,
"requires": {
"os-homedir": "1.0.2",
"os-tmpdir": "1.0.2"
"os-homedir": "^1.0.0",
"os-tmpdir": "^1.0.0"
}
},
"path-is-absolute": {
@@ -3608,10 +3571,10 @@
"dev": true,
"optional": true,
"requires": {
"deep-extend": "0.4.2",
"ini": "1.3.5",
"minimist": "1.2.0",
"strip-json-comments": "2.0.1"
"deep-extend": "~0.4.0",
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
@@ -3628,13 +3591,13 @@
"dev": true,
"optional": true,
"requires": {
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "2.0.0",
"safe-buffer": "5.1.1",
"string_decoder": "1.1.1",
"util-deprecate": "1.0.2"
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
}
},
"rimraf": {
@@ -3643,13 +3606,14 @@
"dev": true,
"optional": true,
"requires": {
"glob": "7.1.2"
"glob": "^7.0.5"
}
},
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -3687,9 +3651,9 @@
"dev": true,
"optional": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
"strip-ansi": "3.0.1"
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
"strip-ansi": "^3.0.0"
}
},
"string_decoder": {
@@ -3698,15 +3662,16 @@
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.1"
"safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "2.1.1"
"ansi-regex": "^2.0.0"
}
},
"strip-json-comments": {
@@ -3721,13 +3686,13 @@
"dev": true,
"optional": true,
"requires": {
"chownr": "1.0.1",
"fs-minipass": "1.2.5",
"minipass": "2.2.4",
"minizlib": "1.1.0",
"mkdirp": "0.5.1",
"safe-buffer": "5.1.1",
"yallist": "3.0.2"
"chownr": "^1.0.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.2.4",
"minizlib": "^1.1.0",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.1",
"yallist": "^3.0.2"
}
},
"util-deprecate": {
@@ -3742,18 +3707,20 @@
"dev": true,
"optional": true,
"requires": {
"string-width": "1.0.2"
"string-width": "^1.0.2"
}
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@@ -4450,12 +4417,6 @@
"integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
"dev": true
},
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"dev": true
},
"is-symbol": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
@@ -4501,16 +4462,6 @@
"isarray": "1.0.0"
}
},
"isomorphic-fetch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
"dev": true,
"requires": {
"node-fetch": "^1.0.1",
"whatwg-fetch": ">=0.10.0"
}
},
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -5011,16 +4962,6 @@
"integrity": "sha512-2NpiFHqC87y/zFke0fC0spBXL3bBsoh/p5H1EFhshxjCR5+0g2d6BiXbUFz9v1sAcxsk2htp2eQnNIci2dIYcA==",
"dev": true
},
"node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
"dev": true,
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
},
"normalize-package-data": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -5685,24 +5626,26 @@
"integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
"dev": true
},
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"requires": {
"asap": "~2.0.3"
}
},
"prop-types": {
"version": "15.6.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
"integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"dev": true,
"requires": {
"fbjs": "^0.8.16",
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
},
"dependencies": {
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
}
}
},
"ps-tree": {
@@ -5839,6 +5782,12 @@
}
}
},
"react-is": {
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
"integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==",
"dev": true
},
"react-json-tree": {
"version": "0.10.9",
"resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.10.9.tgz",
@@ -6971,12 +6920,6 @@
}
}
},
"setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
"dev": true
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -7990,12 +7933,6 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
"ua-parser-js": {
"version": "0.7.18",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
"integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==",
"dev": true
},
"uglify-es": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
@@ -8184,12 +8121,6 @@
"integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==",
"dev": true
},
"whatwg-fetch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==",
"dev": true
},
"which": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
+10 -10
View File
@@ -4,7 +4,7 @@ import set from 'lodash.set'
import get from 'lodash.get'
/*
AvancedExpandTableHOC for ReactTable
AdvancedExpandTableHOC for ReactTable
HOC which allows any Cell in the row to toggle the row's
SubComponent. Also allows the SubComponent to toggle itself.
@@ -46,6 +46,15 @@ export const columnsWithToggle = (columns, expandFuncs) =>
export const advancedExpandTableHOC = TableComponent =>
class AdvancedExpandTable extends Component {
// after initial render if we get new
// data, columns, page changes, etc.
// we reset expanded state.
static getDerivedStateFromProps () {
return {
expanded: {},
}
}
constructor (props) {
super(props)
this.state = {
@@ -63,15 +72,6 @@ export const advancedExpandTableHOC = TableComponent =>
}
}
// after initial render if we get new
// data, columns, page changes, etc.
// we reset expanded state.
UNSAFE_componentWillReceiveProps () {
this.setState({
expanded: {},
})
}
static propTypes = {
columns: PropTypes.array.isRequired,
SubComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
+10 -6
View File
@@ -32,6 +32,16 @@ const defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => {
export default ReactTable => {
const wrapper = class RTFoldableTable extends React.Component {
static getDerivedStateFromProps(props, state) {
if (state.resized !== props.resized) {
return {
resized: props.resized || [],
};
}
return null;
}
constructor(props, context) {
super(props, context)
@@ -41,12 +51,6 @@ export default ReactTable => {
}
}
UNSAFE_componentWillReceiveProps(newProps) {
if (this.state.resized !== newProps.resized) {
this.setState(p => ({ resized: newProps.resized }))
}
}
onResizedChange = resized => {
const { onResizedChange } = this.props
if (onResizedChange) onResizedChange(resized)
+6 -4
View File
@@ -1,6 +1,8 @@
export default Base =>
class extends Base {
UNSAFE_componentWillMount () {
constructor(props) {
super(props);
this.setStateWithData(this.getDataModel(this.getResolvedState(), true))
}
@@ -8,9 +10,9 @@ export default Base =>
this.fireFetchData()
}
UNSAFE_componentWillReceiveProps (nextProps, nextState) {
const oldState = this.getResolvedState()
const newState = this.getResolvedState(nextProps, nextState)
componentDidUpdate (prevProps, prevState) {
const oldState = this.getResolvedState(prevProps, prevState)
const newState = this.getResolvedState(this.props, this.state)
// Do a deep compare of new and old `defaultOption` and
// if they are different reset `option = defaultOption`
+7 -3
View File
@@ -63,9 +63,13 @@ export default class ReactTablePagination extends Component {
}
}
UNSAFE_componentWillReceiveProps (nextProps) {
if (this.props.page !== nextProps.page) {
this.setState({ page: nextProps.page })
componentDidUpdate (prevProps, prevState) {
if (prevProps.page !== this.props.page && prevState.page !== this.state.page) {
// this is probably safe because we only update when old/new state.page are different
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
page: this.props.page,
})
}
}
+4 -4
View File
@@ -203,25 +203,25 @@ function isSortingDesc (d) {
return !!(d.sort === 'desc' || d.desc === true || d.asc === false)
}
function normalizeComponent(Comp, props, fallback = Comp) {
function normalizeComponent (Comp, props, fallback = Comp) {
return isReactComponent(Comp) ? <Comp {...props} /> : typeof Comp === 'function' ? Comp(props) : fallback
}
function isClassComponent(component) {
function isClassComponent (component) {
return (
typeof component === 'function' &&
!!Object.getPrototypeOf(component).isReactComponent
)
}
function isFunctionComponent(component) {
function isFunctionComponent (component) {
return (
typeof component === 'function' &&
String(component).includes('.createElement')
)
}
function isReactComponent(component) {
function isReactComponent (component) {
return isClassComponent(component) || isFunctionComponent(component)
}