**Feature:** TopbarSelect hooks

src/TopbarSelect/TopbarSelect.tsx

@@ -1,9 +1,9 @@
-import { Cancelable } from "lodash"
-import debounce from "lodash/debounce"
-import * as React from "react"
+import React, { useRef, useState } from "react"
 
 import ContextMenu, { ContextMenuProps } from "../ContextMenu/ContextMenu"
 import Icon from "../Icon/Icon"
+import useDebouncedCallback from "../useDebouncedCallback"
+import useWindowEventListener from "../useWindowEventListener"
 import styled from "../utils/styled"
 
 export interface TopbarSelectProps {
@@ -19,10 +19,6 @@ export interface TopbarSelectProps {
   onChange?: (newLabel: string | React.ReactElement<any>) => void
 }
 
-export interface State {
-  renderedWidth?: number
-}
-
 const TopbarSelectContainer = styled("div")<{ isActive: boolean }>`
   line-height: 1;
   height: ${props => props.theme.topbarHeight}px;
@@ -65,73 +61,47 @@ const TopbarSelectLabel = styled("p")`
   font-weight: ${props => props.theme.font.weight.medium};
 `
 
-class TopbarSelect extends React.Component<TopbarSelectProps, Readonly<State>> {
-  public state: State = {
-    renderedWidth: undefined,
-  }
-
-  private containerRef = React.createRef<HTMLDivElement>()
-
-  public componentDidMount() {
-    this.updateRenderedWidth()
-    window.addEventListener("resize", this.handleResize)
-  }
-
-  public componentWillUnmount() {
-    window.removeEventListener("resize", this.handleResize)
-  }
-
-  public componentDidUpdate() {
-    this.updateRenderedWidth()
-  }
+const TopbarSelect = ({ label, selected, items, onChange, ...props }: TopbarSelectProps) => {
+  const [containerWidth, setContainerWidth] = useState(0)
 
-  /**
-   * Explicit typing is required here in order to give the typescript compiler access to typings
-   * used to work out type definitions for the debounce method.
-   * @todo look into making this unnecessary.
-   */
-  public handleResize: (() => void) & Cancelable = debounce(() => {
-    this.updateRenderedWidth()
-  }, 200)
+  const containerRef = useRef<HTMLDivElement>(null)
 
-  private updateRenderedWidth() {
-    if (!this.containerRef || this.containerRef.current === null) {
+  const updateContainerWidth = () => {
+    if (!containerRef.current) {
       return
     }
-    const node = this.containerRef.current
-    const renderedWidth = node.clientWidth
-    if (renderedWidth !== this.state.renderedWidth) {
-      this.setState(() => ({
-        renderedWidth,
-      }))
+
+    if (containerRef.current.clientWidth !== containerWidth) {
+      setContainerWidth(containerRef.current.clientWidth)
     }
   }
 
-  public render() {
-    const { label, selected, items, onChange, ...props } = this.props
-    return (
-      <ContextMenu
-        condensed
-        items={items}
-        width={this.state.renderedWidth}
-        onClick={newItem => {
-          if (onChange) {
-            onChange(newItem.label)
-          }
-        }}
-      >
-        {isActive => (
-          <TopbarSelectContainer {...props} isActive={isActive} ref={this.containerRef}>
-            <TopbarSelectLabel>{label}</TopbarSelectLabel>
-            <TopbarSelectValue>
-              <TopbarSelectValueSpan active={Boolean(selected)}>{selected}</TopbarSelectValueSpan>
-              <Icon color="color.text.lightest" name={isActive ? "CaretUp" : "CaretDown"} size={12} />
-            </TopbarSelectValue>
-          </TopbarSelectContainer>
-        )}
-      </ContextMenu>
-    )
-  }
+  const debouncedUpdateRenderedWidth = useDebouncedCallback(updateContainerWidth, 100, [])
+
+  useWindowEventListener("resize", debouncedUpdateRenderedWidth)
+
+  return (
+    <ContextMenu
+      condensed
+      items={items}
+      width={containerWidth}
+      onClick={newItem => {
+        if (onChange) {
+          onChange(newItem.label)
+        }
+      }}
+    >
+      {isActive => (
+        <TopbarSelectContainer {...props} isActive={isActive} ref={containerRef}>
+          <TopbarSelectLabel>{label}</TopbarSelectLabel>
+          <TopbarSelectValue>
+            <TopbarSelectValueSpan active={Boolean(selected)}>{selected}</TopbarSelectValueSpan>
+            <Icon color="color.text.lightest" name={isActive ? "CaretUp" : "CaretDown"} size={12} />
+          </TopbarSelectValue>
+        </TopbarSelectContainer>
+      )}
+    </ContextMenu>
+  )
 }
 
 export default TopbarSelect

src/useDebounce/README.md

@@ -0,0 +1,22 @@
+Creates a debounced [state,setState] method that delays setting the new state until after desired milliseconds have elapsed since the last time an attempt to update the state was made.
+
+## Basic Usage
+
+```jsx
+import React, { useState, useEffect } from "react"
+
+const MyComponent = ({ defaultValue }) => {
+  const [value, setValue] = useState(defaultValue)
+  const debouncedText = useDebounce(value, 2000)
+
+  return (
+    <div>
+      <input defaultValue={defaultValue} onChange={e => setValue(e.target.value)} />
+      <p>Debounced value: {debouncedText}</p>
+      <p>Current value: {value}</p>
+    </div>
+  )
+}
+
+;<MyComponent defaultValue="Hello world" />
+```

src/useDebounce/index.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react"
+
+// ref https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci
+
+/**
+ * debounce hook - debounces values
+ */
+export function useDebounce<T>(value: T, delay: number) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    // Set debouncedValue to value (passed in) after the specified delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    // Return a cleanup function that will be called every time ...
+    // ... useEffect is re-called. useEffect will only be re-called ...
+    // ... if value changes (see the inputs array below).
+    // This is how we prevent debouncedValue from changing if value is ...
+    // ... changed within the delay period. Timeout gets cleared and restarted.
+    // To put it in context, if the user is typing within our app's ...
+    // ... search box, we don't want the debouncedValue to update until ...
+    // ... they've stopped typing for more than 500ms.
+    return () => {
+      clearTimeout(handler)
+    }
+  }, // You could also add the "delay" var to inputs array if you ... // Only re-call effect if value changes
+  // ... need to be able to change that dynamically.
+  [value, delay])
+
+  return debouncedValue
+}
+
+export default useDebounce

src/useDebouncedCallback/README.md

@@ -0,0 +1,26 @@
+## Usage
+
+Similar to UseDebounce but a debounced Callback is returned and you can do prelim calculations prior to setting the Value.
+
+```jsx
+//import useDebouncedCallbacks from '@operational/ui/src/useDebouncedCallbacks';
+function UseDebouncedCBExample({ defaultValue }) {
+  const [value, setValue] = useState(defaultValue)
+  const debouncedFunction = useDebouncedCallback(
+    value => {
+      setValue(value)
+    },
+    2000,
+    [],
+  )
+
+  return (
+    <div>
+      <input defaultValue={defaultValue} onChange={e => debouncedFunction(e.target.value)} />
+      <p>Debounced value: {value}</p>
+    </div>
+  )
+}
+
+;<UseDebouncedCBExample defaultValue="Hello world" />
+```

src/useDebouncedCallback/index.ts

@@ -0,0 +1,30 @@
+import { DependencyList, useCallback, useEffect, useRef } from "react"
+
+type AnyFunc = (...args: any[]) => any
+
+type ArgumentTypes<F extends AnyFunc> = F extends (...args: infer A) => any ? A : never
+
+/**
+ * useDebounced Callback wraps a callback within useCallback and returns
+ */
+
+export function useDebouncedCallback<T extends AnyFunc>(callback: T, delay: number, deps: DependencyList) {
+  const fnTimeoutHandler = useRef<any>(null)
+  const debouncedFn = useCallback(callback, deps)
+
+  useEffect(
+    () => () => {
+      clearTimeout(fnTimeoutHandler.current)
+    },
+    [],
+  )
+
+  return (...args: ArgumentTypes<T>) => {
+    clearTimeout(fnTimeoutHandler.current)
+    fnTimeoutHandler.current = setTimeout(() => {
+      debouncedFn(...args)
+    }, delay)
+  }
+}
+
+export default useDebouncedCallback

src/useWindowEventListener/README.md

@@ -0,0 +1,11 @@
+## Usage
+
+TODO
+
+```jsx
+const MyComponent = () => {
+  return <>TODO</>
+}
+
+;<MyComponent />
+```

src/useWindowEventListener/index.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react"
+
+/**
+ * Hook version of window.addEventListener.
+ */
+function useWindowEventListener<K extends keyof GlobalEventHandlersEventMap>(
+  type: K,
+  listener: EventListenerOrEventListenerObject,
+  addOptions?: AddEventListenerOptions,
+  removeOptions?: EventListenerOptions,
+) {
+  useEffect(() => {
+    window.addEventListener(type, listener, addOptions)
+    return () => window.removeEventListener(type, listener, removeOptions)
+  }, [])
+}
+
+export default useWindowEventListener