Update scrollbar dependency, convert component (#320)

* update scrollbar dependency, convert component

* update changelog

* fix lint errors

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 0.0.33 (Unreleased)
 
+- [#320](https://github.com/influxdata/clockface/pull/320): Convert `DapperScrollbars` component to `FunctionComponent` and update `react-scrollbars-custom` dependency to `4.0.20`
 - [#319](https://github.com/influxdata/clockface/pull/319): Convert `ColorPicker` component family to `FunctionComponent` and wrap with `forwardRef`
 - [#318](https://github.com/influxdata/clockface/pull/318): Convert `Table` component family to `FunctionComponent` and wrap with `forwardRef`
 - [#317](https://github.com/influxdata/clockface/pull/317): Convert `Button` component family to `FunctionComponent` and wrap with `forwardRef`

package.json

@@ -56,7 +56,7 @@
     "react-docgen-typescript-loader": "3.0.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-dom": "^16.5.2",
-    "react-scrollbars-custom": "^4.0.4",
+    "react-scrollbars-custom": "^4.0.20",
     "release-it": "^10.3.1",
     "resolve-url-loader": "^3.0.1",
     "rollup": "^1.16.2",

src/Components/DapperScrollbars/DapperScrollbars.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component, CSSProperties} from 'react'
+import React, {FunctionComponent} from 'react'
 import _ from 'lodash'
 import classnames from 'classnames'
 import Scrollbar from 'react-scrollbars-custom'
@@ -8,137 +8,109 @@ import Scrollbar from 'react-scrollbars-custom'
 import './DapperScrollbars.scss'
 
 // Types
-import {StandardClassProps} from '../../Types'
+import {StandardFunctionProps} from '../../Types'
 
-interface Props extends StandardClassProps {
+interface DapperScrollbarsProps extends StandardFunctionProps {
   /** Toggle display of tracks when no scrolling is necessary */
-  removeTracksWhenNotUsed: boolean
+  removeTracksWhenNotUsed?: boolean
   /** Toggle display of vertical track when no scrolling is necessary */
-  removeTrackYWhenNotUsed: boolean
+  removeTrackYWhenNotUsed?: boolean
   /** Toggle display of horizontal track when no scrolling is necessary */
-  removeTrackXWhenNotUsed: boolean
+  removeTrackXWhenNotUsed?: boolean
   /** Disable scrolling horizontally */
-  noScrollX: boolean
+  noScrollX?: boolean
   /** Disable scrolling vertically */
-  noScrollY: boolean
+  noScrollY?: boolean
   /** Disable scrolling */
-  noScroll: boolean
+  noScroll?: boolean
   /** Gradient start color */
-  thumbStartColor: string
+  thumbStartColor?: string
   /** Gradient end color */
-  thumbStopColor: string
+  thumbStopColor?: string
   /** Hide scrollbar when not actively scrolling */
-  autoHide: boolean
+  autoHide?: boolean
   /** Scroll container will grow to fit the content width and height */
-  autoSize: boolean
+  autoSize?: boolean
   /** Scroll container will grow to fit the content width */
-  autoSizeWidth: boolean
+  autoSizeWidth?: boolean
   /** Scroll container will grow to fit the content height */
-  autoSizeHeight: boolean
+  autoSizeHeight?: boolean
   /** Vertical scroll position in pixels */
-  scrollTop: number
+  scrollTop?: number
   /** Horizontal scroll position in pixels */
-  scrollLeft: number
+  scrollLeft?: number
 }
 
-export class DapperScrollbars extends Component<Props> {
-  public static readonly displayName = 'DapperScrollbars'
+export const DapperScrollbars: FunctionComponent<DapperScrollbarsProps> = ({
+  id,
+  style,
+  children,
+  className,
+  scrollTop = 0,
+  scrollLeft = 0,
+  autoHide = false,
+  autoSize = false,
+  noScroll = false,
+  noScrollX = false,
+  noScrollY = false,
+  autoSizeWidth = false,
+  autoSizeHeight = false,
+  thumbStopColor = '#9394FF',
+  thumbStartColor = '#00C9FF',
+  testID = 'dapper-scrollbars',
+  removeTracksWhenNotUsed = true,
+  removeTrackYWhenNotUsed = true,
+  removeTrackXWhenNotUsed = true,
+}) => {
+  const dapperScrollbarsClass = classnames('cf-dapper-scrollbars', {
+    'cf-dapper-scrollbars--autohide': autoHide,
+    [`${className}`]: className,
+  })
 
-  public static defaultProps = {
-    removeTracksWhenNotUsed: true,
-    removeTrackYWhenNotUsed: true,
-    removeTrackXWhenNotUsed: true,
-    noScrollX: false,
-    noScrollY: false,
-    noScroll: false,
-    thumbStartColor: '#00C9FF',
-    thumbStopColor: '#9394FF',
-    autoHide: false,
-    autoSize: false,
-    autoSizeWidth: false,
-    autoSizeHeight: false,
-    scrollTop: 0,
-    scrollLeft: 0,
-    testID: 'dapper-scrollbars',
+  const thumbXStyle = {
+    background: `linear-gradient(to right,  ${thumbStartColor} 0%,${thumbStopColor} 100%)`,
   }
 
-  public render() {
-    const {
-      removeTracksWhenNotUsed,
-      removeTrackYWhenNotUsed,
-      removeTrackXWhenNotUsed,
-      noScrollX,
-      noScrollY,
-      className,
-      autoHide,
-      autoSize,
-      autoSizeHeight,
-      autoSizeWidth,
-      noScroll,
-      scrollTop,
-      scrollLeft,
-      children,
-      testID,
-      style,
-      id,
-    } = this.props
-
-    const classname = classnames('cf-dapper-scrollbars', {
-      'cf-dapper-scrollbars--autohide': autoHide,
-      [`${className}`]: className,
-    })
-
-    return (
-      <Scrollbar
-        data-testid={testID}
-        translateContentSizesToHolder={autoSize}
-        translateContentSizeYToHolder={autoSizeHeight}
-        translateContentSizeXToHolder={autoSizeWidth}
-        className={classname}
-        style={style}
-        noDefaultStyles={false}
-        removeTracksWhenNotUsed={removeTracksWhenNotUsed}
-        removeTrackYWhenNotUsed={removeTrackYWhenNotUsed}
-        removeTrackXWhenNotUsed={removeTrackXWhenNotUsed}
-        noScrollX={noScrollX}
-        noScrollY={noScrollY}
-        noScroll={noScroll}
-        wrapperProps={{className: 'cf-dapper-scrollbars--wrapper'}}
-        contentProps={{className: 'cf-dapper-scrollbars--content'}}
-        trackXProps={{className: 'cf-dapper-scrollbars--track-x'}}
-        thumbXProps={{
-          style: this.thumbXStyle,
-          className: 'cf-dapper-scrollbars--thumb-x',
-        }}
-        trackYProps={{className: 'cf-dapper-scrollbars--track-y'}}
-        thumbYProps={{
-          style: this.thumbYStyle,
-          className: 'cf-dapper-scrollbars--thumb-y',
-        }}
-        scrollTop={scrollTop}
-        scrollLeft={scrollLeft}
-        id={id}
-        download={null}
-        inlist={null}
-      >
-        {children}
-      </Scrollbar>
-    )
-  }
-
-  private get thumbXStyle(): CSSProperties {
-    const {thumbStartColor, thumbStopColor} = this.props
-
-    return {
-      background: `linear-gradient(to right,  ${thumbStartColor} 0%,${thumbStopColor} 100%)`,
-    }
+  const thumbYStyle = {
+    background: `linear-gradient(to bottom,  ${thumbStartColor} 0%,${thumbStopColor} 100%)`,
   }
 
-  private get thumbYStyle(): CSSProperties {
-    const {thumbStartColor, thumbStopColor} = this.props
-
-    return {
-      background: `linear-gradient(to bottom,  ${thumbStartColor} 0%,${thumbStopColor} 100%)`,
-    }
-  }
+  return (
+    <Scrollbar
+      data-testid={testID}
+      translateContentSizesToHolder={autoSize}
+      translateContentSizeYToHolder={autoSizeHeight}
+      translateContentSizeXToHolder={autoSizeWidth}
+      className={dapperScrollbarsClass}
+      style={style}
+      noDefaultStyles={false}
+      removeTracksWhenNotUsed={removeTracksWhenNotUsed}
+      removeTrackYWhenNotUsed={removeTrackYWhenNotUsed}
+      removeTrackXWhenNotUsed={removeTrackXWhenNotUsed}
+      noScrollX={noScrollX}
+      noScrollY={noScrollY}
+      noScroll={noScroll}
+      wrapperProps={{className: 'cf-dapper-scrollbars--wrapper'}}
+      contentProps={{className: 'cf-dapper-scrollbars--content'}}
+      trackXProps={{className: 'cf-dapper-scrollbars--track-x'}}
+      thumbXProps={{
+        style: thumbXStyle,
+        className: 'cf-dapper-scrollbars--thumb-x',
+      }}
+      trackYProps={{className: 'cf-dapper-scrollbars--track-y'}}
+      thumbYProps={{
+        style: thumbYStyle,
+        className: 'cf-dapper-scrollbars--thumb-y',
+      }}
+      scrollTop={scrollTop}
+      scrollLeft={scrollLeft}
+      id={id}
+      download={null}
+      inlist={null}
+    >
+      {children}
+    </Scrollbar>
+  )
 }
+
+DapperScrollbars.displayName = 'DapperScrollbars'

src/Components/DapperScrollbars/DapperScrollbars.stories.tsx → src/Components/DapperScrollbars/Documentation/DapperScrollbars.stories.tsx

@@ -15,7 +15,7 @@ import {
 import {jsxDecorator} from 'storybook-addon-jsx'
 
 // Components
-import {DapperScrollbars} from './DapperScrollbars'
+import {DapperScrollbars} from '../DapperScrollbars'
 
 // Notes
 import DapperScrollbarsExample1Readme from './DapperScrollbarsExample1.md'
@@ -26,7 +26,11 @@ const scrollbarStories = storiesOf('Utilities|Scrollbars', module)
   .addDecorator(jsxDecorator)
 
 const fixedDefaultStyle = {width: '300px', height: '180px'}
-const autoSizeDefaultStyle = {width: '300px', maxHeight: '300px'}
+const autoSizeDefaultStyle = {
+  width: '300px',
+  maxWidth: '300px',
+  maxHeight: '300px',
+}
 const contentStyle = {width: '600px'}
 const exampleTextDefault = `Try modifying this text to see how scrolling is affected! Distillery raclette swag, actually selfies cred neutra put a bird on it mlkshk hexagon fam. Iceland man braid echo park succulents flexitarian occupy. Organic health goth activated charcoal helvetica poke beard swag tacos drinking vinegar pop-up kickstarter wolf normcore lyft chillwave. Microdosing migas blog intelligentsia air plant typewriter, echo park mumblecore kombucha yuccie wayfarers poutine actually locavore distillery.
 Blue bottle four loko kogi woke activated charcoal forage tote bag sartorial. Hammock normcore lo-fi tbh trust fund man bun post-ironic locavore DIY plaid wolf tumeric. Poutine cred microdosing, typewriter jianbing marfa vegan. Kombucha four dollar toast organic bespoke af cred freegan meditation biodiesel tilde chia. Tofu microdosing retro lo-fi, DIY raclette kitsch. 

yarn.lock

@@ -3493,10 +3493,10 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-cnbuilder@^1.0.0:
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/cnbuilder/-/cnbuilder-1.0.14.tgz#849f323f0b054b084b35560e40ef446ef9eea8a4"
-  integrity sha512-Lna83KYpzRZjp/Kox64m4McIY1GfC9iD587kEKOPXFj6cyM2EToElEQkBbaTBkp3UY1Svi8Q3oj+++/1VCXORA==
+cnbuilder@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/cnbuilder/-/cnbuilder-1.1.7.tgz#04ef08d278efd69bc65a95b087328455a85a2eef"
+  integrity sha512-8D9dpabOVOh7GX/qPZ60sJpqxHaiLqSDsuZOYH1TvoNkgMrO7BJHCbNepHHoglSdU//M2sjLHaL9Vu0qibSV2A==
 
 coa@^2.0.2:
   version "2.0.2"
@@ -8973,14 +8973,22 @@ react-dom@^16.5.2, react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
-react-draggable@^3.1.1, react-draggable@^3.3.0:
+react-draggable@^3.1.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.0.tgz#2ed7ea3f92e7d742d747f9e6324860606cd4d997"
   integrity sha512-U7/jD0tAW4T0S7DCPK0kkKLyL0z61sC/eqU+NUfDjnq+JtBKaYKDHpsK2wazctiA4alEzCXUnzkREoxppOySVw==
   dependencies:
     classnames "^2.2.5"
     prop-types "^15.6.0"
 
+react-draggable@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.2.tgz#966ef1d90f2387af3c2d8bd3516f601ea42ca359"
+  integrity sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-element-to-jsx-string@^14.0.2:
   version "14.0.2"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.0.2.tgz#586d248bb2416855aa6ac3881e18726832c146d2"
@@ -9090,14 +9098,14 @@ react-resize-detector@^4.0.5:
     raf-schd "^4.0.0"
     resize-observer-polyfill "^1.5.1"
 
-react-scrollbars-custom@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/react-scrollbars-custom/-/react-scrollbars-custom-4.0.5.tgz#3fa702aa849eebf9cc9f47a7dec713da423898a6"
-  integrity sha512-u6eHUFqRx3G3YymRD18w7ntA0U4NnbchzX29EaHbU+yCd5I2LEOkoCuexEObMoJVC9lovwF78BSQY8Sfb8IaQQ==
+react-scrollbars-custom@^4.0.20:
+  version "4.0.20"
+  resolved "https://registry.yarnpkg.com/react-scrollbars-custom/-/react-scrollbars-custom-4.0.20.tgz#5cdeb864aacfcc5b6e9c7e532cff1a5ca290b739"
+  integrity sha512-mYEljeOpYabspUrSEFf52bwzUcAd6lU1sgMd/Hp0jh9sOeps1fs/FoiSfFqDZWcshMTekTia/GPYbwhCJOFa9w==
   dependencies:
-    cnbuilder "^1.0.0"
-    react-draggable "^3.3.0"
-    zoom-level "^1.1.0"
+    cnbuilder "^1.1.7"
+    react-draggable "^3.3.2"
+    zoom-level "^1.2.4"
 
 react-select@^2.2.0:
   version "2.4.4"
@@ -11523,7 +11531,7 @@ yargs@^12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-zoom-level@^1.1.0:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/zoom-level/-/zoom-level-1.1.13.tgz#cad96a5964eff69f054b733b1de1facb5c629aa7"
-  integrity sha512-BFNE30A1ifQd217pzEaqftgz+NcedJbedj4rMCRBnoJ0N2J2n01hvIRdz4fMXFWEeCOIYPvRgojyNI1EyuCdiw==
+zoom-level@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/zoom-level/-/zoom-level-1.2.4.tgz#52bc5ae3af945cac82f9f685e8707fa2c9b962e2"
+  integrity sha512-nGFUhyU3Y4jWh6l+hYCVVUxu3vrD0i/RkumJRzYGU0COMWMs2Szs84mltacd64R9zJcxwKckWQN/KKbfB1btVA==