From f87b0cb495470e3ca28599a82233d57a2dce9eb9 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Mon, 9 Mar 2015 11:49:58 -0700
Subject: [PATCH] [Website] Add a link when composing prop types

---
 website/layout/AutodocsLayout.js | 29 ++++++++++++++++++++++-------
 website/server/extractDocs.js    |  2 +-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 9ff344199..2a38dc18a 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -8,12 +8,13 @@ var Header = require('Header');
 var Marked = require('Marked');
 var React = require('React');
 var Site = require('Site');
+var slugify = require('slugify');
 
 
 var Autodocs = React.createClass({
   renderProp: function(name, prop) {
     return (
-      <div className="prop">
+      <div className="prop" key={name}>
         <Header level={4} className="propTitle" toSlug={name}>
           {name}
           {' '}
@@ -23,12 +24,26 @@ var Autodocs = React.createClass({
       </div>
     );
   },
-  renderProps: function(props) {
-    var result = Object.keys(props).sort().map((name) =>
-      this.renderProp(name, props[name])
+  renderCompose: function(name) {
+    return (
+      <div className="prop" key={name}>
+        <Header level={4} className="propTitle" toSlug={name}>
+          <a href={slugify(name) + '.html#proptypes'}>{name} props...</a>
+        </Header>
+      </div>
+    );
+  },
+  renderProps: function(props, composes) {
+    return (
+      <div className="props">
+        {(composes || []).map((name) =>
+          this.renderCompose(name)
+        )}
+        {Object.keys(props).sort().map((name) =>
+          this.renderProp(name, props[name])
+        )}
+      </div>
     );
-
-    return <div className="props">{result}</div>;
   },
   render: function() {
     var metadata = this.props.metadata;
@@ -43,7 +58,7 @@ var Autodocs = React.createClass({
             <Marked>
               {content.description}
             </Marked>
-            {this.renderProps(content.props)}
+            {this.renderProps(content.props, content.composes)}
             <Marked>
               {content.fullDescription}
             </Marked>
diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js
index 095a9ac1a..5a5456e43 100644
--- a/website/server/extractDocs.js
+++ b/website/server/extractDocs.js
@@ -46,7 +46,7 @@ var components = [
   '../Libraries/Image/Image.ios.js',
   '../Libraries/Components/ListView/ListView.js',
   '../Libraries/Components/Navigation/NavigatorIOS.ios.js',
-  '../Libraries/Components/ScrollView/ScrollView.ios.js',
+  '../Libraries/Components/ScrollView/ScrollView.js',
   '../Libraries/Text/Text.js',
   '../Libraries/Components/TextInput/TextInput.ios.js',
   '../Libraries/Components/Touchable/TouchableHighlight.js',