From f0961d06f001a0faca539b83d988ef79edf3f6f3 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Wed, 21 Aug 2019 23:20:42 +0800 Subject: [PATCH 1/3] fix regression of scrollToRow --- CHANGELOG.md | 2 ++ src/BaseTable.js | 17 ++++++++--- website/siteConfig.js | 4 +++ website/src/examples/scroll-to.js | 47 +++++++++++++++++++++++++++++++ 4 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 website/src/examples/scroll-to.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 54067f05..be2b4235 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## NEXT VERSION +- fix: `scrollToRow` doesn't work regression introduced in #73 + ## v1.7.0 (2019-08-06) - chore: remove the use of `Object.values` diff --git a/src/BaseTable.js b/src/BaseTable.js index 73a4de27..1ff0a8b1 100644 --- a/src/BaseTable.js +++ b/src/BaseTable.js @@ -208,10 +208,19 @@ class BaseTable extends React.PureComponent { * @param {string} align */ scrollToRow(rowIndex = 0, align = 'auto') { - this.table && this.table.scrollToRow(rowIndex, align); - this.leftTable && this.leftTable.scrollToRow(rowIndex, align); - this.rightTable && this.rightTable.scrollToRow(rowIndex, align); - this.scrollToLeft(0); + // if the table is in `fixed` mode, it could be scrolled horizontally, in that case, + // the horizontal scroll position would be unexpected if the `align` is not `start`, + // so we reset the horizontal scroll to the previous value in that case, + // and the two scroll methods would be batched on event callback, and the `onScroll` event will be called after that, + // then it will be reset to the original position as the `this._scroll` is not synced to the new state, + // so we put them in a `setTimeout` to make `onScroll` be called before we set the horizontal position. + setTimeout(() => { + const prevScrollLeft = this._scroll.scrollLeft; + this.table && this.table.scrollToRow(rowIndex, align); + this.leftTable && this.leftTable.scrollToRow(rowIndex, align); + this.rightTable && this.rightTable.scrollToRow(rowIndex, align); + this.props.fixed && this.scrollToLeft(prevScrollLeft); + }, 0); } /** diff --git a/website/siteConfig.js b/website/siteConfig.js index 12776a45..6995bbe5 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -204,5 +204,9 @@ module.exports = { title: 'Inline Editing', path: '/examples/inline-editing', }, + { + title: 'Scroll Methods', + path: '/examples/scroll-to', + }, ], } diff --git a/website/src/examples/scroll-to.js b/website/src/examples/scroll-to.js new file mode 100644 index 00000000..2d359948 --- /dev/null +++ b/website/src/examples/scroll-to.js @@ -0,0 +1,47 @@ +const columns = generateColumns(10) +const data = generateData(columns, 500) + +const Button = styled.button` + padding: 4px 8px; + margin: 10px; +` + +export default class App extends React.Component { + setRef = ref => { + this.table = ref + window.t = ref + } + + scroll = () => this.table.scrollToRow(100, 'auto') + + render() { + return ( + <> + + + + + + + + + + ) + } +} From 13843641d3c51262fa73e083805db467bfe680e0 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Wed, 21 Aug 2019 23:54:02 +0800 Subject: [PATCH 2/3] don't set columnIndex in scrollToRow --- src/BaseTable.js | 16 +++------------- src/GridTable.js | 2 +- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/BaseTable.js b/src/BaseTable.js index 1ff0a8b1..f4760580 100644 --- a/src/BaseTable.js +++ b/src/BaseTable.js @@ -208,19 +208,9 @@ class BaseTable extends React.PureComponent { * @param {string} align */ scrollToRow(rowIndex = 0, align = 'auto') { - // if the table is in `fixed` mode, it could be scrolled horizontally, in that case, - // the horizontal scroll position would be unexpected if the `align` is not `start`, - // so we reset the horizontal scroll to the previous value in that case, - // and the two scroll methods would be batched on event callback, and the `onScroll` event will be called after that, - // then it will be reset to the original position as the `this._scroll` is not synced to the new state, - // so we put them in a `setTimeout` to make `onScroll` be called before we set the horizontal position. - setTimeout(() => { - const prevScrollLeft = this._scroll.scrollLeft; - this.table && this.table.scrollToRow(rowIndex, align); - this.leftTable && this.leftTable.scrollToRow(rowIndex, align); - this.rightTable && this.rightTable.scrollToRow(rowIndex, align); - this.props.fixed && this.scrollToLeft(prevScrollLeft); - }, 0); + this.table && this.table.scrollToRow(rowIndex, align); + this.leftTable && this.leftTable.scrollToRow(rowIndex, align); + this.rightTable && this.rightTable.scrollToRow(rowIndex, align); } /** diff --git a/src/GridTable.js b/src/GridTable.js index 7e6b59b5..a1b83616 100644 --- a/src/GridTable.js +++ b/src/GridTable.js @@ -40,7 +40,7 @@ class GridTable extends React.PureComponent { } scrollToRow(rowIndex = 0, align = 'auto') { - this.bodyRef && this.bodyRef.scrollToItem({ rowIndex, columnIndex: 0, align }); + this.bodyRef && this.bodyRef.scrollToItem({ rowIndex, align }); } renderRow(args) { From dab2126c2194c84a6ea6d6995714bc6c289e7db7 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Thu, 22 Aug 2019 00:00:39 +0800 Subject: [PATCH 3/3] update --- website/src/examples/scroll-to.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/website/src/examples/scroll-to.js b/website/src/examples/scroll-to.js index 2d359948..b7fb7dd7 100644 --- a/website/src/examples/scroll-to.js +++ b/website/src/examples/scroll-to.js @@ -7,17 +7,14 @@ const Button = styled.button` ` export default class App extends React.Component { - setRef = ref => { - this.table = ref - window.t = ref - } - - scroll = () => this.table.scrollToRow(100, 'auto') + setRef = ref => (this.table = ref) render() { return ( <> - +