Add createPortal (#57)

* Add createPortal * Simplify Makefiles
purescript-react · Oct 1, 2018 · 43f08b5 · 43f08b5
1 parent 3dc3f53
commit 43f08b5
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/examples/component/Makefile b/examples/component/Makefile
@@ -1,7 +1,6 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle output/*/*.js > output/bundle.js
-	echo 'PS.Main.main();' >> output/bundle.js
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
 	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:

diff --git a/examples/controlled-input/Makefile b/examples/controlled-input/Makefile
@@ -1,7 +1,6 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle output/*/*.js > output/bundle.js
-	echo 'PS.Main.main();' >> output/bundle.js
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
 	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:

diff --git a/examples/counter/Makefile b/examples/counter/Makefile
@@ -1,7 +1,6 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle output/*/*.js > output/bundle.js
-	echo 'PS.Main.main();' >> output/bundle.js
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
 	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:

diff --git a/src/React/Basic/DOM.js b/src/React/Basic/DOM.js
@@ -18,6 +18,10 @@ exports.findDOMNode_ = function(instance) {
   return ReactDOM.findDOMNode(instance);
 };
 
+exports.createPortal_ = function(jsx, node) {
+  return ReactDOM.createPortal(jsx, node);
+};
+
 exports.mergeStyles = function(styles) {
   return Object.assign.apply(null, [ {} ].concat(styles));
 };
diff --git a/src/React/Basic/DOM.purs b/src/React/Basic/DOM.purs
@@ -13,6 +13,7 @@ module React.Basic.DOM
   , hydrate'
   , unmount
   , findDOMNode
+  , createPortal
   , text
   , css
   , mergeStyles
@@ -22,6 +23,7 @@ module React.Basic.DOM
 import Prelude
 
 import Data.Either (Either)
+import Data.Function.Uncurried (Fn2, runFn2)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable, toMaybe)
 import Effect (Effect)
@@ -98,6 +100,14 @@ findDOMNode instance_ = try do
 -- | Warning: Relies on `ReactDOM.findDOMNode` which may throw exceptions
 foreign import findDOMNode_ :: EffectFn1 ComponentInstance (Nullable Node)
 
+-- | Divert a render tree into a separate DOM node. The node's
+-- | content will be overwritten and managed by React, similar
+-- | to `render` and `hydrate`.
+createPortal :: JSX -> Element -> JSX
+createPortal = runFn2 createPortal_
+
+foreign import createPortal_ :: Fn2 JSX Element JSX
+
 -- | Create a text node.
 text :: String -> JSX
 text = unsafeCoerce