ant-design/site/theme/template/Layout/index.jsx

163 lines
4.9 KiB
React
Raw Normal View History

2017-11-30 21:38:48 +08:00
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
2018-01-04 20:00:38 +08:00
import { enquireScreen } from 'enquire-js';
2019-08-08 12:35:48 +08:00
import { IntlProvider } from 'react-intl';
import { Helmet, HelmetProvider } from 'react-helmet-async';
2018-05-18 11:34:26 +08:00
import 'moment/locale/zh-cn';
import { ConfigProvider } from 'antd';
import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';
// eslint-disable-next-line import/no-unresolved
import zhCN from 'antd/es/locale/zh_CN';
import Header from './Header';
import enLocale from '../../en-US';
import cnLocale from '../../zh-CN';
import * as utils from '../utils';
2018-09-26 11:13:19 +08:00
if (typeof window !== 'undefined' && navigator.serviceWorker) {
2018-12-07 16:17:45 +08:00
navigator.serviceWorker.getRegistrations().then(registrations => {
2018-09-26 11:13:19 +08:00
registrations.forEach(registration => registration.unregister());
});
}
if (typeof window !== 'undefined') {
// eslint-disable-next-line global-require
require('../../static/style');
// Expose to iframe
window.react = React;
window['react-dom'] = ReactDOM;
2019-08-06 15:09:07 +08:00
// eslint-disable-next-line global-require
window.antd = require('antd');
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
// eslint-disable-next-line global-require
window['@ant-design/icons'] = require('@ant-design/icons');
2019-02-27 15:31:32 +08:00
// Error log statistic
2019-03-06 12:23:41 +08:00
window.addEventListener('error', function onError(e) {
2019-02-27 15:31:32 +08:00
// Ignore ResizeObserver error
if (e.message === 'ResizeObserver loop limit exceeded') {
e.stopPropagation();
e.stopImmediatePropagation();
}
});
if (process.env.NODE_ENV === 'production') {
LogRocket.init('kpuw4z/ant-design');
setupLogRocketReact(LogRocket);
}
}
2018-01-04 20:00:38 +08:00
let isMobile = false;
2018-12-07 16:17:45 +08:00
enquireScreen(b => {
2018-01-04 20:00:38 +08:00
isMobile = b;
});
2016-06-03 15:26:25 +08:00
export default class Layout extends React.Component {
static contextTypes = {
router: PropTypes.object.isRequired,
2018-12-07 16:17:45 +08:00
};
2018-01-04 20:00:38 +08:00
static childContextTypes = {
2018-01-05 17:23:59 +08:00
isMobile: PropTypes.bool,
2019-12-18 18:45:05 +08:00
theme: PropTypes.oneOf(['default', 'dark']),
setTheme: PropTypes.func,
2018-01-04 20:00:38 +08:00
};
constructor(props) {
super(props);
2017-10-09 13:23:20 +08:00
const { pathname } = props.location;
const appLocale = utils.isZhCN(pathname) ? cnLocale : enLocale;
2018-04-22 18:58:40 +08:00
this.state = {
appLocale,
2018-01-04 20:00:38 +08:00
isMobile,
2019-12-18 18:45:05 +08:00
theme: 'default',
setTheme: this.setTheme,
};
}
2018-11-28 15:00:03 +08:00
getChildContext() {
2019-12-18 18:45:05 +08:00
const { isMobile: mobile, theme, setTheme } = this.state;
return { isMobile: mobile, theme, setTheme };
2018-11-28 15:00:03 +08:00
}
2016-06-03 15:26:25 +08:00
componentDidMount() {
const { router } = this.context;
2018-12-07 16:17:45 +08:00
router.listen(loc => {
2018-05-21 23:27:26 +08:00
if (typeof window.ga !== 'undefined') {
2016-06-03 15:26:25 +08:00
window.ga('send', 'pageview', loc.pathname + loc.search);
2018-05-21 23:27:26 +08:00
}
// eslint-disable-next-line
if (typeof window._hmt !== 'undefined') {
// eslint-disable-next-line
window._hmt.push(['_trackPageview', loc.pathname + loc.search]);
}
});
2016-07-26 17:40:08 +08:00
2016-12-09 14:24:38 +08:00
const nprogressHiddenStyle = document.getElementById('nprogress-style');
if (nprogressHiddenStyle) {
2016-07-26 17:40:08 +08:00
this.timer = setTimeout(() => {
2016-12-09 14:24:38 +08:00
nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle);
}, 0);
2016-06-23 21:10:02 +08:00
}
2018-01-04 20:00:38 +08:00
2018-12-07 16:17:45 +08:00
enquireScreen(b => {
2018-01-04 20:00:38 +08:00
this.setState({
isMobile: !!b,
});
});
2016-06-23 21:10:02 +08:00
}
componentWillUnmount() {
clearTimeout(this.timer);
2016-06-03 15:26:25 +08:00
}
2019-12-18 18:45:05 +08:00
setTheme = theme => {
this.setState({
theme,
});
};
2016-06-03 15:26:25 +08:00
render() {
2019-11-11 14:30:11 +08:00
const { children, helmetContext = {}, ...restProps } = this.props;
2019-12-23 11:46:40 +08:00
const { appLocale, theme } = this.state;
2019-09-16 11:23:26 +08:00
const title =
appLocale.locale === 'zh-CN'
? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
: 'Ant Design - A UI Design Language and React UI library';
const description =
appLocale.locale === 'zh-CN'
? '基于 Ant Design 设计体系的 React UI 组件库,用于研发企业级中后台产品。'
: 'An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises';
2016-06-03 15:26:25 +08:00
return (
2019-11-11 14:30:11 +08:00
<HelmetProvider context={helmetContext}>
2019-09-20 17:05:13 +08:00
<Helmet encodeSpecialCharacters={false}>
2019-08-19 11:08:20 +08:00
<html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} />
2019-09-16 11:23:26 +08:00
<title>{title}</title>
2019-10-09 20:57:00 +08:00
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
2019-10-09 20:57:00 +08:00
/>
2019-09-16 11:23:26 +08:00
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
/>
2019-08-19 11:08:20 +08:00
</Helmet>
<IntlProvider locale={appLocale.locale} messages={appLocale.messages} defaultLocale="en-US">
<ConfigProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
2019-12-23 11:46:40 +08:00
<div className="page-wrapper" data-theme={theme}>
2019-08-19 11:08:20 +08:00
<Header {...restProps} />
{children}
</div>
</ConfigProvider>
</IntlProvider>
</HelmetProvider>
2016-06-03 15:26:25 +08:00
);
}
}