mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Dashboard: Fixes random scrolling on time range change (#50379)
* Dashboard: Fixes random scrolling on time range change * fix ts issue * removed logging
This commit is contained in:
parent
8bd56b8226
commit
fd408652dc
@ -1,6 +1,5 @@
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { isNil } from 'lodash';
|
|
||||||
import React, { FC, RefCallback, useCallback, useEffect, useRef } from 'react';
|
import React, { FC, RefCallback, useCallback, useEffect, useRef } from 'react';
|
||||||
import Scrollbars, { positionValues } from 'react-custom-scrollbars-2';
|
import Scrollbars, { positionValues } from 'react-custom-scrollbars-2';
|
||||||
|
|
||||||
@ -46,28 +45,24 @@ export const CustomScrollbar: FC<Props> = ({
|
|||||||
children,
|
children,
|
||||||
}) => {
|
}) => {
|
||||||
const ref = useRef<Scrollbars & { view: HTMLDivElement }>(null);
|
const ref = useRef<Scrollbars & { view: HTMLDivElement }>(null);
|
||||||
useEffect(() => {
|
|
||||||
if (ref.current) {
|
|
||||||
scrollRefCallback?.(ref.current.view);
|
|
||||||
}
|
|
||||||
}, [ref, scrollRefCallback]);
|
|
||||||
const styles = useStyles2(getStyles);
|
const styles = useStyles2(getStyles);
|
||||||
|
|
||||||
const updateScroll = () => {
|
useEffect(() => {
|
||||||
if (ref.current && !isNil(scrollTop)) {
|
if (ref.current && scrollRefCallback) {
|
||||||
ref.current.scrollTop(scrollTop);
|
scrollRefCallback(ref.current.view);
|
||||||
}
|
}
|
||||||
};
|
}, [ref, scrollRefCallback]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
updateScroll();
|
if (ref.current && scrollTop != null) {
|
||||||
});
|
ref.current.scrollTop(scrollTop);
|
||||||
|
}
|
||||||
|
}, [scrollTop]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Special logic for doing a update a few milliseconds after mount to check for
|
* Special logic for doing a update a few milliseconds after mount to check for
|
||||||
* updated height due to dynamic content
|
* updated height due to dynamic content
|
||||||
*/
|
*/
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!updateAfterMountMs) {
|
if (!updateAfterMountMs) {
|
||||||
return;
|
return;
|
||||||
|
Loading…
Reference in New Issue
Block a user