Fix: Fancy scrollbars (#18151)

* Fix: Fancy scrollbars * Fix: Fancy scrollbars
influxdata · May 19, 2020 · d5b3ccb · d5b3ccb
1 parent b303768
commit d5b3ccb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/ui/src/shared/components/MultiGrid/MultiGrid.tsx b/ui/src/shared/components/MultiGrid/MultiGrid.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import CellMeasurerCacheDecorator from './CellMeasurerCacheDecorator'
 import {Grid} from 'react-virtualized'
-import {DapperScrollbars} from '@influxdata/clockface'
+import {DapperScrollbars, FusionScrollEvent} from '@influxdata/clockface'
 
 const SCROLLBAR_SIZE_BUFFER = 20
 type HeightWidthFunction = (arg: {index: number}) => number
@@ -401,9 +401,8 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
     return this.topGridHeight
   }
 
-  private onScrollbarsScroll = (e: React.MouseEvent<HTMLElement>) => {
-    const {target} = e
-    this.onScroll(target)
+  private onScrollbarsScroll = (e: FusionScrollEvent) => {
+    this.onScroll(e)
   }
 
   private onScroll = scrollInfo => {

diff --git a/ui/src/timeMachine/components/RawFluxDataTable.tsx b/ui/src/timeMachine/components/RawFluxDataTable.tsx
@@ -1,11 +1,11 @@
 // Libraries
-import React, {PureComponent, MouseEvent} from 'react'
+import React, {PureComponent} from 'react'
 import memoizeOne from 'memoize-one'
 import RawFluxDataGrid from 'src/timeMachine/components/RawFluxDataGrid'
 
 // Utils
 import {parseFiles} from 'src/timeMachine/utils/rawFluxDataTable'
-import {DapperScrollbars} from '@influxdata/clockface'
+import {DapperScrollbars, FusionScrollEvent} from '@influxdata/clockface'
 
 interface Props {
   files: string[]
@@ -58,11 +58,8 @@ class RawFluxDataTable extends PureComponent<Props, State> {
     )
   }
 
-  private onScrollbarsScroll = (e: MouseEvent<HTMLElement>) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const {scrollTop, scrollLeft} = e.currentTarget
+  private onScrollbarsScroll = (e: FusionScrollEvent) => {
+    const {scrollTop, scrollLeft} = e
 
     this.setState({scrollLeft, scrollTop})
   }