readRef and writeRef through ffi

Author: Marcin Szamotulski

bower.json

@@ -19,7 +19,8 @@
   "dependencies": {
     "purescript-eff": "^3.0.0",
     "purescript-prelude": "^3.0.0",
-    "purescript-unsafe-coerce": "^3.0.0"
+    "purescript-unsafe-coerce": "^3.0.0",
+    "purescript-dom": "^4.5.0"
   },
   "devDependencies": {
     "purescript-console": "^3.0.0",

src/React.js

@@ -40,6 +40,30 @@ function getChildren(this_) {
 }
 exports.getChildren = getChildren;
 
+function readRefImpl (this_) {
+  return function(name) {
+    return function() {
+      var refs = this_.refs || {};
+      return refs[name];
+    }
+  }
+}
+exports.readRefImpl = readRefImpl;
+
+function writeRef(this_) {
+  return function(name) {
+    return function(node) {
+      return function() {
+        var refs = this_.refs || {};
+        refs[name] = node;
+        this_.refs = refs;
+        return {};
+      }
+    }
+  }
+}
+exports.writeRef = writeRef;
+
 function writeState(this_) {
   return function(state){
     return function(){

src/React.purs

@@ -44,6 +44,7 @@ module React
   , getProps
   , getRefs
   , readRef
+  , writeRef
   , getChildren
 
   , readState
@@ -68,9 +69,9 @@ module React
 import Prelude
 
 import Control.Monad.Eff (kind Effect, Eff)
-import DOM.Node.Types (Node, readNode)
-import Data.Foreign (F, Foreign)
-import Data.Foreign.Index (readProp)
+import DOM.Node.Types (Node)
+import Data.Maybe (Maybe)
+import Data.Nullable (Nullable, toMaybe)
 import Unsafe.Coerce (unsafeCoerce)
 
 -- | Name of a tag.
@@ -300,11 +301,22 @@ foreign import getRefs :: forall props state access eff.
   Eff (refs :: ReactRefs (read :: Read | access) | eff) Refs
 
 -- | Read named ref from Refs
-readRef :: forall access eff.
+foreign import readRefImpl :: forall props state access eff.
+  ReactThis props state ->
+  String ->
+  Eff (refs :: ReactRefs (read :: Read | access) | eff) (Nullable Node)
+
+readRef :: forall props state access eff.
+  ReactThis props state ->
+  String ->
+  Eff (refs :: ReactRefs (read :: Read | access) | eff) (Maybe Node)
+readRef this name = toMaybe <$> readRefImpl this name
+
+foreign import writeRef :: forall props state access eff.
+  ReactThis props state ->
   String ->
-  Foreign ->
-  Eff (refs :: ReactRefs (read :: Read | access) | eff) (F Node)
-readRef name refs = pure $ join (readNode <$> readProp name refs)
+  Node ->
+  Eff (refs :: ReactRefs (write :: Write | access) | eff) Unit
 
 -- | Read the component children property.
 foreign import getChildren :: forall props state eff.

src/React/DOM/Props.purs

@@ -1,6 +1,10 @@
 module React.DOM.Props where
 
-import React (Event, EventHandlerContext, KeyboardEvent, MouseEvent, handle)
+import Control.Monad.Eff (Eff)
+import Control.Monad.Eff.Unsafe (unsafePerformEff)
+import DOM.Node.Types (Node)
+import Prelude (Unit, (<<<))
+import React (Event, EventHandlerContext, KeyboardEvent, MouseEvent, ReactRefs, Write, handle)
 
 foreign import data Props :: Type
 
@@ -300,9 +304,13 @@ readOnly = unsafeMkProps "readOnly"
 ref :: String -> Props
 ref = unsafeMkProps "ref"
 
+-- | You can use `writeRef` to store a reference on `Refs`.
+-- | ``` purescrript
+-- | div [ refCb (writeRef this "inputEl") ] [...]
+-- | ```
 refCb
-  :: forall props state
-   . (ReactThis props state -> Eff (refs :: ReactRefs (write :: Write | access) | eff)) 
+  :: forall access eff
+   . (Node -> Eff (refs :: ReactRefs (write :: Write | access) | eff) Unit)
   -> Props
 refCb cb = unsafeMkProps "ref" (unsafePerformEff <<< cb)