import React, { Children, cloneElement } from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { getChildren } from 'jsonml.js/lib/utils';
import { Timeline, Alert, Affix } from 'antd';
import EditButton from './EditButton';
import { getMetaDescription } from '../utils';
class Article extends React.Component {
shouldComponentUpdate(nextProps) {
const { location } = this.props;
const { location: nextLocation } = nextProps;
if (nextLocation.pathname === location.pathname) {
return false;
}
return true;
}
onResourceClick = e => {
if (!window.gtag) {
return;
}
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,
});
}
};
getArticle(article) {
const { content } = this.props;
const { meta } = content;
if (!meta.timeline) {
return article;
}
const timelineItems = [];
let temp = [];
let i = 1;
Children.forEach(article.props.children, child => {
if (child.type === 'h2' && temp.length > 0) {
timelineItems.push({temp});
temp = [];
i += 1;
}
temp.push(child);
});
if (temp.length > 0) {
timelineItems.push({temp});
}
return cloneElement(article, {
children: {timelineItems},
});
}
render() {
const {
content,
intl: { locale },
utils,
} = this.props;
const { meta, description } = content;
const { title, subtitle, filename } = meta;
const isNotTranslated = locale === 'en-US' && typeof title === 'object';
const helmetTitle = `${title[locale] || title} - Ant Design`;
const helmetDesc = getMetaDescription(description);
const contentChild = getMetaDescription(getChildren(content.content));
const metaDesc = helmetDesc || contentChild;
return (
/* eslint-disable-next-line */
{helmetTitle && {helmetTitle}}
{helmetTitle && }
{metaDesc && }
{isNotTranslated && (
This article has not been translated yet. Wanna help us out?
See this issue on GitHub.
}
/>
)}
{title[locale] || title}
{!subtitle || locale === 'en-US' ? null : {subtitle}}
} filename={filename} />
{!description
? null
: utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(description)),
)}
{!content.toc || content.toc.length <= 1 || meta.toc === false ? null : (
{utils.toReactComponent(['ul', { className: 'toc' }].concat(getChildren(content.toc)))}
)}
{this.getArticle(
utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(content.content)),
),
)}
{utils.toReactComponent(
[
'section',
{
className: 'markdown api-container',
},
].concat(getChildren(content.api || ['placeholder'])),
)}
);
}
}
export default injectIntl(Article);