refactor: remove fancy scroll bars (#18016)

* refactor: remove fancy scroll bars the code changes in influxdb, the final removal of fancy scrollbars, this will need to go out with clockface changes * refactor: remove fancy scroll bars Prettier fixes
influxdata · May 18, 2020 · 9eb180b · 9eb180b
1 parent 074a319
commit 9eb180b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 114 deletions.
diff --git a/ui/src/dashboards/components/NoteEditorPreview.tsx b/ui/src/dashboards/components/NoteEditorPreview.tsx
@@ -1,8 +1,7 @@
 import React, {SFC, MouseEvent} from 'react'
 
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
-
 import {MarkdownRenderer} from 'src/shared/components/views/MarkdownRenderer'
+import {DapperScrollbars} from '@influxdata/clockface'
 
 interface Props {
   note: string
@@ -16,10 +15,10 @@ const cloudImageRenderer = (): any =>
 const NoteEditorPreview: SFC<Props> = props => {
   return (
     <div className="note-editor--preview">
-      <FancyScrollbar
+      <DapperScrollbars
         className="note-editor--preview-scroll"
         scrollTop={props.scrollTop}
-        setScrollTop={props.onScroll}
+        onScroll={props.onScroll}
       >
         <div className="note-editor--markdown-container">
           <MarkdownRenderer
@@ -31,7 +30,7 @@ const NoteEditorPreview: SFC<Props> = props => {
             }}
           />
         </div>
-      </FancyScrollbar>
+      </DapperScrollbars>
     </div>
   )
 }

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 FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import {Grid} from 'react-virtualized'
+import {DapperScrollbars} from '@influxdata/clockface'
 
 const SCROLLBAR_SIZE_BUFFER = 20
 type HeightWidthFunction = (arg: {index: number}) => number
@@ -472,12 +472,12 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
     const height = this.getBottomGridHeight(props)
 
     return (
-      <FancyScrollbar
+      <DapperScrollbars
         style={{...this.bottomRightGridStyle, width, height}}
         autoHide={true}
         scrollTop={this.state.scrollTop}
         scrollLeft={this.state.scrollLeft}
-        setScrollTop={this.onScrollbarsScroll}
+        onScroll={this.onScrollbarsScroll}
       >
         <Grid
           {...props}
@@ -503,7 +503,7 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
           }}
           width={width}
         />
-      </FancyScrollbar>
+      </DapperScrollbars>
     )
   }
 

diff --git a/ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx b/ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx
diff --git a/ui/src/timeMachine/components/RawFluxDataTable.tsx b/ui/src/timeMachine/components/RawFluxDataTable.tsx
@@ -3,11 +3,9 @@ import React, {PureComponent, MouseEvent} from 'react'
 import memoizeOne from 'memoize-one'
 import RawFluxDataGrid from 'src/timeMachine/components/RawFluxDataGrid'
 
-// Components
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
-
 // Utils
 import {parseFiles} from 'src/timeMachine/utils/rawFluxDataTable'
+import {DapperScrollbars} from '@influxdata/clockface'
 
 interface Props {
   files: string[]
@@ -35,7 +33,7 @@ class RawFluxDataTable extends PureComponent<Props, State> {
 
     return (
       <div className="raw-flux-data-table" data-testid="raw-data-table">
-        <FancyScrollbar
+        <DapperScrollbars
           style={{
             overflowY: 'hidden',
             width: tableWidth,
@@ -44,7 +42,7 @@ class RawFluxDataTable extends PureComponent<Props, State> {
           autoHide={false}
           scrollTop={scrollTop}
           scrollLeft={scrollLeft}
-          setScrollTop={this.onScrollbarsScroll}
+          onScroll={this.onScrollbarsScroll}
         >
           <RawFluxDataGrid
             scrollTop={scrollTop}
@@ -55,7 +53,7 @@ class RawFluxDataTable extends PureComponent<Props, State> {
             data={data}
             key={files[0]}
           />
-        </FancyScrollbar>
+        </DapperScrollbars>
       </div>
     )
   }