-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
UseWindowWidth.purs
52 lines (42 loc) · 1.56 KB
/
UseWindowWidth.purs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
module Example.Hooks.UseWindowWidth
( useWindowWidth
, UseWindowWidth
) where
import Prelude
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Effect.Aff.Class (class MonadAff)
import Effect.Class (liftEffect)
import Halogen as H
import Halogen.Hooks (class HookNewtype, type (<>), Hook, HookM, UseEffect, UseState)
import Halogen.Hooks as Hooks
import Halogen.Query.Event as HE
import Web.Event.Event (EventType(..))
import Web.Event.Event as Event
import Web.HTML as HTML
import Web.HTML.Window as Window
foreign import data UseWindowWidth :: Hooks.HookType
type UseWindowWidth' = UseState (Maybe Int) <> UseEffect <> Hooks.Pure
instance HookNewtype UseWindowWidth UseWindowWidth'
useWindowWidth :: forall m. MonadAff m => Hook m UseWindowWidth (Maybe Int)
useWindowWidth = Hooks.wrap hook
where
hook :: Hook m UseWindowWidth' _
hook = Hooks.do
width /\ widthId <- Hooks.useState Nothing
Hooks.useLifecycleEffect do
subscription <- subscribeToWindow (Hooks.put widthId)
pure $ Just $ Hooks.unsubscribe subscription
Hooks.pure width
where
subscribeToWindow :: (Maybe Int -> HookM m Unit) -> HookM m H.SubscriptionId
subscribeToWindow setWidth = do
let readWidth = setWidth <<< Just <=< liftEffect <<< Window.innerWidth
window <- liftEffect HTML.window
subscriptionId <- Hooks.subscribe do
HE.eventListener
(EventType "resize")
(Window.toEventTarget window)
(Event.target >=> Window.fromEventTarget >>> map readWidth)
readWidth window
pure subscriptionId