ant-design/site/theme/template/Layout/Header/index.tsx
2022-05-11 13:52:34 +08:00

402 lines
11 KiB
TypeScript

import React from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { Select, Row, Col, Popover, Button, Modal } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import * as utils from '../../utils';
import packageJson from '../../../../../package.json';
import Logo from './Logo';
import SearchBar from './SearchBar';
import More from './More';
import Navigation from './Navigation';
import Github from './Github';
import type { SiteContextProps } from '../SiteContext';
import SiteContext from '../SiteContext';
import { ping } from '../../utils';
import { AlgoliaConfig } from './algolia-config';
import './index.less';
const RESPONSIVE_XS = 1120;
const RESPONSIVE_SM = 1200;
const { Option } = Select;
const antdVersion: string = packageJson.version;
export interface HeaderProps {
intl: {
locale: string;
};
location: { pathname: string; query: any };
router: any;
themeConfig: { docVersions: Record<string, string> };
changeDirection: (direction: string) => void;
}
let docsearch: any;
const triggerDocSearchImport = () => {
if (docsearch) {
return Promise.resolve();
}
return import('docsearch.js').then(ds => {
docsearch = ds.default;
});
};
function initDocSearch({ isZhCN, router }: { isZhCN: boolean; router: any }) {
if (!canUseDom()) {
return;
}
triggerDocSearchImport().then(() => {
docsearch({
appId: AlgoliaConfig.appId,
apiKey: AlgoliaConfig.apiKey,
indexName: AlgoliaConfig.indexName,
inputSelector: '#search-box input',
algoliaOptions: AlgoliaConfig.getSearchParams(isZhCN),
transformData: AlgoliaConfig.transformData,
debug: AlgoliaConfig.debug,
// https://docsearch.algolia.com/docs/behavior#handleselected
handleSelected: (input: any, _$1: unknown, suggestion: any) => {
router.push(suggestion.url);
setTimeout(() => {
input.setVal('');
});
},
});
});
}
const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
function disableAntdMirrorModal() {
window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true');
}
function shouldOpenAntdMirrorModal() {
return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL);
}
interface HeaderState {
menuVisible: boolean;
windowWidth: number;
searching: boolean;
showTechUIButton: boolean;
}
class Header extends React.Component<HeaderProps, HeaderState> {
static contextType = SiteContext;
pingTimer: NodeJS.Timeout;
state = {
menuVisible: false,
windowWidth: 1400,
searching: false,
showTechUIButton: false,
};
context: SiteContextProps;
componentDidMount() {
const { intl, router } = this.props;
router.listen(this.handleHideMenu);
initDocSearch({
isZhCN: intl.locale === 'zh-CN',
router,
});
window.addEventListener('resize', this.onWindowResize);
this.onWindowResize();
this.pingTimer = ping(status => {
if (status !== 'timeout' && status !== 'error') {
this.setState({
showTechUIButton: true,
});
if (
process.env.NODE_ENV === 'production' &&
window.location.host !== 'ant-design.antgroup.com' &&
shouldOpenAntdMirrorModal()
) {
Modal.confirm({
title: '提示',
content: '内网用户推荐访问国内镜像以获得极速体验~',
okText: '🚀 立刻前往',
onOk: () => {
window.open('https://ant-design.antgroup.com', '_self');
disableAntdMirrorModal();
},
cancelText: '不再弹出',
onCancel: () => {
disableAntdMirrorModal();
},
closable: true,
});
}
}
});
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize);
clearTimeout(this.pingTimer);
}
onWindowResize = () => {
this.setState({
windowWidth: window.innerWidth,
});
};
onTriggerSearching = (searching: boolean) => {
this.setState({ searching });
};
handleShowMenu = () => {
this.setState({
menuVisible: true,
});
};
handleHideMenu = () => {
this.setState({
menuVisible: false,
});
};
onDirectionChange = () => {
const { changeDirection } = this.props;
const { direction } = this.context;
if (direction !== 'rtl') {
changeDirection('rtl');
} else {
changeDirection('ltr');
}
};
getNextDirectionText = () => {
const { direction } = this.context;
if (direction !== 'rtl') {
return 'RTL';
}
return 'LTR';
};
getDropdownStyle = (): React.CSSProperties => {
const { direction } = this.context;
if (direction === 'rtl') {
return {
direction: 'ltr',
textAlign: 'right',
};
}
return {};
};
onMenuVisibleChange = (visible: boolean) => {
this.setState({
menuVisible: visible,
});
};
// eslint-disable-next-line class-methods-use-this
handleVersionChange = (url: string) => {
const currentUrl = window.location.href;
const currentPathname = window.location.pathname;
if (/overview/.test(currentPathname) && /0?[1-39][0-3]?x/.test(url)) {
window.location.href = currentUrl
.replace(window.location.origin, url)
.replace(/\/components\/overview/, `/docs${/0(9|10)x/.test(url) ? '' : '/react'}/introduce`)
.replace(/\/$/, '');
return;
}
window.location.href = currentUrl.replace(window.location.origin, url);
};
onLangChange = () => {
const {
location: { pathname, query },
} = this.props;
const currentProtocol = `${window.location.protocol}//`;
const currentHref = window.location.href.slice(currentProtocol.length);
if (utils.isLocalStorageNameSupported()) {
localStorage.setItem('locale', utils.isZhCN(pathname) ? 'en-US' : 'zh-CN');
}
window.location.href =
currentProtocol +
currentHref.replace(
window.location.pathname,
utils.getLocalizedPathname(pathname, !utils.isZhCN(pathname), query).pathname,
);
};
render() {
return (
<SiteContext.Consumer>
{({ isMobile }) => {
const { menuVisible, windowWidth, searching, showTechUIButton } = this.state;
const { direction } = this.context;
const {
location,
themeConfig,
intl: { locale },
router,
} = this.props;
const docVersions: Record<string, string> = {
[antdVersion]: antdVersion,
...themeConfig.docVersions,
};
const versionOptions = Object.keys(docVersions).map(version => (
<Option value={docVersions[version]} key={version}>
{version}
</Option>
));
const pathname = location.pathname.replace(/(^\/|\/$)/g, '');
const isHome = ['', 'index', 'index-cn'].includes(pathname);
const isZhCN = locale === 'zh-CN';
const isRTL = direction === 'rtl';
let responsive: null | 'narrow' | 'crowded' = null;
if (windowWidth < RESPONSIVE_XS) {
responsive = 'crowded';
} else if (windowWidth < RESPONSIVE_SM) {
responsive = 'narrow';
}
const headerClassName = classNames({
clearfix: true,
'home-header': isHome,
});
const sharedProps = {
isZhCN,
isRTL,
};
const navigationNode = (
<Navigation
key="nav"
{...sharedProps}
location={location}
responsive={responsive}
isMobile={isMobile}
showTechUIButton={showTechUIButton}
pathname={pathname}
directionText={this.getNextDirectionText()}
onLangChange={this.onLangChange}
onDirectionChange={this.onDirectionChange}
/>
);
let menu: (React.ReactElement | null)[] = [
navigationNode,
<Select
key="version"
className="version"
size="small"
defaultValue={antdVersion}
onChange={this.handleVersionChange}
dropdownStyle={this.getDropdownStyle()}
getPopupContainer={trigger => trigger.parentNode}
>
{versionOptions}
</Select>,
<Button
size="small"
onClick={this.onLangChange}
className="header-button header-lang-button"
key="lang-button"
>
<FormattedMessage id="app.header.lang" />
</Button>,
<Button
size="small"
onClick={this.onDirectionChange}
className="header-button header-direction-button"
key="direction-button"
>
{this.getNextDirectionText()}
</Button>,
<More key="more" {...sharedProps} />,
<Github key="github" responsive={responsive} />,
];
if (windowWidth < RESPONSIVE_XS) {
menu = searching ? [] : [navigationNode];
} else if (windowWidth < RESPONSIVE_SM) {
menu = searching ? [] : menu;
}
const colProps = isHome
? [{ flex: 'none' }, { flex: 'auto' }]
: [
{
xxl: 4,
xl: 5,
lg: 6,
md: 6,
sm: 24,
xs: 24,
},
{
xxl: 20,
xl: 19,
lg: 18,
md: 18,
sm: 0,
xs: 0,
},
];
return (
<header id="header" className={headerClassName}>
{isMobile && (
<Popover
overlayClassName="popover-menu"
placement="bottomRight"
content={menu}
trigger="click"
visible={menuVisible}
arrowPointAtCenter
onVisibleChange={this.onMenuVisibleChange}
>
<MenuOutlined className="nav-phone-icon" onClick={this.handleShowMenu} />
</Popover>
)}
<Row style={{ flexFlow: 'nowrap', height: 64 }}>
<Col {...colProps[0]}>
<Logo {...sharedProps} location={location} />
</Col>
<Col {...colProps[1]} className="menu-row">
<SearchBar
key="search"
{...sharedProps}
router={router}
algoliaConfig={AlgoliaConfig}
responsive={responsive}
onTriggerFocus={this.onTriggerSearching}
/>
{!isMobile && menu}
</Col>
</Row>
</header>
);
}}
</SiteContext.Consumer>
);
}
}
export default injectIntl(Header as any);