Permalink
Browse files

Improve style prop display

Summary:
- Display the description when it exists
- Display the platform

<img width="667" alt="screen shot 2016-01-24 at 1 37 45 pm" src="https://cloud.githubusercontent.com/assets/197597/12539106/fb226d08-c29f-11e5-83ad-f85bb42ed693.png">
Closes #5520

Reviewed By: svcscm

Differential Revision: D2859743

Pulled By: vjeux

fb-gh-sync-id: 0ccfeca7bbdfa837501378c0bf701d589fea48d8
  • Loading branch information...
vjeux authored and facebook-github-bot-5 committed Jan 25, 2016
1 parent c49fc1e commit 193df8a4e06e08a17aa082feb5e411c9fd745fe8
Showing with 66 additions and 33 deletions.
  1. +56 −32 website/layout/AutodocsLayout.js
  2. +5 −1 website/server/extractDocs.js
  3. +5 −0 website/src/react-native/css/react-native.css
@@ -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 (
+ <div className="prop" key={name}>
+ <h6 className="propTitle">
+ {prop.platforms && prop.platforms.map(platform =>
+ <span className="platform">{platform}</span>
+ )}
+ {name}
+ {' '}
+ {prop.type && <span className="propType">
+ {renderType(prop.type)}
+ </span>}
+ {' '}
+ {prop.description && <Marked>{prop.description}</Marked>}
+ </h6>
+ </div>
+ );
+ },
+
renderStylesheetProps: function(stylesheetName) {
var style = this.props.content.styles[stylesheetName];
+ this.extractPlatformFromProps(style.props);
return (
<div className="compactProps">
{(style.composes || []).map((name) => {
@@ -121,17 +170,10 @@ var ComponentDoc = React.createClass({
</div>
);
})}
- {Object.keys(style.props).map((name) =>
- <div className="prop" key={name}>
- <h6 className="propTitle">
- {name}
- {' '}
- {style.props[name].type && <span className="propType">
- {renderType(style.props[name].type)}
- </span>}
- </h6>
- </div>
- )}
+ {Object.keys(style.props)
+ .sort(sortByPlatform.bind(null, style.props))
+ .map((name) => this.renderStylesheetProp(name, style.props[name]))
+ }
</div>
);
},
@@ -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]))
+ }
</div>
);
},
@@ -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;
@@ -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;
}

0 comments on commit 193df8a

Please sign in to comment.