[Discover] Fix infinite scrolling of classic table (#110944)
This commit is contained in:
parent
1eed669095
commit
1a1ae6c1bc
|
@ -13,6 +13,7 @@ import { debounce } from 'lodash';
|
|||
import { EuiButtonEmpty } from '@elastic/eui';
|
||||
import { DocTableProps, DocTableRenderProps, DocTableWrapper } from './doc_table_wrapper';
|
||||
import { SkipBottomButton } from '../skip_bottom_button';
|
||||
import { shouldLoadNextDocPatch } from './lib/should_load_next_doc_patch';
|
||||
|
||||
const FOOTER_PADDING = { padding: 0 };
|
||||
|
||||
|
@ -35,12 +36,7 @@ const DocTableInfiniteContent = (props: DocTableRenderProps) => {
|
|||
const scheduleCheck = debounce(() => {
|
||||
const isMobileView = document.getElementsByClassName('dscSidebar__mobile').length > 0;
|
||||
const usedScrollDiv = isMobileView ? scrollMobileElem : scrollDiv;
|
||||
|
||||
const scrollusedHeight = usedScrollDiv.scrollHeight;
|
||||
const scrollTop = Math.abs(usedScrollDiv.scrollTop);
|
||||
const clientHeight = usedScrollDiv.clientHeight;
|
||||
|
||||
if (scrollTop + clientHeight === scrollusedHeight) {
|
||||
if (shouldLoadNextDocPatch(usedScrollDiv)) {
|
||||
setLimit((prevLimit) => prevLimit + 50);
|
||||
}
|
||||
}, 50);
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { shouldLoadNextDocPatch } from './should_load_next_doc_patch';
|
||||
|
||||
describe('shouldLoadNextDocPatch', () => {
|
||||
test('next patch should not be loaded', () => {
|
||||
const scrollingDomEl = {
|
||||
scrollHeight: 500,
|
||||
scrollTop: 100,
|
||||
clientHeight: 100,
|
||||
} as HTMLElement;
|
||||
|
||||
expect(shouldLoadNextDocPatch(scrollingDomEl)).toBeFalsy();
|
||||
});
|
||||
|
||||
test('next patch should be loaded', () => {
|
||||
const scrollingDomEl = {
|
||||
scrollHeight: 500,
|
||||
scrollTop: 350,
|
||||
clientHeight: 100,
|
||||
} as HTMLElement;
|
||||
|
||||
expect(shouldLoadNextDocPatch(scrollingDomEl)).toBeTruthy();
|
||||
});
|
||||
|
||||
test("next patch should be loaded even there's a decimal scroll height", () => {
|
||||
const scrollingDomEl = {
|
||||
scrollHeight: 500,
|
||||
scrollTop: 350.34234234,
|
||||
clientHeight: 100,
|
||||
} as HTMLElement;
|
||||
|
||||
expect(shouldLoadNextDocPatch(scrollingDomEl)).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
// use a buffer to start rendering more documents before the user completely scrolles down
|
||||
const verticalScrollBuffer = 100;
|
||||
|
||||
/**
|
||||
* Helper function to determine if the next patch of 50 documents should be loaded
|
||||
*/
|
||||
export function shouldLoadNextDocPatch(domEl: HTMLElement) {
|
||||
// the height of the scrolling div, including content not visible on the screen due to overflow.
|
||||
const scrollHeight = domEl.scrollHeight;
|
||||
// the number of pixels that the div is is scrolled vertically
|
||||
const scrollTop = domEl.scrollTop;
|
||||
// the inner height of the scrolling div, excluding content that's visible on the screen
|
||||
const clientHeight = domEl.clientHeight;
|
||||
|
||||
const consumedHeight = scrollTop + clientHeight;
|
||||
const remainingHeight = scrollHeight - consumedHeight;
|
||||
return remainingHeight < verticalScrollBuffer;
|
||||
}
|
Loading…
Reference in a new issue