diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index 66bb42702c..8a6e471cc0 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 902d2a4a47..cee9a1307c 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;