Add support for createRef API

src/React.purs

@@ -32,7 +32,6 @@ module React
   , pureComponentWithDerivedState
   , statelessComponent
   , ReactClass
-  , ReactRef
   , getProps
   , getState
   , setState
@@ -68,11 +67,11 @@ module React
 
 import Prelude
 
-import Data.Nullable (Nullable)
 import Effect (Effect)
 import Effect.Exception (Error)
 import Effect.Uncurried (EffectFn1)
 import Prim.Row as Row
+import React.Ref as Ref
 import Type.Row (type (+))
 import Unsafe.Coerce (unsafeCoerce)
 
@@ -252,10 +251,6 @@ foreign import data ReactClass :: Type -> Type
 
 foreign import fragment :: ReactClass { children :: Children }
 
--- | Type for React refs. This type is opaque, but you can use `Data.Foreign`
--- | and `DOM` to validate the underlying representation.
-foreign import data ReactRef :: Type
-
 -- | Read the component props.
 foreign import getProps :: forall props state.
   ReactThis props state ->
@@ -340,7 +335,7 @@ class ReactPropFields (required :: # Type) (given :: # Type)
 
 type ReservedReactPropFields r =
   ( key :: String
-  , ref :: SyntheticEventHandler (Nullable ReactRef)
+  , ref :: Ref.RefHandler Ref.ReactInstance
   | r
   )
 

src/React/DOM/Props.purs

@@ -2,10 +2,9 @@ module React.DOM.Props where
 
 import Prelude
 
-import Data.Nullable (Nullable)
 import Effect (Effect)
 import Effect.Uncurried (mkEffectFn1)
-import React (ReactRef)
+import React.Ref as Ref
 import React.SyntheticEvent
   ( SyntheticEvent
   , SyntheticAnimationEvent
@@ -20,6 +19,7 @@ import React.SyntheticEvent
   , SyntheticUIEvent
   , SyntheticWheelEvent
   )
+import Web.HTML.HTMLElement (HTMLElement)
 
 foreign import data Props :: Type
 
@@ -894,8 +894,8 @@ onScrollCapture f = unsafeMkProps "onScrollCapture" (mkEffectFn1 f)
 onWheelCapture :: (SyntheticWheelEvent -> Effect Unit) -> Props
 onWheelCapture f = unsafeMkProps "onWheelCapture" (mkEffectFn1 f)
 
-ref :: (Nullable ReactRef -> Effect Unit) -> Props
-ref f = unsafeMkProps "ref" (mkEffectFn1 f)
+ref :: Ref.RefHandler HTMLElement -> Props
+ref = unsafeMkProps "ref"
 
 suppressContentEditableWarning :: Boolean -> Props
 suppressContentEditableWarning = unsafeMkProps "suppressContentEditableWarning"

src/React/Ref.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var React = require("react");
+
+exports.createRef = React.createRef;
+
+exports.getCurrentRef_ = function(ref) {
+  if (ref.current) return ref.current;
+  else return ref;
+}

src/React/Ref.purs

@@ -0,0 +1,49 @@
+module React.Ref
+  ( Ref
+  , RefHandler
+  , ReactInstance
+  , fromRef
+  , fromEffect
+  , getCurrentRef
+  , createDOMRef
+  , createInstanceRef
+  ) where
+
+import Prelude
+import Effect (Effect)
+import Data.Maybe (Maybe)
+import Web.HTML.HTMLElement (HTMLElement)
+import Data.Nullable (Nullable)
+import Data.Nullable as Nullable
+import Effect.Uncurried (EffectFn1, runEffectFn1, mkEffectFn1)
+import Unsafe.Coerce (unsafeCoerce)
+
+
+foreign import data ReactInstance :: Type
+
+foreign import data Ref :: Type -> Type
+
+foreign import data RefHandler :: Type -> Type
+
+
+foreign import createRef :: forall a. Effect (Ref a)
+
+createDOMRef :: Effect (Ref HTMLElement)
+createDOMRef = createRef
+
+createInstanceRef :: Effect (Ref ReactInstance)
+createInstanceRef = createRef
+
+
+fromRef :: forall a. Ref a -> RefHandler a
+fromRef = unsafeCoerce
+
+
+fromEffect :: forall a. (Ref a -> Effect Unit) -> RefHandler a
+fromEffect = unsafeCoerce <<< mkEffectFn1
+
+
+foreign import getCurrentRef_ :: forall a. EffectFn1 (Ref a) (Nullable a)
+
+getCurrentRef :: forall a. Ref a -> Effect (Maybe a)
+getCurrentRef ref = Nullable.toMaybe <$> runEffectFn1 getCurrentRef_ ref