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; }