mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import classNames from 'classnames';
|
|
import { Row, Col, Icon, Affix } from 'antd';
|
|
import Demo from '../Demo';
|
|
import * as utils from '../utils';
|
|
import demosList from '../../../_data/demos-list';
|
|
|
|
export default class ComponentDoc extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
expandAll: false,
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.componentDidUpdate();
|
|
}
|
|
componentDidUpdate() {
|
|
const { chinese, english } = this.props.doc.meta;
|
|
utils.setTitle(`${chinese} ${english} - Ant Design`);
|
|
}
|
|
|
|
handleExpandToggle = () => {
|
|
this.setState({
|
|
expandAll: !this.state.expandAll,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { doc, location } = this.props;
|
|
const scrollTo = location.query.scrollTo;
|
|
const { description, meta } = doc;
|
|
const demos = (demosList[meta.fileName] || [])
|
|
.filter((demoData) => !demoData.meta.hidden);
|
|
const expand = this.state.expandAll;
|
|
|
|
const isSingleCol = meta.cols === 1;
|
|
const leftChildren = [];
|
|
const rightChildren = [];
|
|
demos.sort((a, b) => {
|
|
return parseInt(a.meta.order, 10) - parseInt(b.meta.order, 10);
|
|
}).forEach((demoData, index) => {
|
|
if (index % 2 === 0 || isSingleCol) {
|
|
leftChildren.push(
|
|
<Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
|
|
key={index}
|
|
expand={expand} pathname={location.pathname} />
|
|
);
|
|
} else {
|
|
rightChildren.push(
|
|
<Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
|
|
key={index}
|
|
expand={expand} pathname={location.pathname} />
|
|
);
|
|
}
|
|
});
|
|
const expandTriggerClass = classNames({
|
|
'code-box-expand-trigger': true,
|
|
'code-box-expand-trigger-active': expand,
|
|
});
|
|
|
|
const jumper = demos.map((demo) => {
|
|
return (
|
|
<li key={demo.id}>
|
|
<Link className={demo.id === scrollTo ? 'current' : ''}
|
|
to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
|
|
{demo.meta.title}
|
|
</Link>
|
|
</li>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<article>
|
|
<Affix className="toc-affix" offsetTop={16}>
|
|
<ul className="toc demos-anchor">
|
|
{jumper}
|
|
</ul>
|
|
</Affix>
|
|
<section className="markdown">
|
|
<h1>{meta.english} {meta.chinese}</h1>
|
|
{
|
|
utils.jsonmlToComponent(
|
|
location.pathname,
|
|
['section', { className: 'markdown' }]
|
|
.concat(description)
|
|
)
|
|
}
|
|
<h2>
|
|
代码演示
|
|
<Icon type="appstore" className={expandTriggerClass}
|
|
title="展开全部代码" onClick={this.handleExpandToggle} />
|
|
</h2>
|
|
</section>
|
|
<Row gutter={16}>
|
|
<Col span={isSingleCol ? '24' : '12'}
|
|
className={isSingleCol ?
|
|
'code-boxes-col-1-1' :
|
|
'code-boxes-col-2-1'
|
|
}
|
|
>
|
|
{leftChildren}
|
|
</Col>
|
|
{
|
|
isSingleCol ? null :
|
|
<Col className="code-boxes-col-2-1" span="12">{rightChildren}</Col>
|
|
}
|
|
</Row>
|
|
{
|
|
utils.jsonmlToComponent(
|
|
location.pathname,
|
|
['section', {
|
|
className: 'markdown api-container',
|
|
}].concat(doc.api || [])
|
|
)
|
|
}
|
|
</article>
|
|
);
|
|
}
|
|
}
|