Use componentFromHook to create scrollObserver (#118)

Author: Madeline Trotter

bower.json

@@ -31,7 +31,7 @@
     "purescript-random": "^4.0.0",
     "purescript-react-basic": "^13.0.0",
     "purescript-react-basic-emotion": "^4.0.0",
-    "purescript-react-basic-hooks": "^4.0.0",
+    "purescript-react-basic-hooks": "^4.1.0",
     "purescript-react-dnd-basic": "^6.1.4",
     "purescript-record": ">= 1.0.0 < 3.0.0",
     "purescript-simple-json": ">=4.0.0 <7.0.0",

src/Lumi/Components.purs

@@ -1,12 +1,20 @@
-module Lumi.Components where
+module Lumi.Components
+  ( LumiProps
+  , PropsModifier
+  , propsModifier
+  , LumiComponent
+  , lumiComponent
+  , lumiComponentFromHook
+  , lumiElement
+  ) where
 
 import Prelude
 import Data.String (toLower)
 import Effect (Effect)
 import Lumi.Styles.Theme (LumiTheme)
 import Prim.Row (class Lacks)
 import React.Basic.Emotion as Emotion
-import React.Basic.Hooks (JSX, ReactComponent, Render, component, element)
+import React.Basic.Hooks (JSX, ReactComponent, Render, component, componentFromHook, element)
 import Record.Unsafe.Union (unsafeUnion)
 
 type LumiProps props
@@ -46,9 +54,31 @@ lumiComponent name defaults render = do
         { name
         , component: c
         , defaults
-        , className: "lumi-component lumi-" <> toLower name
+        , className: lumiComponentClassName name
         }
 
+lumiComponentFromHook ::
+  forall hooks props r.
+  Lacks "children" props =>
+  Lacks "key" props =>
+  Lacks "ref" props =>
+  String ->
+  { render :: r -> JSX | props } ->
+  (LumiProps ( render :: r -> JSX | props ) -> Render Unit hooks r) ->
+  Effect (LumiComponent ( render :: r -> JSX | props ))
+lumiComponentFromHook name defaults propsToHook = do
+  c <- componentFromHook name propsToHook
+  pure
+    $ LumiComponent
+        { name
+        , component: c
+        , defaults
+        , className: lumiComponentClassName name
+        }
+
+lumiComponentClassName :: String -> String
+lumiComponentClassName name = "lumi-component lumi-" <> toLower name
+
 -- | Render a `LumiComponent`. Similar to `React.Basic.element`, except the second argument
 -- | is an update function rather than a plain record for props. This helps reduce
 -- | the surface area for API updates:

src/Lumi/Components/Styles.purs

@@ -103,7 +103,7 @@ globals = jss
           , margin: "0"
           }
       , "react-basic-ref":
-          { display: "block"
+          { display: "flex"
           , minHeight: "0"
           , minWidth: "0"
           }

src/Lumi/Components/Table.purs

@@ -268,7 +268,7 @@ table = make component
         renderLumiTable self columns \tableRef ->
           [ lumiElement scrollObserver _
               { node = Nullable.notNull tableRef
-              , content = \{ hasScrolledY, hasScrolledX } ->
+              , render = \{ hasScrolledY, hasScrolledX } ->
                   R.table
                     { className:
                         let

src/Lumi/Components2/ScrollObserver.purs

@@ -6,7 +6,7 @@ import Data.Nullable (Nullable)
 import Data.Nullable as Nullable
 import Effect (Effect)
 import Effect.Unsafe (unsafePerformEffect)
-import Lumi.Components (LumiComponent, lumiComponent)
+import Lumi.Components (LumiComponent, lumiComponentFromHook)
 import React.Basic (JSX)
 import React.Basic.Hooks (Hook, UnsafeReference(..), UseEffect, UseState, coerceHook, useEffect, useState, (/\))
 import React.Basic.Hooks as React
@@ -43,17 +43,15 @@ useScrollObserver root =
 
 type ScrollObserverProps
   = ( node :: Nullable Node
-    , content :: { hasScrolledX :: Boolean, hasScrolledY :: Boolean } -> JSX
+    , render :: { 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
+    lumiComponentFromHook "ScrollObserver" defaults (useScrollObserver <<< _.node)
   where
-  defaults = { node: Nullable.null, content: \_ -> mempty }
+  defaults = { node: Nullable.null, render: \_ -> mempty }
 
 foreign import getScrollParent :: Nullable Node -> Effect Element