ant-design/site/theme/template/Content/Article.jsx

135 lines
4.1 KiB
React
Raw Normal View History

import React, { Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import DocumentTitle from 'react-document-title';
import { getChildren } from 'jsonml.js/lib/utils';
import { Timeline, Alert, Affix } from 'antd';
import EditButton from './EditButton';
export default class Article extends React.Component {
2016-09-21 11:28:38 +08:00
static contextTypes = {
intl: PropTypes.object.isRequired,
2018-12-07 20:02:01 +08:00
};
shouldComponentUpdate(nextProps) {
const { location } = this.props;
const { location: nextLocation } = nextProps;
if (nextLocation.pathname === location.pathname) {
return false;
}
return true;
}
2018-12-07 20:02:01 +08:00
onResourceClick = e => {
if (!window.gtag) {
return;
2017-04-07 14:29:44 +08:00
}
const cardNode = e.target.closest('.resource-card');
if (cardNode) {
window.gtag('event', 'resource', {
event_category: 'Download',
event_label: cardNode.href,
});
}
if (
window.location.href.indexOf('docs/react/recommendation') > 0 &&
e.target.matches('.markdown > table td > a[href]')
) {
window.gtag('event', 'recommendation', {
event_category: 'Click',
event_label: e.target.href,
});
}
2018-12-07 20:02:01 +08:00
};
getArticle(article) {
const { content } = this.props;
const { meta } = content;
if (!meta.timeline) {
return article;
}
const timelineItems = [];
let temp = [];
2016-08-01 11:43:42 +08:00
let i = 1;
2018-12-07 20:02:01 +08:00
Children.forEach(article.props.children, child => {
if (child.type === 'h2' && temp.length > 0) {
timelineItems.push(<Timeline.Item key={i}>{temp}</Timeline.Item>);
temp = [];
2016-08-01 11:43:42 +08:00
i += 1;
}
temp.push(child);
});
2016-08-01 11:43:42 +08:00
if (temp.length > 0) {
timelineItems.push(<Timeline.Item key={i}>{temp}</Timeline.Item>);
}
return cloneElement(article, {
children: <Timeline>{timelineItems}</Timeline>,
});
}
render() {
2017-10-09 13:23:20 +08:00
const { props } = this;
const { content } = props;
const { meta, description } = content;
2016-09-21 11:28:38 +08:00
const { title, subtitle, filename } = meta;
2018-12-07 20:02:01 +08:00
const {
intl: { locale },
} = this.context;
const isNotTranslated = locale === 'en-US' && typeof title === 'object';
return (
2016-09-21 11:28:38 +08:00
<DocumentTitle title={`${title[locale] || title} - Ant Design`}>
2018-12-07 20:02:01 +08:00
{/* eslint-disable-next-line */}
<article className="markdown" onClick={this.onResourceClick}>
{isNotTranslated && (
<Alert
type="warning"
2018-12-07 20:02:01 +08:00
message={
<span>
2018-01-01 17:24:21 +08:00
This article has not been translated yet. Wanna help us out?&nbsp;
2018-12-07 20:02:01 +08:00
<a href="https://github.com/ant-design/ant-design/issues/1471">
See this issue on GitHub.
</a>
</span>
2018-12-07 20:02:01 +08:00
}
/>
)}
<h1>
2016-09-21 11:28:38 +08:00
{title[locale] || title}
2018-12-07 20:02:01 +08:00
{!subtitle || locale === 'en-US' ? null : <span className="subtitle">{subtitle}</span>}
<EditButton
title={<FormattedMessage id="app.content.edit-page" />}
filename={filename}
/>
</h1>
2018-12-07 20:02:01 +08:00
{!description
? null
: props.utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(description)),
)}
{!content.toc || content.toc.length <= 1 || meta.toc === false ? null : (
<Affix className="toc-affix" offsetTop={16}>
{props.utils.toReactComponent(
['ul', { className: 'toc' }].concat(getChildren(content.toc)),
)}
</Affix>
)}
{this.getArticle(
2017-06-07 17:06:21 +08:00
props.utils.toReactComponent(
2018-12-07 20:02:01 +08:00
['section', { className: 'markdown' }].concat(getChildren(content.content)),
),
)}
{props.utils.toReactComponent(
[
'section',
{
2017-06-07 17:06:21 +08:00
className: 'markdown api-container',
2018-12-07 20:02:01 +08:00
},
].concat(getChildren(content.api || ['placeholder'])),
)}
</article>
</DocumentTitle>
);
}
}