2017-11-30 21:38:48 +08:00
import React from 'react' ;
2016-05-27 11:48:08 +08:00
import ReactDOM from 'react-dom' ;
2017-04-12 04:49:08 +08:00
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' ;
2019-08-19 11:08:20 +08:00
import { Helmet } from 'react-helmet' ;
2018-05-18 11:34:26 +08:00
import 'moment/locale/zh-cn' ;
2019-07-24 10:34:55 +08:00
import { ConfigProvider } from 'antd' ;
2019-02-26 16:16:23 +08:00
import LogRocket from 'logrocket' ;
import setupLogRocketReact from 'logrocket-react' ;
2019-08-06 15:02:05 +08:00
// eslint-disable-next-line import/no-unresolved
2019-08-05 15:37:00 +08:00
import zhCN from 'antd/es/locale/zh_CN' ;
2016-05-27 11:48:08 +08:00
import Header from './Header' ;
2016-09-27 10:06:34 +08:00
import enLocale from '../../en-US' ;
import cnLocale from '../../zh-CN' ;
2016-10-18 11:18:25 +08:00
import * as utils from '../utils' ;
2016-05-27 11:48:08 +08:00
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 ( ) ) ;
} ) ;
}
2016-11-21 14:39:15 +08:00
if ( typeof window !== 'undefined' ) {
2019-08-06 15:02:05 +08:00
// eslint-disable-next-line global-require
2016-11-21 14:39:15 +08:00
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
2016-11-21 14:39:15 +08:00
window . antd = require ( 'antd' ) ;
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 ) ;
}
2016-11-21 14:39:15 +08:00
}
2016-05-27 11:48:08 +08:00
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 = {
2017-04-12 04:49:08 +08:00
router : PropTypes . object . isRequired ,
2018-12-07 16:17:45 +08:00
} ;
2018-06-22 21:05:13 +08:00
2018-01-04 20:00:38 +08:00
static childContextTypes = {
2018-01-05 17:23:59 +08:00
isMobile : PropTypes . bool ,
2018-01-04 20:00:38 +08:00
} ;
2016-12-09 13:02:16 +08:00
constructor ( props ) {
super ( props ) ;
2017-10-09 13:23:20 +08:00
const { pathname } = props . location ;
2016-12-09 13:02:16 +08:00
const appLocale = utils . isZhCN ( pathname ) ? cnLocale : enLocale ;
2018-04-22 18:58:40 +08:00
2016-12-09 13:02:16 +08:00
this . state = {
appLocale ,
2018-01-04 20:00:38 +08:00
isMobile ,
2016-12-09 13:02:16 +08:00
} ;
}
2016-11-09 19:55:14 +08:00
2018-11-28 15:00:03 +08:00
getChildContext ( ) {
const { isMobile : mobile } = this . state ;
return { isMobile : mobile } ;
}
2016-06-03 15:26:25 +08:00
componentDidMount ( ) {
2018-06-22 21:05:13 +08:00
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
}
render ( ) {
2016-07-26 17:40:08 +08:00
const { children , ... restProps } = this . props ;
2017-11-30 21:38:48 +08:00
const { appLocale } = this . state ;
2019-09-08 15:28:09 +08:00
const title =
appLocale . locale === 'zh-CN'
? 'Ant Design - 一套企业级的 UI 设计语言和 React 组件'
: 'Ant Design - A UI Design Language' ;
const description =
appLocale . locale === 'zh-CN'
2019-09-08 15:35:28 +08:00
? '基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。'
2019-09-08 15:28:09 +08:00
: 'An enterprise-class UI design language and React implementation 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-08-19 11:08:20 +08:00
< >
< Helmet >
< html lang = { appLocale . locale === 'zh-CN' ? 'zh' : 'en' } / >
2019-09-08 15:28:09 +08:00
< title > { title } < / title >
< meta name = "description" content = { description } / >
< meta property = "og:title" content = { title } / >
2019-09-08 11:07:54 +08:00
< 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 } >
< div className = "page-wrapper" >
< Header { ...restProps } / >
{ children }
< / div >
< / ConfigProvider >
< / IntlProvider >
< / >
2016-06-03 15:26:25 +08:00
) ;
}
}
