|
| 1 | +module ComponentsInputReactHooks.Main where |
| 2 | + |
| 3 | +import Prelude |
| 4 | +import Data.Maybe (Maybe(..)) |
| 5 | +import Effect (Effect) |
| 6 | +import Effect.Exception (throw) |
| 7 | +import React.Basic.DOM (render) |
| 8 | +import React.Basic.DOM as R |
| 9 | +import React.Basic.Events (handler_) |
| 10 | +import React.Basic.Hooks (Component, component, useState, (/\)) |
| 11 | +import React.Basic.Hooks as React |
| 12 | +import Web.HTML (window) |
| 13 | +import Web.HTML.HTMLDocument (body) |
| 14 | +import Web.HTML.HTMLElement (toElement) |
| 15 | +import Web.HTML.Window (document) |
| 16 | + |
| 17 | +main :: Effect Unit |
| 18 | +main = do |
| 19 | + body <- body =<< document =<< window |
| 20 | + case body of |
| 21 | + Nothing -> throw "Could not find body." |
| 22 | + Just b -> do |
| 23 | + container <- mkContainer |
| 24 | + render (container unit) (toElement b) |
| 25 | + |
| 26 | +mkContainer :: Component Unit |
| 27 | +mkContainer = do |
| 28 | + display <- mkDisplay |
| 29 | + component "Container" \_ -> React.do |
| 30 | + state /\ setState <- useState 0 |
| 31 | + pure |
| 32 | + $ R.div_ |
| 33 | + [ R.ul_ |
| 34 | + [ display state |
| 35 | + , display (state * 2) |
| 36 | + , display (state * 3) |
| 37 | + , display (state * 10) |
| 38 | + , display (state * state) |
| 39 | + ] |
| 40 | + , R.button |
| 41 | + { onClick: handler_ (setState (_ + 1)) |
| 42 | + , children: [ R.text "+1" ] |
| 43 | + } |
| 44 | + , R.button |
| 45 | + { onClick: handler_ (setState (_ - 1)) |
| 46 | + , children: [ R.text "-1" ] |
| 47 | + } |
| 48 | + ] |
| 49 | + |
| 50 | +mkDisplay :: Component Int |
| 51 | +mkDisplay = |
| 52 | + component "Display" \n -> |
| 53 | + pure |
| 54 | + $ R.div_ |
| 55 | + [ R.text "My input value is: " |
| 56 | + , R.strong_ [ R.text (show n) ] |
| 57 | + ] |
0 commit comments