ant-design/site/theme/template/Content/MainContent.jsx

571 lines
18 KiB
React
Raw Normal View History

import React, { cloneElement, Component } from 'react';
import { Link, browserHistory } from 'bisheng/router';
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';
import ContributorsList from '@qixian.cs/github-contributors-list';
import classNames from 'classnames';
2019-01-09 12:33:28 +08:00
import get from 'lodash/get';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
import ThemeIcon from './ThemeIcon';
import Article from './Article';
import PrevAndNext from './PrevAndNext';
import Footer from '../Layout/Footer';
docs: Site with single paging (#21360) * patch route * use data for promise * rename Article file * Article in TS * clean up * use collect * adjust css * card it * listing * res * hiring * add footer * english it * rm others * fix lint * fix navigation * add dropdown button * Header with TS * split input & logo * navigation out * use flex * flex everything * stretch * hide search when narrow * init category * global rules * more cat * pages * level 2 width * level 3 * level 4 * skip before ready * clean up * unqiue shadow variable * update eslintignore * update ignore * fix ssr * fix location param * replace images * shake more * fix top of navigation * remove home * reorder nav & adjust padding style * narrow res style * Update research-form-page.zh-CN.md (#21426) Co-authored-by: Golevka <huangsamfisher@163.com> * rm skip * narrow merge in * reset p style * update svg * fix lint * update ignore * update lint ignore * Update research-result-page.zh-CN.md (#21432) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-result-page.zh-CN.md * Update research-workbench.zh-CN.md (#21438) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md * Update research-list-page.zh-CN.md (#21441) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-list-page.zh-CN.md * padding use 40px * add responsive of ref * fix p margin * Update research-workbench.zh-CN.md * Update buttons.md (#21456) Co-authored-by: yingxirz <inseeing@gmail.com> * Update resources.en-US.md (#21457) * Update research-navigation.zh-CN.md (#21453) * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-empty.zh-CN.md (#21451) * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md Co-authored-by: 二货机器人 <smith3816@gmail.com> * Update research-exception-page.zh-CN.md (#21452) * Update research-exception-page.zh-CN.md * Update research-exception-page.zh-CN.md * Update research-message-and-feedback.zh-CN.md (#21463) * Update research-message-and-feedback.zh-CN.md (#21467) * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * replace background * fix lines margin * home padding * patch minTilda doc * Update resources.zh-CN.md (#21503) * clean up * Update research-workbench.zh-CN.md (#21512) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-overview.zh-CN.md (#21513) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result-page.zh-CN.md (#21514) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-list-page.zh-CN.md (#21515) Co-authored-by: yingxirz <inseeing@gmail.com> * fix doc * Update research-message-and-feedback.zh-CN.md (#21516) * adjust home nav width * Update research-message-and-feedback.zh-CN.md (#21535) * Update research-form-page.zh-CN.md (#21554) Co-authored-by: Golevka <huangsamfisher@163.com> * patch file * clean up * update shadow.zh-CN update shadow.zh-CN * add shadow table * Update visual.zh-CN.md (#21577) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * patch docs * fix doc * rm page suffix * fix style * mobile it * Update resources.en-US.md (#21561) * chart res * add qr code * adjust qr * Update visual.zh-CN.md (#21603) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * fix site qr * mobile height of it * book update * 3.x site link * isMobile is new cnotext * Update research-form.zh-CN.md (#21604) Co-authored-by: Golevka <huangsamfisher@163.com> * adjust form doc * mobile use link * adjust order * flush * fix ts * Update research-navigation.zh-CN.md (#21606) * Update research-navigation.zh-CN.md (#21609) * rm useless lines * add mobile icon * Update research-exception.zh-CN.md (#21612) * Update research-empty.zh-CN.md (#21610) * Update research-workbench.zh-CN.md * Update visual.zh-CN.md * adjust mobile icon * Update research-message-and-feedback.zh-CN.md (#21613) * Update research-list.zh-CN.md (#21617) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md (#21618) Co-authored-by: yingxirz <inseeing@gmail.com> * Update visual.zh-CN.md (#21619) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update research-result.zh-CN.md (#21620) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-form.zh-CN.md (#21615) * Update research-message-and-feedback.zh-CN.md (#21616) * Update research-list.zh-CN.md (#21621) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result.zh-CN.md (#21624) Co-authored-by: mihaideyu <zxy1010414746@163.com> * update ref color * update zip file * fix mobile icon * rm skip dark * fix cat * update zip link * update zip link Co-authored-by: Golevka <huangsamfisher@163.com> Co-authored-by: mihaideyu <zxy1010414746@163.com> Co-authored-by: yingxirz <inseeing@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com> Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com> Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com> Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
2020-02-27 10:53:30 +08:00
import SiteContext from '../Layout/SiteContext';
import ComponentDoc from './ComponentDoc';
import ComponentOverview from './ComponentOverview';
import * as utils from '../utils';
2016-08-23 21:00:35 +08:00
function getModuleData(props) {
2017-10-09 13:23:20 +08:00
const { pathname } = props.location;
const moduleName = /^\/?components/.test(pathname)
2018-12-07 16:17:45 +08:00
? '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);
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);
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';
}
}
2019-08-08 12:35:48 +08:00
class MainContent extends Component {
static contextType = SiteContext;
2016-09-19 11:23:41 +08:00
state = {
openKeys: undefined,
2018-12-07 16:17:45 +08:00
};
2016-03-07 17:33:38 +08:00
componentDidMount() {
2020-08-03 16:27:56 +08:00
window.addEventListener('load', this.handleLoad);
window.addEventListener('hashchange', this.handleHashChange);
2016-07-26 17:40:08 +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) {
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);
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();
}
}
componentWillUnmount() {
if (this.scroller) {
this.scroller.destroy();
}
window.removeEventListener('load', this.handleLoad);
window.removeEventListener('hashchange', this.handleHashChange);
clearTimeout(this.timeout);
}
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 => {
if (menuItem.title === 'Overview' || menuItem.title === '组件总览') {
return menuItem.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons));
}
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))
.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
</Menu.ItemGroup>
);
}
2018-11-28 15:00:03 +08:00
if (menuItem.children) {
return (
<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}>
{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);
})}
</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();
};
handleHashChange = () => {
this.timeout = setTimeout(() => {
updateActiveToc(window.location.hash.replace(/^#/, ''));
});
};
bindScroller() {
if (this.scroller) {
this.scroller.destroy();
}
2019-08-08 18:17:28 +08:00
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
2020-08-03 16:27:56 +08:00
offset: '10px',
})
.onStepEnter(({ element }) => {
updateActiveToc(element.id);
});
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 },
location,
2019-08-08 12:35:48 +08:00
} = this.props;
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;
const url = item.filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').toLowerCase();
2016-11-15 15:10:01 +08:00
const child = !item.link ? (
<Link
2018-12-07 16:17:45 +08:00
to={utils.getLocalizedPathname(
/^components/.test(url) ? `${url}/` : url,
locale === 'zh-CN',
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"
disabled={disabled}
2018-12-07 16:17:45 +08:00
className="menu-item-link-outside"
>
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}>
{child}
2016-03-03 11:12:46 +08:00
</Menu.Item>
);
}
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;
}
if (menu.type && menu.type === Menu.Item) {
2016-03-07 10:32:14 +08:00
return menu;
}
if (Array.isArray(menu)) {
return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []);
2016-03-07 10:32:14 +08:00
}
return this.flattenMenu((menu.props && menu.props.children) || menu.children);
2016-03-07 10:32:14 +08:00
}
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';
2021-08-23 10:46:56 +08:00
setColor(false);
delete query.theme;
} else {
2021-08-23 10:46:56 +08:00
if (theme === 'dark') {
document.documentElement.style.colorScheme = 'dark';
setColor(true);
}
query.theme = theme;
}
browserHistory.push({
pathname: `/${pathname}`,
query,
hash,
});
}
2019-12-18 18:45:05 +08:00
};
renderContributors() {
const {
localizedPageData: { meta },
intl: { formatMessage },
} = this.props;
2016-02-29 14:08:40 +08:00
return (
<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}
docs: Site with single paging (#21360) * patch route * use data for promise * rename Article file * Article in TS * clean up * use collect * adjust css * card it * listing * res * hiring * add footer * english it * rm others * fix lint * fix navigation * add dropdown button * Header with TS * split input & logo * navigation out * use flex * flex everything * stretch * hide search when narrow * init category * global rules * more cat * pages * level 2 width * level 3 * level 4 * skip before ready * clean up * unqiue shadow variable * update eslintignore * update ignore * fix ssr * fix location param * replace images * shake more * fix top of navigation * remove home * reorder nav & adjust padding style * narrow res style * Update research-form-page.zh-CN.md (#21426) Co-authored-by: Golevka <huangsamfisher@163.com> * rm skip * narrow merge in * reset p style * update svg * fix lint * update ignore * update lint ignore * Update research-result-page.zh-CN.md (#21432) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-result-page.zh-CN.md * Update research-workbench.zh-CN.md (#21438) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md * Update research-list-page.zh-CN.md (#21441) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-list-page.zh-CN.md * padding use 40px * add responsive of ref * fix p margin * Update research-workbench.zh-CN.md * Update buttons.md (#21456) Co-authored-by: yingxirz <inseeing@gmail.com> * Update resources.en-US.md (#21457) * Update research-navigation.zh-CN.md (#21453) * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-empty.zh-CN.md (#21451) * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md Co-authored-by: 二货机器人 <smith3816@gmail.com> * Update research-exception-page.zh-CN.md (#21452) * Update research-exception-page.zh-CN.md * Update research-exception-page.zh-CN.md * Update research-message-and-feedback.zh-CN.md (#21463) * Update research-message-and-feedback.zh-CN.md (#21467) * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * replace background * fix lines margin * home padding * patch minTilda doc * Update resources.zh-CN.md (#21503) * clean up * Update research-workbench.zh-CN.md (#21512) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-overview.zh-CN.md (#21513) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result-page.zh-CN.md (#21514) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-list-page.zh-CN.md (#21515) Co-authored-by: yingxirz <inseeing@gmail.com> * fix doc * Update research-message-and-feedback.zh-CN.md (#21516) * adjust home nav width * Update research-message-and-feedback.zh-CN.md (#21535) * Update research-form-page.zh-CN.md (#21554) Co-authored-by: Golevka <huangsamfisher@163.com> * patch file * clean up * update shadow.zh-CN update shadow.zh-CN * add shadow table * Update visual.zh-CN.md (#21577) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * patch docs * fix doc * rm page suffix * fix style * mobile it * Update resources.en-US.md (#21561) * chart res * add qr code * adjust qr * Update visual.zh-CN.md (#21603) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * fix site qr * mobile height of it * book update * 3.x site link * isMobile is new cnotext * Update research-form.zh-CN.md (#21604) Co-authored-by: Golevka <huangsamfisher@163.com> * adjust form doc * mobile use link * adjust order * flush * fix ts * Update research-navigation.zh-CN.md (#21606) * Update research-navigation.zh-CN.md (#21609) * rm useless lines * add mobile icon * Update research-exception.zh-CN.md (#21612) * Update research-empty.zh-CN.md (#21610) * Update research-workbench.zh-CN.md * Update visual.zh-CN.md * adjust mobile icon * Update research-message-and-feedback.zh-CN.md (#21613) * Update research-list.zh-CN.md (#21617) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md (#21618) Co-authored-by: yingxirz <inseeing@gmail.com> * Update visual.zh-CN.md (#21619) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update research-result.zh-CN.md (#21620) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-form.zh-CN.md (#21615) * Update research-message-and-feedback.zh-CN.md (#21616) * Update research-list.zh-CN.md (#21621) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result.zh-CN.md (#21624) Co-authored-by: mihaideyu <zxy1010414746@163.com> * update ref color * update zip file * fix mobile icon * rm skip dark * fix cat * update zip link * update zip link Co-authored-by: Golevka <huangsamfisher@163.com> Co-authored-by: mihaideyu <zxy1010414746@163.com> Co-authored-by: yingxirz <inseeing@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com> Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com> Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com> Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
2020-02-27 10:53:30 +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')) {
const type = utils.isZhCN(location.pathname) ? '重型组件' : 'ProComponents';
return (
<ComponentOverview
{...this.props}
doc={localizedPageData}
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',
filename: 'https://procomponents.ant.design/components/editable-table',
subtitle: '可编辑表格',
title: 'EditableProTable',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
])}
/>
);
}
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;
const { openKeys, mobileMenuOpen } = this.state;
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}
onClick={() => this.setState({ mobileMenuOpen: false })}
>
{menuItems}
</Menu>
);
const componentPage = /^\/?components/.test(location.pathname);
return (
<div className="main-wrapper">
<Row>
{isMobile ? (
<>
<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>
</>
) : (
<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">
<Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
<Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
</Dropdown>
</div>
)}
<PrevAndNext prev={prev} next={next} />
<Footer location={location} />
</Col>
</Row>
</div>
2016-02-29 14:08:40 +08:00
);
}
}
2019-08-08 12:35:48 +08:00
export default injectIntl(MainContent);