Merge pull request #2264 from vjeux/platform_props

[Website] Platform-specific props

website/layout/AutodocsLayout.js

@@ -71,6 +71,9 @@ var ComponentDoc = React.createClass({
     return (
       <div className="prop" key={name}>
         <Header level={4} className="propTitle" toSlug={name}>
+          {prop.platforms && prop.platforms.map(platform =>
+            <span className="platform">{platform}</span>
+          )}
           {name}
           {' '}
           {prop.type && <span className="propType">
@@ -119,7 +122,7 @@ var ComponentDoc = React.createClass({
             </div>
           );
         })}
-        {Object.keys(style.props).sort().map((name) =>
+        {Object.keys(style.props).map((name) =>
           <div className="prop" key={name}>
             <h6 className="propTitle">
               {name}
@@ -140,15 +143,42 @@ var ComponentDoc = React.createClass({
         {(composes || []).map((name) =>
           this.renderCompose(name)
         )}
-        {Object.keys(props).sort().map((name) =>
+        {Object.keys(props)
+          .sort((a, b) => {
+            a = props[a];
+            b = props[b];
+
+            if (a.platforms && !b.platforms) {
+              return 1;
+            }
+            if (b.platforms && !a.platforms) {
+              return -1;
+            }
+            return a.name < b.name;
+          })
+          .map((name) =>
           this.renderProp(name, props[name])
         )}
       </div>
     );
   },
 
+  extractPlatformFromProps: function(props) {
+    for (var key in props) {
+      var prop = props[key];
+      var description = prop.description || '';
+      var platforms = description.match(/\@platform (.+)/);
+      platforms = platforms && platforms[1].replace(/ /g, '').split(',');
+      description = description.replace(/\@platform (.+)/, '');
+
+      prop.description = description;
+      prop.platforms = platforms;
+    }
+  },
+
   render: function() {
     var content = this.props.content;
+    this.extractPlatformFromProps(content.props);
     return (
       <div>
         <Marked>

website/src/react-native/css/react-native.css

@@ -967,6 +967,15 @@ div[data-twttr-id] iframe {
   font-size: 13px;
 }
 
+.platform {
+  background-color: hsl(198, 100%, 87%);
+  border-radius: 5px;
+  margin-right: 5px;
+  padding: 0 5px;
+  font-size: 13px;
+  font-weight: normal;
+}
+
 .edit-github {
   font-size: 15px;
   font-weight: normal;