Add scroll additions

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 #### 2.1.2 (Unreleased)
 
+- [#503](https://github.com/influxdata/clockface/pull/503): Expose `onScroll` and `onUpdate` props in `DapperScrollbars`
 - [#499](https://github.com/influxdata/clockface/pull/499): Fix export for `CTALinkButton`
 - [#492](https://github.com/influxdata/clockface/pull/492): Introduce `RBAC` component that conditionally renders content based on permissions
 

src/Components/DapperScrollbars/DapperScrollbars.tsx

@@ -1,15 +1,33 @@
 // Libraries
-import React, {FunctionComponent, useRef, useState, useEffect} from 'react'
+import React, {
+  FunctionComponent,
+  useRef,
+  useState,
+  useEffect,
+  UIEvent,
+} from 'react'
 import _ from 'lodash'
 import classnames from 'classnames'
 import Scrollbar from 'react-scrollbars-custom'
+import {ScrollState} from 'react-scrollbars-custom/dist/types/types'
 
 // Styles
 import './DapperScrollbars.scss'
 
 // Types
 import {StandardFunctionProps, InfluxColors} from '../../Types'
 
+// react-scrollbars-custom uses a highly unusual type
+// to presumably handle touch and mouse events simultaneously
+export type FusionScrollEvent = UIEvent<HTMLDivElement> & ScrollState
+// Using this custom type makes typescript happy
+// and exposes enough typing to properly interface
+// with the onScroll and onUpdate props
+export type FusionScrollHandler = (
+  scrollValues: FusionScrollEvent,
+  prevScrollValues?: ScrollState
+) => void
+
 interface DapperScrollbarsProps extends StandardFunctionProps {
   /** Toggle display of tracks when no scrolling is necessary */
   removeTracksWhenNotUsed?: boolean
@@ -39,13 +57,19 @@ interface DapperScrollbarsProps extends StandardFunctionProps {
   scrollTop?: number
   /** Horizontal scroll position in pixels */
   scrollLeft?: number
+  /** Function to be called when called scroll event fires */
+  onScroll?: FusionScrollHandler
+  /** Function called after component updated */
+  onUpdate?: FusionScrollHandler
 }
 
 export const DapperScrollbars: FunctionComponent<DapperScrollbarsProps> = ({
   id,
   style,
   children,
   className,
+  onScroll,
+  onUpdate,
   scrollTop = 0,
   scrollLeft = 0,
   autoHide = false,
@@ -63,6 +87,8 @@ export const DapperScrollbars: FunctionComponent<DapperScrollbarsProps> = ({
   removeTrackXWhenNotUsed = true,
 }) => {
   const scrollEl = useRef<any>(null)
+  // State is used here to ensure that the scroll position does not jump when
+  // a component using DapperScrollbars re-renders
   const [scrollTopPos, setScrollTopPos] = useState<number>(Number(scrollTop))
   const [scrollLeftPos, setScrollLeftPos] = useState<number>(Number(scrollLeft))
 
@@ -84,15 +110,33 @@ export const DapperScrollbars: FunctionComponent<DapperScrollbarsProps> = ({
     background: `linear-gradient(to bottom,  ${thumbStartColor} 0%,${thumbStopColor} 100%)`,
   }
 
-  const handleOnScroll = () => {
-    setScrollTopPos(scrollEl.current.scrollTop)
-    setScrollLeftPos(scrollEl.current.scrollLeft)
+  const handleOnScroll: FusionScrollHandler = (
+    scrollValues,
+    prevScrollValues
+  ) => {
+    if (onScroll) {
+      onScroll(scrollValues, prevScrollValues)
+    }
+
+    const {scrollTop, scrollLeft} = scrollValues
+    setScrollTopPos(scrollTop)
+    setScrollLeftPos(scrollLeft)
+  }
+
+  const handleUpdate: FusionScrollHandler = (
+    scrollValues,
+    prevScrollValues
+  ) => {
+    if (onUpdate) {
+      onUpdate(scrollValues, prevScrollValues)
+    }
   }
 
   return (
     <Scrollbar
       ref={scrollEl}
       onScroll={handleOnScroll}
+      onUpdate={handleUpdate}
       data-testid={testID}
       translateContentSizesToHolder={autoSize}
       translateContentSizeYToHolder={autoSizeHeight}

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

@@ -7,7 +7,7 @@ import {useState} from '@storybook/addons'
 import {withKnobs, boolean, color, object, number} from '@storybook/addon-knobs'
 
 // Components
-import {DapperScrollbars} from '../DapperScrollbars'
+import {DapperScrollbars, FusionScrollHandler} from '../DapperScrollbars'
 import {Form} from '../../Form'
 import {Dropdown} from '../../Dropdowns'
 
@@ -28,6 +28,7 @@ const exampleTextDefault = `Try modifying this text to see how scrolling is affe
 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. 
 Art party ramps vice master cleanse ethical scenester. Knausgaard kombucha williamsburg chambray asymmetrical, wolf seitan vaporware swag selfies. Single-origin coffee cloud bread vaporware, authentic sartorial food truck echo park ugh letterpress. IPhone pickled banh mi, lomo fingerstache crucifix letterpress offal lo-fi whatever pok pok chartreuse kitsch banjo.
 Keytar celiac copper mug chia typewriter. Umami crucifix tumblr mixtape taxidermy succulents hammock cardigan narwhal. Vegan four loko disrupt gastropub, pop-up drinking vinegar pinterest semiotics photo booth unicorn ugh pork belly before they sold out scenester. Waistcoat disrupt hashtag vice, raclette flannel farm-to-table butcher iPhone biodiesel. Locavore godard brunch hammock bicycle rights flannel letterpress pabst distillery mixtape jean shorts af chartreuse shoreditch small batch. Banh mi slow-carb brooklyn thundercats, helvetica shoreditch locavore.`
+
 scrollbarStories.add('Scrollbar Example', () => {
   const [selection, setSelection] = useState<string>('Foo')
   const handleSelectionChange = (value: string) => {
@@ -130,3 +131,49 @@ scrollbarStories.add('AutoSize Example', () => (
     </div>
   </div>
 ))
+
+scrollbarStories.add('Synchronized Scrolling', () => {
+  const [scrollbarState, setScrollbarState] = useState<number>(0)
+
+  const scrollBarStyle = {
+    backgroundColor: '#333',
+    width: '200px',
+    height: '300px',
+    margin: '16px',
+  }
+
+  const handleUpdate: FusionScrollHandler = (scrollValues): void => {
+    const {scrollTop} = scrollValues
+
+    setScrollbarState(scrollTop)
+  }
+
+  return (
+    <div className="story--example">
+      <DapperScrollbars
+        style={scrollBarStyle}
+        onScroll={handleUpdate}
+        noScrollX={true}
+        autoHide={false}
+        autoSize={false}
+        thumbStartColor={color('thumbStartColor', '#00C9FF')}
+        thumbStopColor={color('thumbStopColor', '#9394FF')}
+        scrollTop={scrollbarState}
+      >
+        <p>{exampleTextDefault}</p>
+      </DapperScrollbars>
+      <DapperScrollbars
+        style={scrollBarStyle}
+        onScroll={handleUpdate}
+        noScrollX={true}
+        autoHide={false}
+        autoSize={false}
+        thumbStartColor={color('thumbStartColor', '#00C9FF')}
+        thumbStopColor={color('thumbStopColor', '#9394FF')}
+        scrollTop={scrollbarState}
+      >
+        <p>{exampleTextDefault}</p>
+      </DapperScrollbars>
+    </div>
+  )
+})

src/Components/DapperScrollbars/Documentation/DapperScrollbarsSynchronized.md

@@ -0,0 +1,16 @@
+# Synchronized Scrolling
+
+This example uses a single piece of state to synchronize scroll position and behavior between two instances of `DapperScrollbars`. The key to making this work is utilizing both the `scrollTop` and `onScroll` props to create a controlled component.
+
+### Usage
+```tsx
+import {DapperScrollbars} from '@influxdata/clockface'
+```
+
+<!-- STORY -->
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/Dropdowns/DropdownMenu.tsx

@@ -119,6 +119,11 @@ const calculateSelectedPosition = (
   const items = React.Children.map(children, child =>
     _.get(child, 'props.selected', false)
   )
+
+  if (!items) {
+    return 0
+  }
+
   const itemIndex = items.findIndex(item => item === true)
 
   return itemHeight * itemIndex

src/Components/ResourceList/Card/ResourceCardMeta.tsx

@@ -43,7 +43,7 @@ export const ResourceCardMeta = forwardRef<
     let wrappedChildren
 
     if (React.Children.count(children) > 0) {
-      const childArray: JSX.Element[] = React.Children.map(children, child => (
+      const childArray = React.Children.map(children, child => (
         <div className="cf-resource-meta--item">{child}</div>
       ))