import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'bisheng/router';
import { Row, Col, Menu, Icon } from 'antd';
import classNames from 'classnames';
import MobileMenu from 'rc-drawer-menu';
import Article from './Article';
import ComponentDoc from './ComponentDoc';
import * as utils from '../utils';
const { SubMenu } = Menu;
function getActiveMenuItem(props) {
const { children } = props.params;
return (children && children.replace('-cn', '')) ||
props.location.pathname.replace(/(^\/|-cn$)/g, '');
}
function getModuleData(props) {
const { pathname } = props.location;
const moduleName = /^\/?components/.test(pathname) ?
'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
moduleName === 'changelog' || moduleName === 'changelog-cn' ?
[...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
props.picked[moduleName];
const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
}
function fileNameToPath(filename) {
const snippets = filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').split('/');
return snippets[snippets.length - 1];
}
function isNotTopLevel(level) {
return level !== 'topLevel';
}
let isMobile;
utils.enquireScreen((b) => {
isMobile = b;
});
export default class MainContent extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
constructor(props) {
super(props);
this.state = {
openKeys: this.getSideBarOpenKeys(props) || [],
isMobile,
};
}
componentDidMount() {
this.componentDidUpdate();
utils.enquireScreen((b) => {
this.setState({
isMobile: !!b,
});
});
}
componentWillReceiveProps(nextProps) {
const openKeys = this.getSideBarOpenKeys(nextProps);
if (openKeys) {
this.setState({ openKeys });
}
}
componentDidUpdate(nextProps) {
if (!nextProps || nextProps.location.pathname !== this.props.location.pathname) {
this.bindScroller();
}
if (!window.location.hash && nextProps && nextProps.location.pathname !== this.props.location.pathname) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
return;
}
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
window.location.hash = window.location.hash;
}, 10);
}
componentWillUnmount() {
clearTimeout(this.timer);
this.scroller.disable();
}
bindScroller() {
if (this.scroller) {
this.scroller.disable();
}
// eslint-disable-next-line
const scrollama = require('scrollama');
this.scroller = scrollama();
this.scroller
.setup({
step: '.markdown > h2, .code-box', // required
offset: 0,
})
.onStepEnter(({ element }) => {
document.querySelectorAll('.toc-affix li a').forEach((node) => {
node.className = '';
});
const currentNode = document.querySelectorAll(`.toc-affix li a[href="#${element.id}"]`)[0];
if (currentNode) {
currentNode.className = 'current';
}
});
}
handleMenuOpenChange = (openKeys) => {
this.setState({ openKeys });
}
getSideBarOpenKeys(nextProps) {
const { pathname } = nextProps.location;
const prevModule = this.currentModule;
this.currentModule = pathname.replace(/^\//).split('/')[1] || 'components';
if (this.currentModule === 'react') {
this.currentModule = 'components';
}
const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
if (prevModule !== this.currentModule) {
const moduleData = getModuleData(nextProps);
const shouldOpenKeys = Object.keys(utils.getMenuItems(moduleData, locale));
return shouldOpenKeys;
}
}
generateMenuItem(isTop, item) {
const { locale } = this.context.intl;
const key = fileNameToPath(item.filename);
const text = isTop ?
item.title[locale] || item.title : [
{item.title},
{item.subtitle},
];
const { disabled } = item;
const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase();
const child = !item.link ? (
{text}
) : (
{text}