diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 2b23a41da..13be4808a 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -65,6 +65,35 @@ function renderType(type) {
return type.name;
}
+function sortByPlatform(props, nameA, nameB) {
+ var a = props[nameA];
+ var b = props[nameB];
+
+ if (a.platforms && !b.platforms) {
+ return 1;
+ }
+ if (b.platforms && !a.platforms) {
+ return -1;
+ }
+
+ // Cheap hack: use < on arrays of strings to compare the two platforms
+ if (a.platforms < b.platforms) {
+ return -1;
+ }
+ if (a.platforms > b.platforms) {
+ return 1;
+ }
+
+ if (nameA < nameB) {
+ return -1;
+ }
+ if (nameA > nameB) {
+ return 1;
+ }
+
+ return 0;
+}
+
var ComponentDoc = React.createClass({
renderProp: function(name, prop) {
return (
@@ -96,8 +125,28 @@ var ComponentDoc = React.createClass({
);
},
+ renderStylesheetProp: function(name, prop) {
+ return (
+
+
+ {prop.platforms && prop.platforms.map(platform =>
+ {platform}
+ )}
+ {name}
+ {' '}
+ {prop.type &&
+ {renderType(prop.type)}
+ }
+ {' '}
+ {prop.description && {prop.description}}
+
+
+ );
+ },
+
renderStylesheetProps: function(stylesheetName) {
var style = this.props.content.styles[stylesheetName];
+ this.extractPlatformFromProps(style.props);
return (
{(style.composes || []).map((name) => {
@@ -121,17 +170,10 @@ var ComponentDoc = React.createClass({
);
})}
- {Object.keys(style.props).map((name) =>
-
-
- {name}
- {' '}
- {style.props[name].type &&
- {renderType(style.props[name].type)}
- }
-
-
- )}
+ {Object.keys(style.props)
+ .sort(sortByPlatform.bind(null, style.props))
+ .map((name) => this.renderStylesheetProp(name, style.props[name]))
+ }
);
},
@@ -143,27 +185,9 @@ var ComponentDoc = React.createClass({
this.renderCompose(name)
)}
{Object.keys(props)
- .sort((nameA, nameB) => {
- var a = props[nameA];
- var b = props[nameB];
-
- if (a.platforms && !b.platforms) {
- return 1;
- }
- if (b.platforms && !a.platforms) {
- return -1;
- }
- if (nameA < nameB) {
- return -1;
- }
- if (nameA > nameB) {
- return 1;
- }
- return 0;
- })
- .map((name) =>
- this.renderProp(name, props[name])
- )}
+ .sort(sortByPlatform.bind(null, props))
+ .map((name) => this.renderProp(name, props[name]))
+ }
);
},
diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js
index 8b32daff2..151b65814 100644
--- a/website/server/extractDocs.js
+++ b/website/server/extractDocs.js
@@ -267,7 +267,11 @@ var styleDocs = styles.slice(2).reduce(function(docs, filepath) {
docgen.parse(
fs.readFileSync(filepath),
docgenHelpers.findExportedObject,
- [docgen.handlers.propTypeHandler, docgen.handlers.propTypeCompositionHandler]
+ [
+ docgen.handlers.propTypeHandler,
+ docgen.handlers.propTypeCompositionHandler,
+ docgen.handlers.propDocBlockHandler,
+ ]
);
return docs;
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index a08f351d6..05e541bb9 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -1041,6 +1041,11 @@ div[data-twttr-id] iframe {
margin-top: 0;
}
+.compactProps .propTitle div {
+ font-weight: normal;
+ margin-left: 20px;
+}
+
.prop {
padding: 5px 10px;
}