import React, { Component } from 'react';
import { Link, browserHistory } from 'bisheng/router';
import { Row, Col, Menu, Affix, Tooltip, Avatar, Dropdown } from 'antd';
import { injectIntl } from 'react-intl';
import { LeftOutlined, RightOutlined, ExportOutlined } from '@ant-design/icons';
import ContributorsList from '@qixian.cs/github-contributors-list';
import classNames from 'classnames';
import get from 'lodash/get';
import MobileMenu from 'rc-drawer';
import ThemeIcon from './ThemeIcon';
import Article from './Article';
import PrevAndNext from './PrevAndNext';
import Footer from '../Layout/Footer';
import SiteContext from '../Layout/SiteContext';
import ComponentDoc from './ComponentDoc';
import ComponentOverview from './ComponentOverview';
import * as utils from '../utils';
const { SubMenu } = Menu;
function getModuleData(props) {
const { pathname } = props.location;
const moduleName = /^\/?components/.test(pathname)
? 'components'
: pathname
.split('/')
.filter(item => item)
.slice(0, 2)
.join('/');
const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
let data;
switch (moduleName) {
case 'docs/react':
case 'changelog':
case 'changelog-cn':
data = [...props.picked['docs/react'], ...props.picked.changelog];
break;
default:
data = props.picked[moduleName];
}
return data.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 getSideBarOpenKeys(nextProps) {
const { themeConfig } = nextProps;
const { pathname } = nextProps.location;
const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
const moduleData = getModuleData(nextProps);
const shouldOpenKeys = utils
.getMenuItems(moduleData, locale, themeConfig.categoryOrder, themeConfig.typeOrder)
.map(m => (m.title && m.title[locale]) || m.title);
return shouldOpenKeys;
}
function clearActiveToc() {
[].forEach.call(document.querySelectorAll('.toc-affix li a'), node => {
node.className = '';
});
}
function updateActiveToc(id) {
const currentNode = document.querySelectorAll(`.toc-affix li a[href="#${id}"]`)[0];
if (currentNode) {
clearActiveToc();
currentNode.className = 'current';
}
}
class MainContent extends Component {
static contextType = SiteContext;
state = {
openKeys: undefined,
};
componentDidMount() {
window.addEventListener('load', this.handleLoad);
window.addEventListener('hashchange', this.handleHashChange);
}
static getDerivedStateFromProps(props, state) {
if (!state.openKeys) {
return {
...state,
openKeys: getSideBarOpenKeys(props),
};
}
return null;
}
componentDidUpdate(prevProps) {
const { location } = this.props;
const { location: prevLocation = {} } = prevProps || {};
if (!prevProps || prevLocation.pathname !== location.pathname) {
this.bindScroller();
}
if (!window.location.hash && prevLocation.pathname !== location.pathname) {
clearActiveToc();
window.scrollTo(0, 0);
}
// when subMenu not equal
if (get(this.props, 'route.path') !== get(prevProps, 'route.path')) {
// reset menu OpenKeys
this.handleMenuOpenChange();
}
}
componentWillUnmount() {
if (this.scroller) {
this.scroller.destroy();
}
window.removeEventListener('load', this.handleLoad);
window.removeEventListener('hashchange', this.handleHashChange);
clearTimeout(this.timeout);
}
getMenuItems(footerNavIcons = {}) {
const {
themeConfig,
intl: { locale },
} = this.props;
const moduleData = getModuleData(this.props);
const menuItems = utils.getMenuItems(
moduleData,
locale,
themeConfig.categoryOrder,
themeConfig.typeOrder,
);
return menuItems.map(menuItem => {
if (menuItem.title === 'Overview' || menuItem.title === '组件总览') {
return menuItem.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons));
}
if (menuItem.type === 'type') {
return (
{menuItem.children
.sort((a, b) => a.title.localeCompare(b.title))
.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
);
}
if (menuItem.children) {
return (
{menuItem.children.map(child => {
if (child.type === 'type') {
return (
{child.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
);
}
return this.generateMenuItem(false, child, footerNavIcons);
})}
);
}
return this.generateMenuItem(true, menuItem, footerNavIcons);
});
}
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 };
}
getActiveMenuItem() {
const {
params: { children },
location,
} = this.props;
return (
(children && children.replace('-cn', '')) || location.pathname.replace(/(^\/|-cn$)/g, '')
);
}
handleMenuOpenChange = openKeys => {
this.setState({ openKeys });
};
handleLoad = () => {
if (window.location.hash) {
updateActiveToc(window.location.hash.replace(/^#/, ''));
}
this.bindScroller();
};
handleHashChange = () => {
this.timeout = setTimeout(() => {
updateActiveToc(window.location.hash.replace(/^#/, ''));
});
};
bindScroller() {
if (this.scroller) {
this.scroller.destroy();
}
if (!document.querySelector('.markdown > h2, .code-box')) {
return;
}
// eslint-disable-next-line global-require
require('intersection-observer');
// eslint-disable-next-line global-require
const scrollama = require('scrollama');
this.scroller = scrollama();
this.scroller
.setup({
step: '.markdown > h2, .code-box', // required
offset: '10px',
})
.onStepEnter(({ element }) => {
updateActiveToc(element.id);
});
}
generateMenuItem(isTop, item, { before = null, after = null }) {
const {
intl: { locale },
location,
} = this.props;
const key = fileNameToPath(item.filename);
if (!item.title) {
return null;
}
const title = item.title[locale] || item.title;
const text = isTop
? title
: [
{title},
{item.subtitle}
,
];
const { disabled } = item;
const url = item.filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').toLowerCase();
const child = !item.link ? (
{before}
{text}
{after}
) : (
{before}
{text}
{after}
);
return (
{child}
);
}
getThemeSwitchMenu() {
const { theme } = this.context;
const {
intl: { formatMessage },
} = this.props;
return (
);
}
flattenMenu(menu) {
if (!menu) {
return null;
}
if (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);
}
changeThemeMode = theme => {
const { setTheme, theme: selectedTheme } = this.context;
const { pathname, hash, query } = this.props.location;
if (selectedTheme !== theme) {
setTheme(theme);
if (theme === 'default') {
document.documentElement.style.colorScheme = 'light';
setColor(false);
delete query.theme;
} else {
if (theme === 'dark') {
document.documentElement.style.colorScheme = 'dark';
setColor(true);
}
query.theme = theme;
}
browserHistory.push({
pathname: `/${pathname}`,
query,
hash,
});
}
};
renderContributors() {
const {
localizedPageData: { meta },
intl: { formatMessage },
} = this.props;
return (
loading ? (
) : (
{item.username}
)
}
repo="ant-design"
owner="ant-design"
/>
);
}
renderMainContent({ theme, setIframeTheme }) {
const { localizedPageData, demos, location } = this.props;
if (location.pathname.includes('components/overview')) {
return (
meta.category === 'Components',
)}
/>
);
}
if (demos) {
return (
<>
{this.renderContributors()}
>
);
}
return (
<>
{this.renderContributors()}
>
);
}
render() {
const { demos, location } = this.props;
const { openKeys } = this.state;
const { isMobile, theme, setIframeTheme } = this.context;
const activeMenuItem = this.getActiveMenuItem();
const menuItems = this.getMenuItems();
const menuItemsForFooterNav = this.getMenuItems({
before: ,
after: ,
});
const { prev, next } = this.getFooterNav(menuItemsForFooterNav, activeMenuItem);
const mainContainerClass = classNames('main-container', {
'main-container-component': !!demos,
});
const menuChild = (
);
const componentPage = /^\/?components/.test(location.pathname);
return (
{isMobile ? (
{menuChild}
) : (
)}
{this.renderMainContent({ theme, setIframeTheme })}
{componentPage && (
)}
);
}
}
export default injectIntl(MainContent);