diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 66bb42702..8a6e471cc 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -71,6 +71,9 @@ var ComponentDoc = React.createClass({
return (
+ {prop.platforms && prop.platforms.map(platform =>
+ {platform}
+ )}
{name}
{' '}
{prop.type &&
@@ -119,7 +122,7 @@ var ComponentDoc = React.createClass({
);
})}
- {Object.keys(style.props).sort().map((name) =>
+ {Object.keys(style.props).map((name) =>
{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])
)}
);
},
+ 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 (
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 902d2a4a4..cee9a1307 100644
--- a/website/src/react-native/css/react-native.css
+++ b/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;