Revert "refactor: remove fancy scroll bars (#18016)"

This reverts commit 9eb180b.

ui/src/dashboards/components/NoteEditorPreview.tsx

@@ -1,7 +1,8 @@
 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
@@ -15,10 +16,10 @@ const cloudImageRenderer = (): any =>
 const NoteEditorPreview: SFC<Props> = props => {
   return (
     <div className="note-editor--preview">
-      <DapperScrollbars
+      <FancyScrollbar
         className="note-editor--preview-scroll"
         scrollTop={props.scrollTop}
-        onScroll={props.onScroll}
+        setScrollTop={props.onScroll}
       >
         <div className="note-editor--markdown-container">
           <MarkdownRenderer
@@ -30,7 +31,7 @@ const NoteEditorPreview: SFC<Props> = props => {
             }}
           />
         </div>
-      </DapperScrollbars>
+      </FancyScrollbar>
     </div>
   )
 }

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 (
-      <DapperScrollbars
+      <FancyScrollbar
         style={{...this.bottomRightGridStyle, width, height}}
         autoHide={true}
         scrollTop={this.state.scrollTop}
         scrollLeft={this.state.scrollLeft}
-        onScroll={this.onScrollbarsScroll}
+        setScrollTop={this.onScrollbarsScroll}
       >
         <Grid
           {...props}
@@ -503,7 +503,7 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
           }}
           width={width}
         />
-      </DapperScrollbars>
+      </FancyScrollbar>
     )
   }
 

ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx

@@ -0,0 +1,99 @@
+// Libraries
+import React, {Component} from 'react'
+import _ from 'lodash'
+import classnames from 'classnames'
+import {Scrollbars} from '@influxdata/react-custom-scrollbars'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  className: string
+  maxHeight: number
+  autoHide: boolean
+  autoHeight: boolean
+  style: React.CSSProperties
+  hideTracksWhenNotNeeded: boolean
+  setScrollTop: (value: React.MouseEvent<HTMLElement>) => void
+  scrollTop?: number
+  scrollLeft?: number
+  thumbStartColor?: string
+  thumbStopColor?: string
+}
+
+@ErrorHandling
+class FancyScrollbar extends Component<Props> {
+  public static defaultProps = {
+    className: '',
+    autoHide: true,
+    autoHeight: false,
+    hideTracksWhenNotNeeded: true,
+    maxHeight: null,
+    style: {},
+    setScrollTop: () => {},
+  }
+
+  private ref: React.RefObject<Scrollbars>
+
+  constructor(props) {
+    super(props)
+    this.ref = React.createRef<Scrollbars>()
+  }
+
+  public updateScroll() {
+    const ref = this.ref.current
+    if (ref && !_.isNil(this.props.scrollTop)) {
+      ref.scrollTop(this.props.scrollTop)
+    }
+
+    if (ref && !_.isNil(this.props.scrollLeft)) {
+      ref.scrollLeft(this.props.scrollLeft)
+    }
+  }
+
+  public componentDidMount() {
+    this.updateScroll()
+  }
+
+  public componentDidUpdate() {
+    this.updateScroll()
+  }
+
+  public render() {
+    const {
+      autoHide,
+      autoHeight,
+      children,
+      className,
+      maxHeight,
+      setScrollTop,
+      style,
+      thumbStartColor,
+      thumbStopColor,
+      hideTracksWhenNotNeeded,
+    } = this.props
+
+    return (
+      <Scrollbars
+        className={classnames('fancy-scroll--container', {
+          [className]: className,
+        })}
+        ref={this.ref}
+        style={style}
+        onScroll={setScrollTop}
+        autoHide={autoHide}
+        autoHideTimeout={1000}
+        autoHideDuration={250}
+        autoHeight={autoHeight}
+        autoHeightMax={maxHeight}
+        thumbStartColor={thumbStartColor}
+        thumbStopColor={thumbStopColor}
+        hideTracksWhenNotNeeded={hideTracksWhenNotNeeded}
+      >
+        {children}
+      </Scrollbars>
+    )
+  }
+}
+
+export default FancyScrollbar

ui/src/timeMachine/components/RawFluxDataTable.tsx

@@ -3,9 +3,11 @@ 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[]
@@ -33,7 +35,7 @@ class RawFluxDataTable extends PureComponent<Props, State> {
 
     return (
       <div className="raw-flux-data-table" data-testid="raw-data-table">
-        <DapperScrollbars
+        <FancyScrollbar
           style={{
             overflowY: 'hidden',
             width: tableWidth,
@@ -42,7 +44,7 @@ class RawFluxDataTable extends PureComponent<Props, State> {
           autoHide={false}
           scrollTop={scrollTop}
           scrollLeft={scrollLeft}
-          onScroll={this.onScrollbarsScroll}
+          setScrollTop={this.onScrollbarsScroll}
         >
           <RawFluxDataGrid
             scrollTop={scrollTop}
@@ -53,7 +55,7 @@ class RawFluxDataTable extends PureComponent<Props, State> {
             data={data}
             key={files[0]}
           />
-        </DapperScrollbars>
+        </FancyScrollbar>
       </div>
     )
   }