2016-02-29 14:08:40 +08:00
|
|
|
import React from 'react';
|
2016-03-08 15:13:59 +08:00
|
|
|
import ReactDOM from 'react-dom';
|
2016-03-07 17:33:38 +08:00
|
|
|
import { Link } from 'react-router';
|
2016-03-01 14:53:32 +08:00
|
|
|
import classNames from 'classnames';
|
2016-03-08 15:13:59 +08:00
|
|
|
import antd, { Row, Col, Icon } from '../../../';
|
2016-02-29 14:08:40 +08:00
|
|
|
import Demo from '../Demo';
|
2016-03-08 15:13:59 +08:00
|
|
|
import BrowserDemo from '../BrowserDemo';
|
2016-02-29 14:08:40 +08:00
|
|
|
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
|
|
|
|
2016-03-08 16:12:04 +08:00
|
|
|
// Extract preview as a component
|
|
|
|
Object.keys(demosList).map((key) => demosList[key])
|
|
|
|
.forEach((demos) => {
|
|
|
|
demos.forEach((demo) => {
|
|
|
|
demo.preview = demo.preview(React, ReactDOM, antd, BrowserDemo);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
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-07 17:33:38 +08:00
|
|
|
const { doc, location } = this.props;
|
2016-03-07 15:20:18 +08:00
|
|
|
const { description, meta } = doc;
|
|
|
|
const demos = demosList[meta.fileName] || [];
|
2016-03-01 14:53:32 +08:00
|
|
|
const expand = this.state.expandAll;
|
2016-02-29 14:08:40 +08:00
|
|
|
|
2016-03-07 15:20:18 +08:00
|
|
|
const isSingleCol = 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) => {
|
2016-03-08 15:13:59 +08:00
|
|
|
return parseInt(a.meta.order, 10) - parseInt(b.meta.order, 10);
|
2016-03-07 14:31:47 +08:00
|
|
|
}).forEach((demoData, index) => {
|
2016-02-29 15:56:15 +08:00
|
|
|
if (index % 2 === 0 || isSingleCol) {
|
2016-03-07 17:33:38 +08:00
|
|
|
leftChildren.push(
|
|
|
|
<Demo {...demoData} key={index}
|
2016-03-08 15:13:59 +08:00
|
|
|
expand={expand} pathname={location.pathname} />
|
2016-03-07 17:33:38 +08:00
|
|
|
);
|
2016-02-29 14:08:40 +08:00
|
|
|
} else {
|
2016-03-07 17:33:38 +08:00
|
|
|
rightChildren.push(
|
|
|
|
<Demo {...demoData} key={index}
|
2016-03-08 15:13:59 +08:00
|
|
|
expand={expand} pathname={location.pathname} />
|
2016-03-07 17:33:38 +08:00
|
|
|
);
|
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
|
|
|
|
2016-03-07 15:20:18 +08:00
|
|
|
const jumper = demos.map((demo) => {
|
|
|
|
return (
|
|
|
|
<li key={demo.id}>
|
2016-03-08 15:13:59 +08:00
|
|
|
<Link to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
|
|
|
|
{ demo.meta.chinese || demo.meta.english }
|
2016-03-07 17:33:38 +08:00
|
|
|
</Link>
|
2016-03-07 15:20:18 +08:00
|
|
|
</li>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2016-02-29 14:08:40 +08:00
|
|
|
return (
|
2016-03-01 11:46:18 +08:00
|
|
|
<article>
|
2016-03-07 15:20:18 +08:00
|
|
|
<ul className="toc demos-anchor">
|
|
|
|
{ jumper }
|
|
|
|
</ul>
|
2016-02-29 15:56:15 +08:00
|
|
|
<section className="markdown">
|
2016-03-07 15:20:18 +08:00
|
|
|
<h1>{meta.chinese || meta.english}</h1>
|
2016-03-07 17:33:38 +08:00
|
|
|
{ description.map(utils.objectToComponent.bind(null, location.pathname)) }
|
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">
|
2016-03-07 17:33:38 +08:00
|
|
|
{ (doc.api || []).map(utils.objectToComponent.bind(null, location.pathname)) }
|
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
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|