Use Maybe in targetValue and targetChecked

Author: Michael Trotter

examples/controlled-input/src/ControlledInput.purs

@@ -2,8 +2,7 @@ module ControlledInput where
 
 import Prelude
 
-import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import Data.Nullable (toMaybe)
+import Data.Maybe (Maybe(..), fromMaybe)
 import React.Basic (ReactComponent, react)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetValue, timeStamp)
@@ -16,14 +15,15 @@ component = react
   , receiveProps: \_ _ _ -> pure unit
   , render: \_ state setState ->
       R.div_
-        [ R.p_ [ R.input { onChange: Events.handler (Events.preventDefault >>> Events.merge { targetValue, timeStamp }) \{ timeStamp, targetValue } ->
-                             setState \_ -> { value: fromMaybe "" (toMaybe targetValue)
-                                            , timeStamp: Just timeStamp
-                                            }
+        [ R.p_ [ R.input { onChange: Events.handler (Events.preventDefault >>> Events.merge { targetValue, timeStamp })
+                             \{ timeStamp, targetValue } -> setState \_ ->
+                                { value: fromMaybe "" targetValue
+                                , timeStamp: Just timeStamp
+                                }
                          , value: state.value
                          }
                ]
         , R.p_ [ R.text ("Current value = " <> show state.value) ]
-        , R.p_ (maybe [] (\ts -> [R.text ("Changed at: " <> show ts)]) state.timeStamp)
+        , R.p_ [ R.text ("Changed at = " <> fromMaybe "never" (show <$> state.timeStamp)) ]
         ]
   }

src/React/Basic/DOM/Events.purs

@@ -35,7 +35,8 @@ import Prelude
 
 import Control.Monad.Eff (Eff)
 import Control.Monad.Eff.Uncurried (EffFn1, mkEffFn1)
-import Data.Nullable (Nullable)
+import Data.Maybe (Maybe)
+import Data.Nullable (toMaybe)
 import Data.Record (delete, get, insert)
 import Data.Symbol (class IsSymbol, SProxy(SProxy))
 import React.Basic (ReactFX)
@@ -175,11 +176,11 @@ foreign import unsafeIsPropagationStopped :: SyntheticEvent -> Boolean
 target :: EventFn SyntheticEvent DOMNode
 target = EventFn \e -> (unsafeCoerce e).target
 
-targetChecked :: EventFn SyntheticEvent (Nullable Boolean)
-targetChecked = EventFn \e -> (unsafeCoerce e).target.checked
+targetChecked :: EventFn SyntheticEvent (Maybe Boolean)
+targetChecked = EventFn \e -> toMaybe (unsafeCoerce e).target.checked
 
-targetValue :: EventFn SyntheticEvent (Nullable String)
-targetValue = EventFn \e -> (unsafeCoerce e).target.value
+targetValue :: EventFn SyntheticEvent (Maybe String)
+targetValue = EventFn \e -> toMaybe (unsafeCoerce e).target.value
 
 timeStamp :: EventFn SyntheticEvent Number
 timeStamp = EventFn \e -> (unsafeCoerce e).timeStamp