[Website] Add a link when composing prop types

This commit is contained in:
Christopher Chedeau 2015-03-09 11:49:58 -07:00
parent 418b27c36e
commit f87b0cb495
2 changed files with 23 additions and 8 deletions

View File

@ -8,12 +8,13 @@ var Header = require('Header');
var Marked = require('Marked'); var Marked = require('Marked');
var React = require('React'); var React = require('React');
var Site = require('Site'); var Site = require('Site');
var slugify = require('slugify');
var Autodocs = React.createClass({ var Autodocs = React.createClass({
renderProp: function(name, prop) { renderProp: function(name, prop) {
return ( return (
<div className="prop"> <div className="prop" key={name}>
<Header level={4} className="propTitle" toSlug={name}> <Header level={4} className="propTitle" toSlug={name}>
{name} {name}
{' '} {' '}
@ -23,12 +24,26 @@ var Autodocs = React.createClass({
</div> </div>
); );
}, },
renderProps: function(props) { renderCompose: function(name) {
var result = Object.keys(props).sort().map((name) => return (
this.renderProp(name, props[name]) <div className="prop" key={name}>
<Header level={4} className="propTitle" toSlug={name}>
<a href={slugify(name) + '.html#proptypes'}>{name} props...</a>
</Header>
</div>
);
},
renderProps: function(props, composes) {
return (
<div className="props">
{(composes || []).map((name) =>
this.renderCompose(name)
)}
{Object.keys(props).sort().map((name) =>
this.renderProp(name, props[name])
)}
</div>
); );
return <div className="props">{result}</div>;
}, },
render: function() { render: function() {
var metadata = this.props.metadata; var metadata = this.props.metadata;
@ -43,7 +58,7 @@ var Autodocs = React.createClass({
<Marked> <Marked>
{content.description} {content.description}
</Marked> </Marked>
{this.renderProps(content.props)} {this.renderProps(content.props, content.composes)}
<Marked> <Marked>
{content.fullDescription} {content.fullDescription}
</Marked> </Marked>

View File

@ -46,7 +46,7 @@ var components = [
'../Libraries/Image/Image.ios.js', '../Libraries/Image/Image.ios.js',
'../Libraries/Components/ListView/ListView.js', '../Libraries/Components/ListView/ListView.js',
'../Libraries/Components/Navigation/NavigatorIOS.ios.js', '../Libraries/Components/Navigation/NavigatorIOS.ios.js',
'../Libraries/Components/ScrollView/ScrollView.ios.js', '../Libraries/Components/ScrollView/ScrollView.js',
'../Libraries/Text/Text.js', '../Libraries/Text/Text.js',
'../Libraries/Components/TextInput/TextInput.ios.js', '../Libraries/Components/TextInput/TextInput.ios.js',
'../Libraries/Components/Touchable/TouchableHighlight.js', '../Libraries/Components/Touchable/TouchableHighlight.js',