|
|
|
@ -1,21 +1,19 @@ |
|
|
|
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; |
|
|
|
import { FormattedMessage, useIntl } from 'dumi'; |
|
|
|
import { useLocation } from 'dumi'; |
|
|
|
import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; |
|
|
|
import classNames from 'classnames'; |
|
|
|
import { Col, Modal, Popover, Row, Select, Typography } from 'antd'; |
|
|
|
import { MenuOutlined, GithubOutlined } from '@ant-design/icons'; |
|
|
|
import { GithubOutlined, MenuOutlined } from '@ant-design/icons'; |
|
|
|
import type { DirectionType } from 'antd/es/config-provider'; |
|
|
|
import { ClassNames, css } from '@emotion/react'; |
|
|
|
import * as utils from '../../utils'; |
|
|
|
import { getThemeConfig, ping } from '../../utils'; |
|
|
|
import packageJson from '../../../../package.json'; |
|
|
|
import Logo from './Logo'; |
|
|
|
import More from './More'; |
|
|
|
import Navigation from './Navigation'; |
|
|
|
import Github from './Github'; |
|
|
|
import type { SiteContextProps } from '../SiteContext'; |
|
|
|
import SiteContext from '../SiteContext'; |
|
|
|
import { useLocation, useNavigate } from 'dumi'; |
|
|
|
import { ClassNames, css } from '@emotion/react'; |
|
|
|
import useSiteToken from '../../../hooks/useSiteToken'; |
|
|
|
import useLocale from '../../../hooks/useLocale'; |
|
|
|
import SwitchBtn from './SwitchBtn'; |
|
|
|
@ -135,18 +133,6 @@ export interface HeaderProps { |
|
|
|
changeDirection: (direction: DirectionType) => void; |
|
|
|
} |
|
|
|
|
|
|
|
let docsearch: any; |
|
|
|
const triggerDocSearchImport = () => { |
|
|
|
if (docsearch) { |
|
|
|
return Promise.resolve(); |
|
|
|
} |
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
return import('docsearch.js').then((ds) => { |
|
|
|
docsearch = ds.default; |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const V5_NOTIFICATION = 'antd@4.0.0-notification-sent'; |
|
|
|
const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; |
|
|
|
|
|
|
|
@ -166,7 +152,6 @@ interface HeaderState { |
|
|
|
|
|
|
|
// ================================= Header =================================
|
|
|
|
const Header: React.FC<HeaderProps> = (props) => { |
|
|
|
const intl = useIntl(); |
|
|
|
const { changeDirection } = props; |
|
|
|
const [isClient, setIsClient] = React.useState(false); |
|
|
|
const [locale, lang] = useLocale(locales); |
|
|
|
@ -207,7 +192,6 @@ const Header: React.FC<HeaderProps> = (props) => { |
|
|
|
const pingTimer = useRef<NodeJS.Timeout | null>(null); |
|
|
|
const location = useLocation(); |
|
|
|
const { pathname, search } = location; |
|
|
|
const navigate = useNavigate(); |
|
|
|
|
|
|
|
const style = useStyle(); |
|
|
|
|
|
|
|
@ -217,9 +201,6 @@ const Header: React.FC<HeaderProps> = (props) => { |
|
|
|
const onWindowResize = useCallback(() => { |
|
|
|
setHeaderState((prev) => ({ ...prev, windowWidth: window.innerWidth })); |
|
|
|
}, []); |
|
|
|
const onTriggerSearching = useCallback((searching: boolean) => { |
|
|
|
setHeaderState((prev) => ({ ...prev, searching })); |
|
|
|
}, []); |
|
|
|
const handleShowMenu = useCallback(() => { |
|
|
|
setHeaderState((prev) => ({ ...prev, menuVisible: true })); |
|
|
|
}, []); |
|
|
|
@ -358,6 +339,7 @@ const Header: React.FC<HeaderProps> = (props) => { |
|
|
|
let menu: (React.ReactElement | null)[] = [ |
|
|
|
navigationNode, |
|
|
|
<Popover |
|
|
|
key="version" |
|
|
|
open={!!notify} |
|
|
|
title={locale.title} |
|
|
|
content={ |
|
|
|
@ -422,24 +404,28 @@ const Header: React.FC<HeaderProps> = (props) => { |
|
|
|
onClick={onDirectionChange} |
|
|
|
value={direction === 'rtl' ? 2 : 1} |
|
|
|
label1={ |
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6k0CTJA-HxUAAAAAAAAAAAAADrJ8AQ/original" /> |
|
|
|
<img |
|
|
|
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6k0CTJA-HxUAAAAAAAAAAAAADrJ8AQ/original" |
|
|
|
alt="direction" |
|
|
|
/> |
|
|
|
} |
|
|
|
tooltip1="LTR" |
|
|
|
label2={ |
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SZoaQqm2hwsAAAAAAAAAAAAADrJ8AQ/original" /> |
|
|
|
<img |
|
|
|
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SZoaQqm2hwsAAAAAAAAAAAAADrJ8AQ/original" |
|
|
|
alt="LTR" |
|
|
|
/> |
|
|
|
} |
|
|
|
tooltip2="RTL" |
|
|
|
pure |
|
|
|
/>, |
|
|
|
<a href="https://github.com/ant-design/ant-design" target="_blank"> |
|
|
|
<SwitchBtn |
|
|
|
key="github" |
|
|
|
value={1} |
|
|
|
label1={<GithubOutlined />} |
|
|
|
tooltip1="Github" |
|
|
|
label2={null} |
|
|
|
pure |
|
|
|
/> |
|
|
|
<a |
|
|
|
key="github" |
|
|
|
href="https://github.com/ant-design/ant-design" |
|
|
|
target="_blank" |
|
|
|
rel="noreferrer" |
|
|
|
> |
|
|
|
<SwitchBtn value={1} label1={<GithubOutlined />} tooltip1="Github" label2={null} pure /> |
|
|
|
</a>, |
|
|
|
]; |
|
|
|
|
|
|
|
@ -460,9 +446,9 @@ const Header: React.FC<HeaderProps> = (props) => { |
|
|
|
<header css={style.header} className={headerClassName}> |
|
|
|
{isMobile && ( |
|
|
|
<ClassNames> |
|
|
|
{({ css }) => ( |
|
|
|
{({ css: cssFn }) => ( |
|
|
|
<Popover |
|
|
|
overlayClassName={css(style.popoverMenu)} |
|
|
|
overlayClassName={cssFn(style.popoverMenu)} |
|
|
|
placement="bottomRight" |
|
|
|
content={menu} |
|
|
|
trigger="click" |
|
|
|
|
MadCcc
2 years ago
GitHub