From 2aa3876fce0523d728e48d5a849434ac3bc04b8b Mon Sep 17 00:00:00 2001
From: sjhuang26 <sjhuang26@gmail.com>
Date: Mon, 28 May 2018 17:30:46 -0400
Subject: [PATCH] Scroll to top when search query or tag changed
---
src/components/library/library.jsx | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 41ed6dffc..0a3e3b525 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -34,7 +34,8 @@ class LibraryComponent extends React.Component {
'handleMouseEnter',
'handleMouseLeave',
'handleSelect',
- 'handleTagClick'
+ 'handleTagClick',
+ 'setFilteredDataRef'
]);
this.state = {
selectedItem: null,
@@ -57,6 +58,7 @@ class LibraryComponent extends React.Component {
filterQuery: '',
selectedTag: tag.toLowerCase()
});
+ this.scrollToTop();
}
handleMouseEnter (id) {
if (this.props.onItemMouseEnter) this.props.onItemMouseEnter(this.getFilteredData()[id]);
@@ -69,6 +71,7 @@ class LibraryComponent extends React.Component {
filterQuery: event.target.value,
selectedTag: ALL_TAG_TITLE.toLowerCase()
});
+ this.scrollToTop();
}
handleFilterClear () {
this.setState({filterQuery: ''});
@@ -92,6 +95,12 @@ class LibraryComponent extends React.Component {
.indexOf(this.state.selectedTag) !== -1
));
}
+ scrollToTop () {
+ this.filteredDataRef.scrollTop = 0;
+ }
+ setFilteredDataRef (ref) {
+ this.filteredDataRef = ref;
+ }
render () {
return (
<Modal
@@ -141,6 +150,7 @@ class LibraryComponent extends React.Component {
className={classNames(styles.libraryScrollGrid, {
[styles.withFilterBar]: this.props.filterable || this.props.tags
})}
+ ref={this.setFilteredDataRef}
>
{this.getFilteredData().map((dataItem, index) => {
const scratchURL = dataItem.md5 ?
--
GitLab