Expose ScrollObserver as a hook (#115)

Author: Madeline Trotter

src/Lumi/Components/Table.js

@@ -26,55 +26,3 @@ exports.isRightClick = function(e) {
 exports.hasWindowSelection = function() {
   return window.getSelection().type === "Range";
 };
-
-exports.scrollObserver = function ScrollObserver(props) {
-  var yArr = React.useState(false);
-  var hasScrolledY = yArr[0];
-  var setHasScrolledY = yArr[1];
-  var xArr = React.useState(false);
-  var hasScrolledX = xArr[0];
-  var setHasScrolledX = xArr[1];
-  React.useEffect(
-    function() {
-      var scrollParent = getScrollParent(props.node);
-      if (scrollParent == null) return;
-      function onScroll() {
-        setHasScrolledY(scrollParent.scrollTop > 0);
-        setHasScrolledX(scrollParent.scrollLeft > 0);
-      }
-      onScroll();
-      scrollParent.addEventListener("scroll", onScroll, { passive: true });
-      return function() {
-        scrollParent.removeEventListener("scroll", onScroll, { passive: true });
-      };
-    },
-    [props.root]
-  );
-  return props.render({
-    hasScrolledY: hasScrolledY,
-    hasScrolledX: hasScrolledX
-  });
-};
-
-// Walks up the DOM tree starting at the given node to find
-// the first parent with a scroll bar (including auto, which
-// on some devices hides the scroll bar until hovered).
-function getScrollParent(node) {
-  var isElement = node instanceof HTMLElement;
-  var computedStyle = isElement && window.getComputedStyle(node);
-  var overflowY = computedStyle && computedStyle.overflowY;
-  var overflowX = computedStyle && computedStyle.overflowX;
-  var isScrollable =
-    (overflowY &&
-      !(overflowY.includes("visible") || overflowY.includes("hidden"))) ||
-    (overflowX &&
-      !(overflowX.includes("visible") || overflowX.includes("hidden")));
-
-  if (!node) {
-    return null;
-  } else if (isScrollable && node.scrollHeight >= node.clientHeight) {
-    return node;
-  }
-
-  return getScrollParent(node.parentNode) || document.body;
-}

src/Lumi/Components/Table.purs

@@ -17,18 +17,21 @@ import Data.Maybe (Maybe(..), fromMaybe, isJust, isNothing, maybe)
 import Data.Monoid (guard)
 import Data.Newtype (class Newtype, un)
 import Data.Nullable (Nullable, toMaybe)
+import Data.Nullable as Nullable
 import Data.String (contains, joinWith, Pattern(..))
 import Effect (Effect)
 import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, runEffectFn1, runEffectFn2)
 import JSS (JSS, jss)
+import Lumi.Components (lumiElement)
 import Lumi.Components.Color (colors)
 import Lumi.Components.Icon (IconType(ArrowUp, ArrowDown), icon_)
 import Lumi.Components.Input (CheckboxState(..), checkbox, input)
 import Lumi.Components.Link as Link
 import Lumi.Components.Table.FilterDropdown (Item, filterDropdown)
 import Lumi.Components.Text (subtext_)
 import Lumi.Components.ZIndex (ziTableHeader, ziTableHeaderMenu, ziTableLockedColumn, ziTableLockedColumnHeader)
-import React.Basic (Component, JSX, ReactComponent, createComponent, element, empty, keyed, make, readProps, readState)
+import Lumi.Components2.ScrollObserver (scrollObserver)
+import React.Basic (Component, JSX, createComponent, element, empty, keyed, make, readProps, readState)
 import React.Basic.DOM as R
 import React.Basic.DOM.Components.GlobalEvents (windowEvent)
 import React.Basic.DOM.Components.Ref (QuerySelector(..), selectorRef)
@@ -263,9 +266,9 @@ table = make component
             else self.props.columns
       in
         renderLumiTable self columns \tableRef ->
-          [ element scrollObserver
-              { node: tableRef
-              , render: \{ hasScrolledY, hasScrolledX } ->
+          [ lumiElement scrollObserver _
+              { node = Nullable.notNull tableRef
+              , content = \{ hasScrolledY, hasScrolledX } ->
                   R.table
                     { className:
                         let
@@ -612,12 +615,6 @@ foreign import isRightClick :: Event -> Boolean
 
 foreign import hasWindowSelection :: Effect Boolean
 
-foreign import scrollObserver
-  :: ReactComponent
-      { node :: Node
-      , render :: { hasScrolledY :: Boolean, hasScrolledX :: Boolean } -> JSX
-      }
-
 styles :: JSS
 styles = jss
   { "@global":

src/Lumi/Components2/ScrollObserver.js

@@ -0,0 +1,30 @@
+"use strict";
+
+// Walks up the DOM tree starting at the given node to find
+// the first parent with a scroll bar (including auto, which
+// on some devices hides the scroll bar until hovered).
+exports.getScrollParent = node => () => {
+  const isElement = node instanceof HTMLElement;
+  const computedStyle = isElement && window.getComputedStyle(node);
+  const overflowY = computedStyle && computedStyle.overflowY;
+  const overflowX = computedStyle && computedStyle.overflowX;
+  const isScrollable =
+    (overflowY &&
+      !(overflowY.includes("visible") || overflowY.includes("hidden"))) ||
+    (overflowX &&
+      !(overflowX.includes("visible") || overflowX.includes("hidden")));
+
+  if (!node) {
+    return document.body;
+  } else if (isScrollable && node.scrollHeight >= node.clientHeight) {
+    return node;
+  } else {
+    return getScrollParent(node.parentNode);
+  }
+};
+
+exports.addPassiveEventListener = type => listener => capture => target => () =>
+  target.addEventListener(type, listener, { passive: true, capture });
+
+exports.removePassiveEventListener = type => listener => capture => target => () =>
+  target.removeEventListener(type, listener, { passive: true, capture });

src/Lumi/Components2/ScrollObserver.purs

@@ -0,0 +1,76 @@
+module Lumi.Components2.ScrollObserver where
+
+import Prelude
+import Data.Newtype (class Newtype)
+import Data.Nullable (Nullable)
+import Data.Nullable as Nullable
+import Effect (Effect)
+import Effect.Unsafe (unsafePerformEffect)
+import Lumi.Components (LumiComponent, lumiComponent)
+import React.Basic (JSX)
+import React.Basic.Hooks (Hook, UnsafeReference(..), UseEffect, UseState, coerceHook, useEffect, useState, (/\))
+import React.Basic.Hooks as React
+import Web.DOM (Element, Node)
+import Web.DOM.Element (scrollLeft, scrollTop)
+import Web.DOM.Element as Element
+import Web.Event.Event (EventType(..))
+import Web.Event.EventTarget (EventListener, EventTarget, eventListener)
+
+newtype UseScrollObserver hooks
+  = UseScrollObserver (UseEffect (UnsafeReference (Nullable Node)) (UseState Boolean (UseState Boolean hooks)))
+
+derive instance ntUseScrollObserver :: Newtype (UseScrollObserver hooks) _
+
+useScrollObserver :: Nullable Node -> Hook UseScrollObserver { hasScrolledX :: Boolean, hasScrolledY :: Boolean }
+useScrollObserver root =
+  coerceHook React.do
+    hasScrolledY /\ setHasScrolledY <- useState false
+    hasScrolledX /\ setHasScrolledX <- useState false
+    useEffect (UnsafeReference root) do
+      scrollParent <- getScrollParent root
+      let
+        onScroll = do
+          top <- scrollTop scrollParent
+          left <- scrollLeft scrollParent
+          setHasScrolledY \_ -> top > 0.0
+          setHasScrolledX \_ -> left > 0.0
+      onScrollListener <- eventListener \_ -> onScroll
+      onScroll
+      Element.toEventTarget scrollParent # addPassiveEventListener (EventType "scroll") onScrollListener false
+      pure do
+        Element.toEventTarget scrollParent # removePassiveEventListener (EventType "scroll") onScrollListener false
+    pure { hasScrolledY, hasScrolledX }
+
+type ScrollObserverProps
+  = ( node :: Nullable Node
+    , content :: { hasScrolledX :: Boolean, hasScrolledY :: Boolean } -> JSX
+    )
+
+scrollObserver :: LumiComponent ScrollObserverProps
+scrollObserver =
+  unsafePerformEffect do
+    lumiComponent "ScrollObserver" defaults \props -> React.do
+      hasScrolled <- useScrollObserver props.node
+      pure $ props.content hasScrolled
+  where
+  defaults = { node: Nullable.null, content: \_ -> mempty }
+
+foreign import getScrollParent :: Nullable Node -> Effect Element
+
+-- | Adds a listener to an event target. The boolean argument indicates whether
+-- | the listener should be added for the "capture" phase.
+foreign import addPassiveEventListener ::
+  EventType ->
+  EventListener ->
+  Boolean ->
+  EventTarget ->
+  Effect Unit
+
+-- | Removes a listener to an event target. The boolean argument indicates
+-- | whether the listener should be removed for the "capture" phase.
+foreign import removePassiveEventListener ::
+  EventType ->
+  EventListener ->
+  Boolean ->
+  EventTarget ->
+  Effect Unit