[Website] Add a link when composing prop types
This commit is contained in:
parent
418b27c36e
commit
f87b0cb495
|
@ -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>
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue