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} ); return ( {child} ); } generateSubMenuItems(obj) { const { themeConfig } = this.props; const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true)); const itemGroups = Object.keys(obj).filter(isNotTopLevel) .sort((a, b) => themeConfig.typeOrder[a] - themeConfig.typeOrder[b]) .map((type) => { const groupItems = obj[type].sort((a, b) => { return a.title.charCodeAt(0) - b.title.charCodeAt(0); }).map(this.generateMenuItem.bind(this, false)); return ( {groupItems} ); }); return [...topLevel, ...itemGroups]; } getMenuItems() { const { themeConfig } = this.props; const moduleData = getModuleData(this.props); const menuItems = utils.getMenuItems( moduleData, this.context.intl.locale ); const categories = Object.keys(menuItems).filter(isNotTopLevel); const topLevel = this.generateSubMenuItems(menuItems.topLevel); const result = [...topLevel]; result.forEach((item, i) => { const insertCategory = categories.filter( cat => (themeConfig.categoryOrder[cat] ? themeConfig.categoryOrder[cat] <= i : i === result.length - 1) )[0]; if (insertCategory) { const target = ( {insertCategory}} key={insertCategory}> {this.generateSubMenuItems(menuItems[insertCategory])} ); result.splice(i + 1, 0, target); categories.splice(categories.indexOf(insertCategory), 1); } }); return result; } flattenMenu(menu) { if (menu && menu.type && menu.type.isMenuItem) { return menu; } if (Array.isArray(menu)) { return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []); } return this.flattenMenu((menu.props && menu.props.children) || menu.children); } getFooterNav(menuItems, activeMenuItem) { const menuItemsList = this.flattenMenu(menuItems); let activeMenuItemIndex = -1; menuItemsList.forEach((menuItem, i) => { if (menuItem && menuItem.key === activeMenuItem) { activeMenuItemIndex = i; } }); const prev = menuItemsList[activeMenuItemIndex - 1]; const next = menuItemsList[activeMenuItemIndex + 1]; return { prev, next }; } render() { const { props } = this; const activeMenuItem = getActiveMenuItem(props); const menuItems = this.getMenuItems(); const { prev, next } = this.getFooterNav(menuItems, activeMenuItem); const { localizedPageData } = props; const mainContainerClass = classNames('main-container', { 'main-container-component': !!props.demos, }); const menuChild = ( {menuItems} ); return (
{this.state.isMobile ? ( , ]} key="mobile-menu" wrapperClassName="drawer-wrapper" > {menuChild} ) : ( {menuChild} ) } { props.demos ? :
}
{ prev ? React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' }) : null } { next ? React.cloneElement(next.props.children || next.children[0], { className: 'next-page' }) : null }
); } }