From bf4bd4b08ec7d8fc8ec0bb7e2277640af09f8c41 Mon Sep 17 00:00:00 2001
From: Martin Konicek <mkonicek@fb.com>
Date: Fri, 27 Mar 2015 14:29:55 -0700
Subject: [PATCH] [ReactNative] JS files for D1947217

---
 Libraries/Portal/Portal.js              | 70 +++++++++++++++++++++++++
 Libraries/ReactIOS/renderApplication.js | 26 +++++++--
 2 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 Libraries/Portal/Portal.js

diff --git a/Libraries/Portal/Portal.js b/Libraries/Portal/Portal.js
new file mode 100644
index 0000000000..762af36614
--- /dev/null
+++ b/Libraries/Portal/Portal.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule Portal
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var _portalRef: any;
+
+/*
+ * A container that renders all the modals on top of everything else in the application.
+ *
+ * Portal makes it possible for application code to pass modal views all the way up to
+ * the root element created in `renderApplication`.
+ *
+ * Never use `<Portal>` in your code. There is only one Portal instance rendered
+ * by the top-level `renderApplication`.
+ */
+var Portal = React.createClass({
+  statics: {
+    showModal: function(component) {
+      if (!_portalRef) {
+        console.error('Calling showModal but no Portal has been rendered');
+        return;
+      }
+      _portalRef.setState({modal: component});
+    },
+
+    closeModal: function() {
+      if (!_portalRef) {
+        console.error('Calling closeModal but no Portal has been rendered');
+        return;
+      }
+      _portalRef.setState({modal: null});
+    },
+  },
+
+  getInitialState: function() {
+    return {modal: (null: any)};
+  },
+
+  render: function() {
+    _portalRef = this;
+    if (!this.state.modal) {
+      return <View />;
+    }
+    return (
+      <View style={styles.modalsContainer}>
+        {this.state.modal}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  modalsContainer: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+module.exports = Portal;
diff --git a/Libraries/ReactIOS/renderApplication.js b/Libraries/ReactIOS/renderApplication.js
index 1d880653e7..dbec1e853a 100644
--- a/Libraries/ReactIOS/renderApplication.js
+++ b/Libraries/ReactIOS/renderApplication.js
@@ -11,7 +11,10 @@
  */
 'use strict';
 
+var Portal = require('Portal');
 var React = require('React');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
 
 var invariant = require('invariant');
 
@@ -24,12 +27,27 @@ function renderApplication<D, P, S>(
     rootTag,
     'Expect to have a valid rootTag, instead got ', rootTag
   );
-   React.render(
-    <RootComponent
-      {...initialProps}
-    />,
+  React.render(
+    <View style={styles.appContainer}>
+      <RootComponent
+        {...initialProps}
+      />
+      <Portal />
+    </View>,
     rootTag
   );
 }
 
+var styles = StyleSheet.create({
+  // This is needed so the application covers the whole screen
+  // and therefore the contents of the Portal are not clipped.
+  appContainer: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
 module.exports = renderApplication;