ant-design/site/component/ComponentDoc/index.jsx

69 lines
2.0 KiB
React
Raw Normal View History

2016-02-29 14:08:40 +08:00
import React from 'react';
2016-03-01 14:53:32 +08:00
import classNames from 'classnames';
import { Row, Col, Icon } from '../../../';
2016-02-29 14:08:40 +08:00
import Demo from '../Demo';
import * as utils from '../utils';
2016-03-04 18:06:34 +08:00
import demosList from '../../../_site/data/demos-list';
2016-02-29 14:08:40 +08:00
export default class ComponentDoc extends React.Component {
2016-03-01 14:53:32 +08:00
constructor(props) {
super(props);
this.state = {
expandAll: false,
};
}
handleExpandToggle() {
this.setState({
expandAll: !this.state.expandAll,
});
}
2016-02-29 14:08:40 +08:00
render() {
2016-03-04 18:06:34 +08:00
const { doc } = this.props;
const demos = demosList[doc.meta.fileName] || [];
2016-03-01 14:53:32 +08:00
const expand = this.state.expandAll;
2016-02-29 15:56:15 +08:00
const isSingleCol = doc.meta.cols === '1';
2016-02-29 14:08:40 +08:00
const leftChildren = [];
const rightChildren = [];
2016-03-07 14:31:47 +08:00
demos.sort((a, b) => {
return a.order - b.order;
}).forEach((demoData, index) => {
2016-02-29 15:56:15 +08:00
if (index % 2 === 0 || isSingleCol) {
2016-03-01 14:53:32 +08:00
leftChildren.push(<Demo {...demoData} expand={expand} key={index} />);
2016-02-29 14:08:40 +08:00
} else {
2016-03-01 14:53:32 +08:00
rightChildren.push(<Demo {...demoData} expand={expand} key={index} />);
2016-02-29 14:08:40 +08:00
}
});
2016-03-01 14:53:32 +08:00
const expandTriggerClass = classNames({
'code-box-expand-trigger': true,
'code-box-expand-trigger-active': expand,
});
2016-02-29 14:08:40 +08:00
return (
2016-03-01 11:46:18 +08:00
<article>
2016-02-29 15:56:15 +08:00
<section className="markdown">
<h1>{doc.meta.chinese || doc.meta.english}</h1>
2016-02-29 15:56:15 +08:00
{ doc.description.map(utils.objectToComponent) }
2016-03-01 14:53:32 +08:00
<h2>
代码演示
<Icon type="appstore" className={expandTriggerClass}
title="展开全部代码" onClick={this.handleExpandToggle.bind(this)} />
</h2>
2016-02-29 15:56:15 +08:00
</section>
2016-02-29 14:08:40 +08:00
<Row>
2016-03-07 14:31:47 +08:00
<Col span={ isSingleCol ? '24' : '12' } className={ isSingleCol ? '' : 'demo-list-left'}>
{ leftChildren }
</Col>
{ isSingleCol ? null : <Col className="demo-list-right" span="12">{ rightChildren }</Col> }
2016-02-29 14:08:40 +08:00
</Row>
2016-02-29 15:56:15 +08:00
<section className="markdown">
{ (doc.api || []).map(utils.objectToComponent) }
2016-02-29 15:56:15 +08:00
</section>
2016-03-01 11:46:18 +08:00
</article>
2016-02-29 14:08:40 +08:00
);
}
}