From 8cfd8d351db06c71adc21cd2b41726aceb7cee5e Mon Sep 17 00:00:00 2001
From: Hector Ramos <hramos@fb.com>
Date: Mon, 24 Apr 2017 13:31:34 -0400
Subject: [PATCH] Use SnackPlayer for API Reference doc examples.

---
 website/layout/AutodocsLayout.js | 72 +++++---------------------------
 website/server/extractDocs.js    |  6 +--
 2 files changed, 13 insertions(+), 65 deletions(-)

diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 07ec34d0845ad2..2b530685885205 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -23,6 +23,7 @@ const PropTypes = require('prop-types');
 var Site = require('Site');
 
 var slugify = require('slugify');
+var SnackPlayer = require('SnackPlayer');
 
 var styleReferencePattern = /^[^.]+\.propTypes\.style$/;
 
@@ -785,56 +786,6 @@ var TypeDef = React.createClass({
   },
 });
 
-var EmbeddedSimulator = React.createClass({
-  render: function() {
-    if (!this.props.shouldRender) {
-      return null;
-    }
-
-    var metadata = this.props.metadata;
-
-    var imagePreview = metadata.platform === 'android'
-      ? <img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png" />
-      : <img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png" />;
-
-    return (
-      <div className="embedded-simulator">
-        <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
-        <div className="modal-button-open modal-button-open-img">
-          {imagePreview}
-        </div>
-        <Modal metadata={metadata} />
-      </div>
-    );
-  }
-});
-
-var Modal = React.createClass({
-  render: function() {
-    var metadata = this.props.metadata;
-    var appParams = {route: metadata.title};
-    var encodedParams = encodeURIComponent(JSON.stringify(appParams));
-    var url = metadata.platform === 'android'
-      ? `https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`
-      : `https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;
-
-    return (
-      <div>
-        <div className="modal">
-          <div className="modal-content">
-            <button className="modal-button-close">&times;</button>
-            <div className="center">
-              <iframe className="simulator" src={url} width="256" height="550" frameborder="0" scrolling="no" />
-              <p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p>
-            </div>
-          </div>
-        </div>
-        <div className="modal-backdrop" />
-      </div>
-    );
-  }
-});
-
 var Autodocs = React.createClass({
   childContextTypes: {
     permalink: PropTypes.string,
@@ -868,20 +819,19 @@ var Autodocs = React.createClass({
       return;
     }
 
+    let title = 'Example';
+    if (example.title) {
+      title = example.title + ' Example';
+    }
+
     return (
       <div>
-        <HeaderWithGithub
-          title={example.title || 'Examples'}
-          level={example.title ? 4 : 3}
-          path={example.path}
-          metadata={metadata}
-        />
         <div className="example-container">
-          <Prism>
-           {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
-          </Prism>
-          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
+          <SnackPlayer params={`name=${title}&platform=${example.platform}`}>{example.content.replace(/^[\s\S]*?\*\//, '').trim()}</SnackPlayer>
         </div>
+        <p className="edit-page-block">
+          You can <a target="_blank" href={'https://github.com/facebook/react-native/blob/master/' + example.path}>edit the example above on GitHub</a> and send us a pull request!
+        </p>
       </div>
     );
   },
@@ -893,7 +843,7 @@ var Autodocs = React.createClass({
 
     return (
       <div>
-        {(docs.examples.length > 1) ? <Header level={3}>Examples</Header> : null}
+        <Header level={3}>Examples</Header>
         {docs.examples.map(example => this.renderExample(example, metadata))}
       </div>
     );
diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js
index a6f0258b5e84e1..6d9550b1347c36 100644
--- a/website/server/extractDocs.js
+++ b/website/server/extractDocs.js
@@ -90,15 +90,13 @@ function getExamples(componentName, componentPlatform) {
   if (paths) {
     const examples = [];
     paths.map((p) => {
+      const title = p.match(/(\w+)Example\./)[1];
       const platform = p.match(/Example\.(.*)\.js$/);
-      let title = '';
-      if ((componentPlatform === CROSS_SUFFIX) && (platform !== null)) {
-        title = platform[1].toUpperCase();
-      }
       examples.push(
         {
           path: p.replace(/^\.\.\//, ''),
           title: title,
+          platform: componentPlatform === CROSS_SUFFIX ? null : componentPlatform,
           content: fs.readFileSync(p).toString(),
         }
       );