2022-09-30 16:54:51 +08:00
|
|
|
import React, { cloneElement, Component } from 'react';
|
2020-09-14 10:48:08 +08:00
|
|
|
import { Link, browserHistory } from 'bisheng/router';
|
2022-09-30 16:54:51 +08:00
|
|
|
import { Row, Col, Menu, Affix, Tooltip, Avatar, Dropdown, Drawer } from 'antd';
|
|
|
|
import { injectIntl, FormattedMessage } from 'react-intl';
|
|
|
|
import {
|
|
|
|
LeftOutlined,
|
|
|
|
RightOutlined,
|
|
|
|
ExportOutlined,
|
|
|
|
DoubleRightOutlined,
|
|
|
|
} from '@ant-design/icons';
|
2019-12-17 17:58:58 +08:00
|
|
|
import ContributorsList from '@qixian.cs/github-contributors-list';
|
2017-03-17 18:56:37 +08:00
|
|
|
import classNames from 'classnames';
|
2019-01-09 12:33:28 +08:00
|
|
|
import get from 'lodash/get';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2020-03-29 10:39:46 +08:00
|
|
|
import ThemeIcon from './ThemeIcon';
|
2016-05-27 11:48:08 +08:00
|
|
|
import Article from './Article';
|
2018-12-24 15:59:59 +08:00
|
|
|
import PrevAndNext from './PrevAndNext';
|
|
|
|
import Footer from '../Layout/Footer';
|
2020-02-27 10:53:30 +08:00
|
|
|
import SiteContext from '../Layout/SiteContext';
|
2016-05-27 11:48:08 +08:00
|
|
|
import ComponentDoc from './ComponentDoc';
|
2020-05-31 11:48:34 +08:00
|
|
|
import ComponentOverview from './ComponentOverview';
|
2016-05-27 11:48:08 +08:00
|
|
|
import * as utils from '../utils';
|
2016-08-23 21:00:35 +08:00
|
|
|
|
2016-12-09 13:02:16 +08:00
|
|
|
function getModuleData(props) {
|
2017-10-09 13:23:20 +08:00
|
|
|
const { pathname } = props.location;
|
2018-06-22 21:05:13 +08:00
|
|
|
const moduleName = /^\/?components/.test(pathname)
|
2018-12-07 16:17:45 +08:00
|
|
|
? 'components'
|
|
|
|
: pathname
|
|
|
|
.split('/')
|
|
|
|
.filter(item => item)
|
|
|
|
.slice(0, 2)
|
|
|
|
.join('/');
|
2016-12-09 13:02:16 +08:00
|
|
|
const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
|
2019-12-19 14:47:12 +08:00
|
|
|
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));
|
2016-09-27 10:06:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function fileNameToPath(filename) {
|
2020-04-03 15:02:11 +08:00
|
|
|
const snippets = filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').split('/');
|
2016-09-27 10:06:34 +08:00
|
|
|
return snippets[snippets.length - 1];
|
|
|
|
}
|
|
|
|
|
2020-05-24 17:11:34 +08:00
|
|
|
function getSideBarOpenKeys(nextProps) {
|
2018-10-30 16:01:21 +08:00
|
|
|
const { themeConfig } = nextProps;
|
|
|
|
const { pathname } = nextProps.location;
|
|
|
|
const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
|
|
|
|
const moduleData = getModuleData(nextProps);
|
2018-12-07 16:17:45 +08:00
|
|
|
const shouldOpenKeys = utils
|
|
|
|
.getMenuItems(moduleData, locale, themeConfig.categoryOrder, themeConfig.typeOrder)
|
2018-12-22 18:13:20 +08:00
|
|
|
.map(m => (m.title && m.title[locale]) || m.title);
|
2018-10-30 16:01:21 +08:00
|
|
|
return shouldOpenKeys;
|
2020-05-24 17:11:34 +08:00
|
|
|
}
|
|
|
|
|
2020-09-07 15:43:56 +08:00
|
|
|
function clearActiveToc() {
|
|
|
|
[].forEach.call(document.querySelectorAll('.toc-affix li a'), node => {
|
|
|
|
node.className = '';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-05-24 17:11:34 +08:00
|
|
|
function updateActiveToc(id) {
|
|
|
|
const currentNode = document.querySelectorAll(`.toc-affix li a[href="#${id}"]`)[0];
|
|
|
|
if (currentNode) {
|
2020-09-07 15:43:56 +08:00
|
|
|
clearActiveToc();
|
2020-05-24 17:11:34 +08:00
|
|
|
currentNode.className = 'current';
|
|
|
|
}
|
|
|
|
}
|
2018-10-30 16:01:21 +08:00
|
|
|
|
2019-08-08 12:35:48 +08:00
|
|
|
class MainContent extends Component {
|
2020-05-29 18:05:58 +08:00
|
|
|
static contextType = SiteContext;
|
2016-09-19 11:23:41 +08:00
|
|
|
|
2018-10-30 16:01:21 +08:00
|
|
|
state = {
|
|
|
|
openKeys: undefined,
|
2018-12-07 16:17:45 +08:00
|
|
|
};
|
2016-05-27 11:48:08 +08:00
|
|
|
|
2016-03-07 17:33:38 +08:00
|
|
|
componentDidMount() {
|
2020-08-03 16:27:56 +08:00
|
|
|
window.addEventListener('load', this.handleLoad);
|
2020-05-24 17:11:34 +08:00
|
|
|
window.addEventListener('hashchange', this.handleHashChange);
|
2016-07-26 17:40:08 +08:00
|
|
|
}
|
|
|
|
|
2018-10-30 16:01:21 +08:00
|
|
|
static getDerivedStateFromProps(props, state) {
|
2018-12-27 09:44:52 +08:00
|
|
|
if (!state.openKeys) {
|
|
|
|
return {
|
|
|
|
...state,
|
|
|
|
openKeys: getSideBarOpenKeys(props),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return null;
|
2016-09-19 11:23:41 +08:00
|
|
|
}
|
|
|
|
|
2018-01-05 18:37:07 +08:00
|
|
|
componentDidUpdate(prevProps) {
|
2018-06-22 21:05:13 +08:00
|
|
|
const { location } = this.props;
|
2018-12-28 18:07:16 +08:00
|
|
|
const { location: prevLocation = {} } = prevProps || {};
|
|
|
|
if (!prevProps || prevLocation.pathname !== location.pathname) {
|
2017-12-03 17:19:59 +08:00
|
|
|
this.bindScroller();
|
|
|
|
}
|
2018-12-28 18:07:16 +08:00
|
|
|
if (!window.location.hash && prevLocation.pathname !== location.pathname) {
|
2020-09-07 15:43:56 +08:00
|
|
|
clearActiveToc();
|
2019-05-16 13:28:23 +08:00
|
|
|
window.scrollTo(0, 0);
|
2016-06-15 11:57:26 +08:00
|
|
|
}
|
2019-01-09 12:33:28 +08:00
|
|
|
// when subMenu not equal
|
|
|
|
if (get(this.props, 'route.path') !== get(prevProps, 'route.path')) {
|
|
|
|
// reset menu OpenKeys
|
|
|
|
this.handleMenuOpenChange();
|
|
|
|
}
|
2019-05-16 13:28:23 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2020-06-01 19:29:58 +08:00
|
|
|
if (this.scroller) {
|
|
|
|
this.scroller.destroy();
|
|
|
|
}
|
2021-04-14 17:27:42 +08:00
|
|
|
window.removeEventListener('load', this.handleLoad);
|
2020-05-24 17:11:34 +08:00
|
|
|
window.removeEventListener('hashchange', this.handleHashChange);
|
|
|
|
clearTimeout(this.timeout);
|
2019-05-16 13:28:23 +08:00
|
|
|
}
|
|
|
|
|
2018-11-28 15:00:03 +08:00
|
|
|
getMenuItems(footerNavIcons = {}) {
|
2018-12-07 16:17:45 +08:00
|
|
|
const {
|
2019-08-12 13:34:23 +08:00
|
|
|
themeConfig,
|
2018-12-07 16:17:45 +08:00
|
|
|
intl: { locale },
|
2019-08-12 13:34:23 +08:00
|
|
|
} = this.props;
|
2018-11-28 15:00:03 +08:00
|
|
|
const moduleData = getModuleData(this.props);
|
|
|
|
const menuItems = utils.getMenuItems(
|
|
|
|
moduleData,
|
|
|
|
locale,
|
|
|
|
themeConfig.categoryOrder,
|
|
|
|
themeConfig.typeOrder,
|
|
|
|
);
|
2018-12-07 16:17:45 +08:00
|
|
|
return menuItems.map(menuItem => {
|
2020-05-31 11:48:34 +08:00
|
|
|
if (menuItem.title === 'Overview' || menuItem.title === '组件总览') {
|
|
|
|
return menuItem.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons));
|
|
|
|
}
|
2019-12-19 14:47:12 +08:00
|
|
|
if (menuItem.type === 'type') {
|
|
|
|
return (
|
|
|
|
<Menu.ItemGroup title={menuItem.title} key={menuItem.title}>
|
|
|
|
{menuItem.children
|
2020-08-28 22:55:16 +08:00
|
|
|
.sort((a, b) => a.title.localeCompare(b.title))
|
2019-12-19 14:47:12 +08:00
|
|
|
.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
|
|
|
|
</Menu.ItemGroup>
|
|
|
|
);
|
|
|
|
}
|
2018-11-28 15:00:03 +08:00
|
|
|
if (menuItem.children) {
|
|
|
|
return (
|
2022-09-30 16:54:51 +08:00
|
|
|
<Menu.SubMenu title={menuItem.title} key={menuItem.title}>
|
2019-12-26 15:27:52 +08:00
|
|
|
{menuItem.children.map(child => {
|
|
|
|
if (child.type === 'type') {
|
|
|
|
return (
|
|
|
|
<Menu.ItemGroup title={child.title} key={child.title}>
|
2020-01-20 17:21:29 +08:00
|
|
|
{child.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
|
2019-12-26 15:27:52 +08:00
|
|
|
</Menu.ItemGroup>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return this.generateMenuItem(false, child, footerNavIcons);
|
|
|
|
})}
|
2022-09-30 16:54:51 +08:00
|
|
|
</Menu.SubMenu>
|
2018-11-28 15:00:03 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
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 };
|
|
|
|
}
|
|
|
|
|
2019-08-08 12:35:48 +08:00
|
|
|
getActiveMenuItem() {
|
2019-08-12 13:34:23 +08:00
|
|
|
const {
|
|
|
|
params: { children },
|
|
|
|
location,
|
|
|
|
} = this.props;
|
2019-08-08 12:35:48 +08:00
|
|
|
return (
|
|
|
|
(children && children.replace('-cn', '')) || location.pathname.replace(/(^\/|-cn$)/g, '')
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
handleMenuOpenChange = openKeys => {
|
2018-11-28 15:00:03 +08:00
|
|
|
this.setState({ openKeys });
|
2018-12-07 16:17:45 +08:00
|
|
|
};
|
2018-11-28 15:00:03 +08:00
|
|
|
|
2020-08-03 16:27:56 +08:00
|
|
|
handleLoad = () => {
|
|
|
|
if (window.location.hash) {
|
|
|
|
updateActiveToc(window.location.hash.replace(/^#/, ''));
|
2022-09-06 14:03:39 +08:00
|
|
|
|
|
|
|
// 有时候不滚动,强制触发一次滚动逻辑
|
|
|
|
setTimeout(() => {
|
|
|
|
const target = document.querySelector(window.location.hash);
|
|
|
|
if (target) {
|
|
|
|
target.scrollIntoView();
|
|
|
|
}
|
|
|
|
}, 100);
|
2020-08-03 16:27:56 +08:00
|
|
|
}
|
|
|
|
this.bindScroller();
|
2019-05-16 14:45:17 +08:00
|
|
|
};
|
|
|
|
|
2020-05-24 17:11:34 +08:00
|
|
|
handleHashChange = () => {
|
|
|
|
this.timeout = setTimeout(() => {
|
|
|
|
updateActiveToc(window.location.hash.replace(/^#/, ''));
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2017-12-03 17:19:59 +08:00
|
|
|
bindScroller() {
|
|
|
|
if (this.scroller) {
|
2019-05-16 13:28:23 +08:00
|
|
|
this.scroller.destroy();
|
2017-12-03 17:19:59 +08:00
|
|
|
}
|
2019-08-08 18:17:28 +08:00
|
|
|
if (!document.querySelector('.markdown > h2, .code-box')) {
|
|
|
|
return;
|
|
|
|
}
|
2020-04-03 15:02:11 +08:00
|
|
|
// eslint-disable-next-line global-require
|
|
|
|
require('intersection-observer');
|
|
|
|
// eslint-disable-next-line global-require
|
|
|
|
const scrollama = require('scrollama');
|
2017-12-03 17:19:59 +08:00
|
|
|
this.scroller = scrollama();
|
|
|
|
this.scroller
|
|
|
|
.setup({
|
|
|
|
step: '.markdown > h2, .code-box', // required
|
2020-08-03 16:27:56 +08:00
|
|
|
offset: '10px',
|
2017-12-03 17:19:59 +08:00
|
|
|
})
|
|
|
|
.onStepEnter(({ element }) => {
|
2020-05-24 17:11:34 +08:00
|
|
|
updateActiveToc(element.id);
|
2017-12-03 17:19:59 +08:00
|
|
|
});
|
2016-03-07 17:33:38 +08:00
|
|
|
}
|
2016-03-03 11:12:46 +08:00
|
|
|
|
2018-08-21 17:46:20 +08:00
|
|
|
generateMenuItem(isTop, item, { before = null, after = null }) {
|
2018-12-07 16:17:45 +08:00
|
|
|
const {
|
|
|
|
intl: { locale },
|
2020-09-14 10:48:08 +08:00
|
|
|
location,
|
2019-08-08 12:35:48 +08:00
|
|
|
} = this.props;
|
2016-09-27 10:06:34 +08:00
|
|
|
const key = fileNameToPath(item.filename);
|
2018-12-22 18:13:20 +08:00
|
|
|
if (!item.title) {
|
|
|
|
return null;
|
|
|
|
}
|
2017-12-22 17:49:38 +08:00
|
|
|
const title = item.title[locale] || item.title;
|
2018-12-07 16:17:45 +08:00
|
|
|
const text = isTop
|
|
|
|
? title
|
|
|
|
: [
|
|
|
|
<span key="english">{title}</span>,
|
|
|
|
<span className="chinese" key="chinese">
|
|
|
|
{item.subtitle}
|
|
|
|
</span>,
|
|
|
|
];
|
2017-10-09 13:23:20 +08:00
|
|
|
const { disabled } = item;
|
2020-04-03 15:02:11 +08:00
|
|
|
const url = item.filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').toLowerCase();
|
2020-09-14 10:48:08 +08:00
|
|
|
|
2016-11-15 15:10:01 +08:00
|
|
|
const child = !item.link ? (
|
2016-12-09 13:02:16 +08:00
|
|
|
<Link
|
2018-12-07 16:17:45 +08:00
|
|
|
to={utils.getLocalizedPathname(
|
|
|
|
/^components/.test(url) ? `${url}/` : url,
|
|
|
|
locale === 'zh-CN',
|
2020-09-14 10:48:08 +08:00
|
|
|
location.query,
|
2018-12-07 16:17:45 +08:00
|
|
|
)}
|
|
|
|
disabled={disabled}
|
|
|
|
>
|
|
|
|
{before}
|
|
|
|
{text}
|
|
|
|
{after}
|
|
|
|
</Link>
|
|
|
|
) : (
|
|
|
|
<a
|
|
|
|
href={item.link}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2016-12-09 13:02:16 +08:00
|
|
|
disabled={disabled}
|
2018-12-07 16:17:45 +08:00
|
|
|
className="menu-item-link-outside"
|
2016-12-09 13:02:16 +08:00
|
|
|
>
|
2018-12-07 16:17:45 +08:00
|
|
|
{before}
|
2019-12-26 11:50:01 +08:00
|
|
|
{text} <ExportOutlined />
|
2018-12-07 16:17:45 +08:00
|
|
|
{after}
|
|
|
|
</a>
|
|
|
|
);
|
2016-03-03 11:12:46 +08:00
|
|
|
|
|
|
|
return (
|
2016-05-06 11:06:26 +08:00
|
|
|
<Menu.Item key={key.toLowerCase()} disabled={disabled}>
|
2016-04-29 12:13:27 +08:00
|
|
|
{child}
|
2016-03-03 11:12:46 +08:00
|
|
|
</Menu.Item>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-03-29 10:39:46 +08:00
|
|
|
getThemeSwitchMenu() {
|
|
|
|
const { theme } = this.context;
|
|
|
|
const {
|
|
|
|
intl: { formatMessage },
|
|
|
|
} = this.props;
|
|
|
|
return (
|
|
|
|
<Menu onClick={({ key }) => this.changeThemeMode(key)} selectedKeys={[theme]}>
|
|
|
|
{[
|
|
|
|
{ type: 'default', text: formatMessage({ id: 'app.theme.switch.default' }) },
|
|
|
|
{ type: 'dark', text: formatMessage({ id: 'app.theme.switch.dark' }) },
|
|
|
|
{ type: 'compact', text: formatMessage({ id: 'app.theme.switch.compact' }) },
|
|
|
|
].map(({ type, text }) => (
|
|
|
|
<Menu.Item key={type}>{text}</Menu.Item>
|
|
|
|
))}
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-03-07 10:32:14 +08:00
|
|
|
flattenMenu(menu) {
|
2018-12-22 18:13:20 +08:00
|
|
|
if (!menu) {
|
|
|
|
return null;
|
|
|
|
}
|
2022-09-30 16:54:51 +08:00
|
|
|
if (menu.type && menu.type === Menu.Item) {
|
2016-03-07 10:32:14 +08:00
|
|
|
return menu;
|
|
|
|
}
|
|
|
|
if (Array.isArray(menu)) {
|
2016-04-26 14:09:19 +08:00
|
|
|
return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []);
|
2016-03-07 10:32:14 +08:00
|
|
|
}
|
2017-09-20 14:57:48 +08:00
|
|
|
return this.flattenMenu((menu.props && menu.props.children) || menu.children);
|
2016-03-07 10:32:14 +08:00
|
|
|
}
|
|
|
|
|
2020-03-29 10:39:46 +08:00
|
|
|
changeThemeMode = theme => {
|
|
|
|
const { setTheme, theme: selectedTheme } = this.context;
|
2020-09-14 10:48:08 +08:00
|
|
|
const { pathname, hash, query } = this.props.location;
|
2020-03-29 10:39:46 +08:00
|
|
|
if (selectedTheme !== theme) {
|
|
|
|
setTheme(theme);
|
2020-09-14 10:48:08 +08:00
|
|
|
if (theme === 'default') {
|
2021-08-17 13:15:20 +08:00
|
|
|
document.documentElement.style.colorScheme = 'light';
|
2021-08-23 10:46:56 +08:00
|
|
|
setColor(false);
|
2020-09-14 10:48:08 +08:00
|
|
|
delete query.theme;
|
|
|
|
} else {
|
2021-08-23 10:46:56 +08:00
|
|
|
if (theme === 'dark') {
|
|
|
|
document.documentElement.style.colorScheme = 'dark';
|
|
|
|
setColor(true);
|
|
|
|
}
|
2020-09-14 10:48:08 +08:00
|
|
|
query.theme = theme;
|
|
|
|
}
|
|
|
|
browserHistory.push({
|
|
|
|
pathname: `/${pathname}`,
|
|
|
|
query,
|
|
|
|
hash,
|
|
|
|
});
|
2020-03-29 10:39:46 +08:00
|
|
|
}
|
2019-12-18 18:45:05 +08:00
|
|
|
};
|
|
|
|
|
2020-05-31 11:48:34 +08:00
|
|
|
renderContributors() {
|
|
|
|
const {
|
|
|
|
localizedPageData: { meta },
|
|
|
|
intl: { formatMessage },
|
|
|
|
} = this.props;
|
2016-02-29 14:08:40 +08:00
|
|
|
return (
|
2020-05-31 11:48:34 +08:00
|
|
|
<ContributorsList
|
|
|
|
className="contributors-list"
|
|
|
|
fileName={meta.filename}
|
|
|
|
renderItem={(item, loading) =>
|
|
|
|
loading ? (
|
|
|
|
<Avatar style={{ opacity: 0.3 }} />
|
|
|
|
) : (
|
|
|
|
<Tooltip
|
|
|
|
title={`${formatMessage({ id: 'app.content.contributors' })}: ${item.username}`}
|
|
|
|
key={item.username}
|
2020-02-27 10:53:30 +08:00
|
|
|
>
|
2020-05-31 11:48:34 +08:00
|
|
|
<a
|
|
|
|
href={`https://github.com/${item.username}`}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
<Avatar src={item.url}>{item.username}</Avatar>
|
|
|
|
</a>
|
|
|
|
</Tooltip>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
repo="ant-design"
|
|
|
|
owner="ant-design"
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderMainContent({ theme, setIframeTheme }) {
|
|
|
|
const { localizedPageData, demos, location } = this.props;
|
|
|
|
if (location.pathname.includes('components/overview')) {
|
2022-01-11 10:51:45 +08:00
|
|
|
const type = utils.isZhCN(location.pathname) ? '重型组件' : 'ProComponents';
|
2020-05-31 11:48:34 +08:00
|
|
|
return (
|
|
|
|
<ComponentOverview
|
|
|
|
{...this.props}
|
|
|
|
doc={localizedPageData}
|
2022-01-11 10:51:45 +08:00
|
|
|
componentsData={getModuleData(this.props)
|
|
|
|
.filter(({ meta }) => meta.category === 'Components')
|
|
|
|
.concat([
|
|
|
|
{
|
|
|
|
meta: {
|
|
|
|
category: 'Components',
|
|
|
|
cover:
|
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/4n5H%24UX%24j/bianzu%2525204.svg',
|
|
|
|
filename: 'https://procomponents.ant.design/components/layout',
|
|
|
|
subtitle: '高级布局',
|
|
|
|
title: 'ProLayout',
|
|
|
|
type,
|
|
|
|
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
meta: {
|
|
|
|
category: 'Components',
|
|
|
|
cover: 'https://gw.alipayobjects.com/zos/antfincdn/mStei5BFC/bianzu%2525207.svg',
|
|
|
|
filename: 'https://procomponents.ant.design/components/form',
|
|
|
|
subtitle: '高级表单',
|
|
|
|
title: 'ProForm',
|
|
|
|
type,
|
|
|
|
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
meta: {
|
|
|
|
category: 'Components',
|
|
|
|
cover:
|
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
|
|
|
|
filename: 'https://procomponents.ant.design/components/table',
|
|
|
|
subtitle: '高级表格',
|
|
|
|
title: 'ProTable',
|
|
|
|
type,
|
|
|
|
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
meta: {
|
|
|
|
category: 'Components',
|
|
|
|
cover:
|
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/H0%26LSYYfh/bianzu%2525209.svg',
|
|
|
|
filename: 'https://procomponents.ant.design/components/descriptions',
|
|
|
|
subtitle: '高级定义列表',
|
|
|
|
title: 'ProDescriptions',
|
|
|
|
type,
|
|
|
|
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
meta: {
|
|
|
|
category: 'Components',
|
|
|
|
cover: 'https://gw.alipayobjects.com/zos/antfincdn/uZUmLtne5/bianzu%2525209.svg',
|
|
|
|
filename: 'https://procomponents.ant.design/components/list',
|
|
|
|
subtitle: '高级列表',
|
|
|
|
title: 'ProList',
|
|
|
|
type,
|
|
|
|
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
meta: {
|
|
|
|
category: 'Components',
|
|
|
|
cover: 'https://gw.alipayobjects.com/zos/antfincdn/N3eU432oA/bianzu%2525209.svg',
|
2022-02-24 10:54:57 +08:00
|
|
|
filename: 'https://procomponents.ant.design/components/editable-table',
|
2022-01-11 10:51:45 +08:00
|
|
|
subtitle: '可编辑表格',
|
|
|
|
title: 'EditableProTable',
|
|
|
|
type,
|
|
|
|
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
])}
|
2020-05-31 11:48:34 +08:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
if (demos) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ComponentDoc
|
|
|
|
{...this.props}
|
|
|
|
doc={localizedPageData}
|
|
|
|
demos={demos}
|
|
|
|
theme={theme}
|
|
|
|
setIframeTheme={setIframeTheme}
|
|
|
|
/>
|
|
|
|
{this.renderContributors()}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Article {...this.props} content={localizedPageData} />
|
|
|
|
{this.renderContributors()}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { demos, location } = this.props;
|
2022-09-30 16:54:51 +08:00
|
|
|
const { openKeys, mobileMenuOpen } = this.state;
|
2020-05-31 11:48:34 +08:00
|
|
|
const { isMobile, theme, setIframeTheme } = this.context;
|
|
|
|
const activeMenuItem = this.getActiveMenuItem();
|
|
|
|
const menuItems = this.getMenuItems();
|
|
|
|
const menuItemsForFooterNav = this.getMenuItems({
|
|
|
|
before: <LeftOutlined className="footer-nav-icon-before" />,
|
|
|
|
after: <RightOutlined className="footer-nav-icon-after" />,
|
|
|
|
});
|
|
|
|
const { prev, next } = this.getFooterNav(menuItemsForFooterNav, activeMenuItem);
|
|
|
|
const mainContainerClass = classNames('main-container', {
|
|
|
|
'main-container-component': !!demos,
|
|
|
|
});
|
|
|
|
const menuChild = (
|
|
|
|
<Menu
|
|
|
|
inlineIndent={30}
|
|
|
|
className="aside-container menu-site"
|
|
|
|
mode="inline"
|
|
|
|
openKeys={openKeys}
|
|
|
|
selectedKeys={[activeMenuItem]}
|
|
|
|
onOpenChange={this.handleMenuOpenChange}
|
2022-09-30 16:54:51 +08:00
|
|
|
onClick={() => this.setState({ mobileMenuOpen: false })}
|
2020-05-31 11:48:34 +08:00
|
|
|
>
|
|
|
|
{menuItems}
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
const componentPage = /^\/?components/.test(location.pathname);
|
|
|
|
return (
|
|
|
|
<div className="main-wrapper">
|
|
|
|
<Row>
|
|
|
|
{isMobile ? (
|
2022-09-30 16:54:51 +08:00
|
|
|
<>
|
|
|
|
<a
|
|
|
|
onClick={() => this.setState({ mobileMenuOpen: true })}
|
|
|
|
className="mobile-menu-trigger"
|
|
|
|
>
|
|
|
|
<DoubleRightOutlined style={{ marginRight: 3 }} />
|
|
|
|
<FormattedMessage id="app.header.menu.article.trigger" />
|
|
|
|
</a>
|
|
|
|
<Drawer
|
|
|
|
placement="left"
|
|
|
|
width={300}
|
|
|
|
title={null}
|
|
|
|
closable={false}
|
|
|
|
open={mobileMenuOpen}
|
|
|
|
bodyStyle={{ overflowX: 'hidden' }}
|
|
|
|
onClose={() => this.setState({ mobileMenuOpen: false })}
|
|
|
|
>
|
|
|
|
{cloneElement(menuChild, {
|
|
|
|
style: { margin: '0 -24px' },
|
|
|
|
})}
|
|
|
|
</Drawer>
|
|
|
|
</>
|
2020-05-31 11:48:34 +08:00
|
|
|
) : (
|
|
|
|
<Col xxl={4} xl={5} lg={6} md={6} sm={24} xs={24} className="main-menu">
|
|
|
|
<Affix>
|
|
|
|
<section className="main-menu-inner">{menuChild}</section>
|
|
|
|
</Affix>
|
|
|
|
</Col>
|
|
|
|
)}
|
|
|
|
<Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
|
|
|
|
<section className={mainContainerClass}>
|
|
|
|
{this.renderMainContent({ theme, setIframeTheme })}
|
|
|
|
</section>
|
|
|
|
{componentPage && (
|
|
|
|
<div className="fixed-widgets">
|
2022-01-13 13:34:34 +08:00
|
|
|
<Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
|
2020-05-31 11:48:34 +08:00
|
|
|
<Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
|
|
|
|
</Dropdown>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<PrevAndNext prev={prev} next={next} />
|
2020-09-14 10:48:08 +08:00
|
|
|
<Footer location={location} />
|
2020-05-31 11:48:34 +08:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
2016-02-29 14:08:40 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-08-08 12:35:48 +08:00
|
|
|
|
|
|
|
export default injectIntl(MainContent);
|