Render UIExplorer examples functionally to handle landscape orientation correctly

Reviewed By: javache

Differential Revision: D3810007

fbshipit-source-id: ff8dfa4b326bb385ea91592b374f5a45a6d4ff64

Examples/UIExplorer/js/UIExplorerApp.android.js

@@ -33,6 +33,7 @@ const React = require('react');
 const StatusBar = require('StatusBar');
 const StyleSheet = require('StyleSheet');
 const ToolbarAndroid = require('ToolbarAndroid');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerList = require('./UIExplorerList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
@@ -146,7 +147,6 @@ class UIExplorerApp extends React.Component {
     if (stack && stack.routes[index]) {
       const {key} = stack.routes[index];
       const ExampleModule = UIExplorerList.Modules[key];
-      const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule);
       return (
         <View style={styles.container}>
           <ToolbarAndroid
@@ -156,7 +156,8 @@ class UIExplorerApp extends React.Component {
             style={styles.toolbar}
             title={title}
           />
-          <ExampleComponent
+          <UIExplorerExampleContainer
+            module={ExampleModule}
             ref={(example) => { this._exampleRef = example; }}
           />
         </View>

Examples/UIExplorer/js/UIExplorerApp.ios.js

@@ -28,6 +28,7 @@ const Linking = require('Linking');
 const React = require('react');
 const ReactNative = require('react-native');
 const UIExplorerList = require('./UIExplorerList.ios');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
@@ -177,10 +178,9 @@ class UIExplorerApp extends React.Component {
 
     const Example = UIExplorerList.Modules[state.key];
     if (Example) {
-      const Component = UIExplorerExampleList.makeRenderable(Example);
       return (
         <View style={styles.exampleContainer}>
-          <Component />
+          <UIExplorerExampleContainer module={Example} />
         </View>
       );
     }
@@ -207,10 +207,9 @@ UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Exa
   if (ExampleModule.displayName) {
     class Snapshotter extends React.Component {
       render() {
-        const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
         return (
           <SnapshotViewIOS>
-            <Renderable />
+            <UIExplorerExampleContainer module={ExampleModule} />
           </SnapshotViewIOS>
         );
       }

Examples/UIExplorer/js/UIExplorerExampleContainer.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule UIExplorerExampleContainer
+ */
+'use strict';
+
+const React = require('react');
+const {
+  Platform,
+} = require('react-native');
+const UIExplorerBlock = require('./UIExplorerBlock');
+const UIExplorerPage = require('./UIExplorerPage');
+
+const invariant = require('fbjs/lib/invariant');
+
+class UIExplorerExampleContainer extends React.Component {
+  renderExample(example, i) {
+    // Filter platform-specific examples
+    var {title, description, platform} = example;
+    if (platform) {
+      if (Platform.OS !== platform) {
+        return null;
+      }
+      title += ' (' + platform + ' only)';
+    }
+    return (
+      <UIExplorerBlock
+        key={i}
+        title={title}
+        description={description}>
+        {example.render()}
+      </UIExplorerBlock>
+    );
+  }
+
+  render(): ReactElement<any> {
+    if (!this.props.module.examples) {
+      return <this.props.module />;
+    }
+
+    return (
+      <UIExplorerPage title={this.props.title}>
+        {this.props.module.examples.map(this.renderExample)}
+      </UIExplorerPage>
+    );
+  }
+}
+
+module.exports = UIExplorerExampleContainer;

Examples/UIExplorer/js/UIExplorerExampleList.js

@@ -31,8 +31,6 @@ const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 const UIExplorerActions = require('./UIExplorerActions');
 
-const createExamplePage = require('./createExamplePage');
-
 import type {
   UIExplorerExample,
 } from './UIExplorerList.ios';
@@ -59,12 +57,6 @@ class UIExplorerExampleList extends React.Component {
     super(props);
   }
 
-  static makeRenderable(example: any): ReactClass<any> {
-    return example.examples ?
-      createExamplePage(null, example) :
-      example;
-  }
-
   render(): ?ReactElement<any> {
     const filterText = this.state.filter || '';
     const filterRegex = new RegExp(String(filterText), 'i');

Examples/UIExplorer/js/createExamplePage.js

@@ -23,71 +23,18 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  Platform,
-} = ReactNative;
-var UIExplorerBlock = require('./UIExplorerBlock');
-var UIExplorerPage = require('./UIExplorerPage');
+const React = require('react');
 
-var invariant = require('fbjs/lib/invariant');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 
 import type { Example, ExampleModule } from 'ExampleTypes';
 
 var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
   : ReactClass<any> {
-  invariant(!!exampleModule.examples, 'The module must have examples');
 
   class ExamplePage extends React.Component {
-    static title = exampleModule.title;
-    static description = exampleModule.description;
-
-    getBlock = (example: Example, i) => {
-      // Filter platform-specific examples
-      var {title, description, platform} = example;
-      if (platform) {
-        if (Platform.OS !== platform) {
-          return null;
-        }
-        title += ' (' + platform + ' only)';
-      }
-      // Hack warning: This is a hack because the www UI explorer used to
-      // require render to be called. It should just return elements now.
-      var originalRender = React.render;
-      var originalIOSRender = ReactNative.render;
-      var renderedComponent;
-      // TODO remove typecasts when Flow bug #6560135 is fixed
-      // and workaround is removed from react-native.js
-      (React: Object).render =
-      (ReactNative: Object).render =
-        function(element, container) {
-          renderedComponent = element;
-        };
-      var result = example.render(null);
-      if (result) {
-        renderedComponent = React.cloneElement(result, {
-          navigator: this.props.navigator,
-        });
-      }
-      (React: Object).render = originalRender;
-      (ReactNative: Object).render = originalIOSRender;
-      return (
-        <UIExplorerBlock
-          key={i}
-          title={title}
-          description={description}>
-          {renderedComponent}
-        </UIExplorerBlock>
-      );
-    };
-
     render() {
-      return (
-        <UIExplorerPage title={title}>
-          {exampleModule.examples.map(this.getBlock)}
-        </UIExplorerPage>
-      );
+      return <UIExplorerExampleContainer module={exampleModule} title={title} />;
     }
   }