Skip to content
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.
You can’t perform that action at this time.