2022-12-19 11:42:41 +08:00
import React , { useContext , useEffect , useLayoutEffect , useMemo , useRef } from 'react' ;
2022-11-24 15:41:45 +08:00
import 'dayjs/locale/zh-cn' ;
import dayjs from 'dayjs' ;
2022-12-22 14:12:26 +08:00
import { Helmet , useOutlet , useSiteData } from 'dumi' ;
2022-11-09 12:28:04 +08:00
import '../../static/style' ;
2022-11-30 11:05:41 +08:00
import ConfigProvider from 'antd/es/config-provider' ;
2022-11-09 12:28:04 +08:00
import classNames from 'classnames' ;
import zhCN from 'antd/es/locale/zh_CN' ;
2022-12-19 11:42:41 +08:00
import SiteContext from '../../slots/SiteContext' ;
2022-11-30 11:05:41 +08:00
import Header from '../../slots/Header' ;
import Footer from '../../slots/Footer' ;
import useLocale from '../../../hooks/useLocale' ;
import useLocation from '../../../hooks/useLocation' ;
2022-11-09 12:28:04 +08:00
import ResourceLayout from '../ResourceLayout' ;
import GlobalStyles from '../../common/GlobalStyles' ;
import SidebarLayout from '../SidebarLayout' ;
const locales = {
cn : {
title : 'Ant Design - 一套企业级 UI 设计语言和 React 组件库' ,
description : '基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。' ,
} ,
en : {
title : "Ant Design - The world's second most popular React UI framework" ,
description :
'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' ,
} ,
} ;
2022-11-24 20:11:50 +08:00
const DocLayout : React.FC = ( ) = > {
2022-11-09 12:28:04 +08:00
const outlet = useOutlet ( ) ;
const location = useLocation ( ) ;
2022-12-22 14:12:26 +08:00
const { pathname , search , hash } = location ;
2022-11-09 12:28:04 +08:00
const [ locale , lang ] = useLocale ( locales ) ;
const timerRef = useRef < NodeJS.Timeout | null > ( null ) ;
2022-12-19 11:42:41 +08:00
const { direction } = useContext ( SiteContext ) ;
2022-12-22 14:12:26 +08:00
const { loading } = useSiteData ( ) ;
2022-11-09 12:28:04 +08:00
2022-11-24 15:41:45 +08:00
useLayoutEffect ( ( ) = > {
if ( lang === 'cn' ) {
dayjs . locale ( 'zh-cn' ) ;
} else {
dayjs . locale ( 'en' ) ;
}
} , [ ] ) ;
2022-11-09 12:28:04 +08:00
useEffect ( ( ) = > {
const nprogressHiddenStyle = document . getElementById ( 'nprogress-style' ) ;
if ( nprogressHiddenStyle ) {
timerRef . current = setTimeout ( ( ) = > {
nprogressHiddenStyle . parentNode ? . removeChild ( nprogressHiddenStyle ) ;
} , 0 ) ;
}
} , [ ] ) ;
2022-12-22 14:12:26 +08:00
// handle hash change or visit page hash from Link component, and jump after async chunk loaded
useEffect ( ( ) = > {
const id = hash . replace ( '#' , '' ) ;
if ( id ) document . getElementById ( decodeURIComponent ( id ) ) ? . scrollIntoView ( ) ;
} , [ loading , hash ] ) ;
2022-11-09 12:28:04 +08:00
React . useEffect ( ( ) = > {
if ( typeof ( window as any ) . ga !== 'undefined' ) {
( window as any ) . ga ( 'send' , 'pageview' , pathname + search ) ;
}
if ( typeof ( window as any ) . _hmt !== 'undefined' ) {
( window as any ) . _hmt . push ( [ '_trackPageview' , pathname + search ] ) ;
}
} , [ location ] ) ;
const content = useMemo ( ( ) = > {
if (
2022-11-19 13:47:33 +08:00
[ '' , '/' ] . some ( ( path ) = > path === pathname ) ||
[ '/index' ] . some ( ( path ) = > pathname . startsWith ( path ) )
2022-11-09 12:28:04 +08:00
) {
return (
< >
{ outlet }
< Footer / >
< / >
) ;
2022-11-30 11:05:41 +08:00
}
if ( pathname . startsWith ( '/docs/resource' ) ) {
2022-11-09 12:28:04 +08:00
return < ResourceLayout > { outlet } < / ResourceLayout > ;
2022-11-30 11:05:41 +08:00
}
if ( pathname . startsWith ( '/theme-editor' ) ) {
return outlet ;
2022-11-09 12:28:04 +08:00
}
return < SidebarLayout > { outlet } < / SidebarLayout > ;
} , [ pathname , outlet ] ) ;
return (
2022-12-19 11:42:41 +08:00
< >
2022-12-01 16:10:53 +08:00
< Helmet encodeSpecialCharacters = { false } >
< html
lang = { lang }
data - direction = { direction }
className = { classNames ( { [ ` rtl ` ] : direction === 'rtl' } ) }
/ >
< title > { locale ? . title } < / title >
< link
sizes = "144x144"
href = "https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
/ >
< meta name = "description" content = { locale . description } / >
< meta property = "og:title" content = { locale ? . title } / >
< meta property = "og:type" content = "website" / >
< meta
property = "og:image"
content = "https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
/ >
< / Helmet >
2022-12-19 11:42:41 +08:00
< ConfigProvider locale = { lang === 'cn' ? zhCN : undefined } >
2022-12-01 16:10:53 +08:00
< GlobalStyles / >
2022-12-19 11:42:41 +08:00
< Header / >
2022-12-01 16:10:53 +08:00
{ content }
< / ConfigProvider >
2022-12-19 11:42:41 +08:00
< / >
2022-11-09 12:28:04 +08:00
) ;
} ;
export default DocLayout ;
