import React from 'react'; import PropTypes from 'prop-types'; import GitHubButton from 'react-github-button'; import { Link } from 'bisheng/router'; import { FormattedMessage, injectIntl } from 'react-intl'; import classNames from 'classnames'; import { SearchOutlined, MenuOutlined } from '@ant-design/icons'; import { Select, Menu, Row, Col, Popover, Input, Button, Badge } from 'antd'; import AntdText from './AntdText'; import * as utils from '../utils'; import { version as antdVersion } from '../../../../package.json'; const { Option } = Select; let docsearch; if (typeof window !== 'undefined') { docsearch = require('docsearch.js'); // eslint-disable-line } function initDocSearch(locale) { if (!docsearch) { return; } const lang = locale === 'zh-CN' ? 'cn' : 'en'; docsearch({ apiKey: '60ac2c1a7d26ab713757e4a081e133d0', indexName: 'ant_design', inputSelector: '#search-box input', algoliaOptions: { facetFilters: [`tags:${lang}`] }, transformData(hits) { hits.forEach(hit => { hit.url = hit.url.replace('ant.design', window.location.host); // eslint-disable-line hit.url = hit.url.replace('https:', window.location.protocol); // eslint-disable-line }); return hits; }, debug: false, // Set debug to true if you want to inspect the dropdown }); } class Header extends React.Component { static contextTypes = { router: PropTypes.object.isRequired, isMobile: PropTypes.bool.isRequired, theme: PropTypes.oneOf(['default', 'dark']), }; state = { menuVisible: false, }; componentDidMount() { const { intl } = this.props; const { router } = this.context; router.listen(this.handleHideMenu); const { searchInput } = this; document.addEventListener('keyup', event => { if (event.keyCode === 83 && event.target === document.body) { searchInput.focus(); } }); initDocSearch(intl.locale); } handleShowMenu = () => { this.setState({ menuVisible: true, }); }; handleHideMenu = () => { this.setState({ menuVisible: false, }); }; onMenuVisibleChange = visible => { this.setState({ menuVisible: visible, }); }; handleVersionChange = url => { const currentUrl = window.location.href; const currentPathname = window.location.pathname; window.location.href = currentUrl .replace(window.location.origin, url) .replace(currentPathname, utils.getLocalizedPathname(currentPathname)); }; handleLangChange = () => { const { location: { pathname }, } = this.props; const currentProtocol = `${window.location.protocol}//`; const currentHref = window.location.href.substr(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)), ); }; render() { const { menuVisible } = this.state; const { isMobile } = this.context; const menuMode = isMobile ? 'inline' : 'horizontal'; const { location, themeConfig, intl: { locale }, } = this.props; const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion }; const versionOptions = Object.keys(docVersions).map(version => ( )); const pathname = location.pathname.replace(/(^\/|\/$)/g, ''); const module = pathname .split('/') .slice(0, -1) .join('/'); let activeMenuItem = module || 'home'; if (location.pathname === 'changelog') { activeMenuItem = 'docs/react'; } const isHome = ['', 'index', 'index-cn'].includes(pathname); const isZhCN = locale === 'zh-CN'; const headerClassName = classNames({ clearfix: true, 'home-header': isHome, }); const menu = [ isHome ? ( ) : null, , , {isHome ? null : ( )} } > Ant Design of Angular Ant Design of Vue {isZhCN ? ( Ant Design 实战教程 ) : null} , ]; const searchPlaceholder = locale === 'zh-CN' ? '在 ant.design 中搜索' : 'Search in ant.design'; return ( ); } } export default injectIntl(Header);