incremental loading

elastic · Oct 2, 2018 · 3e8ad02 · 3e8ad02
1 parent 76b2370
commit 3e8ad02
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js
@@ -77,6 +77,13 @@ export class QueryBar extends Component {
     isSuggestionsVisible: false,
     index: null,
     suggestions: [],
+    suggestionLimit: 50,
+  };
+
+  increaseLimit = () => {
+    this.setState({
+      suggestionLimit: this.state.suggestionLimit + 50,
+    });
   };
 
   incrementIndex = (currentIndex) => {
@@ -185,6 +192,7 @@ export class QueryBar extends Component {
       inputIsPristine: false,
       isSuggestionsVisible: hasValue,
       index: null,
+      suggestionLimit: 50,
     });
   };
 
@@ -381,10 +389,11 @@ export class QueryBar extends Component {
 
           <Suggestions
             show={this.state.isSuggestionsVisible}
-            suggestions={this.state.suggestions}
+            suggestions={this.state.suggestions.slice(0, this.state.suggestionLimit)}
             index={this.state.index}
             onClick={this.onClickSuggestion}
             onMouseEnter={this.onMouseEnterSuggestion}
+            loadMore={this.increaseLimit}
           />
         </div>
       </EuiOutsideClickDetector>

diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js
@@ -44,6 +44,20 @@ export class Suggestions extends Component {
     parent.scrollTop = scrollTop;
   };
 
+  handleScroll = () => {
+    if (!this.props.loadMore) return;
+
+    const position = this.parentNode.scrollTop + this.parentNode.offsetHeight;
+    const height = this.parentNode.scrollHeight;
+    const remaining = height - position;
+    const margin = 50;
+
+    if (!height || !position) return;
+    if (remaining <= margin) {
+      this.props.loadMore();
+    }
+  };
+
   componentDidUpdate(prevProps) {
     if (prevProps.index !== this.props.index) {
       this.scrollIntoView();
@@ -78,6 +92,7 @@ export class Suggestions extends Component {
               className="typeahead-items"
               role="listbox"
               ref={node => (this.parentNode = node)}
+              onScroll={this.handleScroll}
             >
               {suggestions}
             </div>
@@ -93,5 +108,6 @@ Suggestions.propTypes = {
   onClick: PropTypes.func.isRequired,
   onMouseEnter: PropTypes.func.isRequired,
   show: PropTypes.bool,
-  suggestions: PropTypes.array.isRequired
+  suggestions: PropTypes.array.isRequired,
+  loadMore: PropTypes.func,
 };