import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Select, Menu, Row, Col, Icon, Popover, Input, Badge, Button } from 'antd'; import Santa from './Santa'; 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 }); } export default class Header extends React.Component { static contextTypes = { router: PropTypes.object.isRequired, intl: PropTypes.object.isRequired, isMobile: PropTypes.bool.isRequired, }; state = { menuVisible: false, }; componentDidMount() { const { intl, 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 } = this.props; const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion }; const versionOptions = Object.keys(docVersions).map(version => ( )); const module = location.pathname .replace(/(^\/|\/$)/g, '') .split('/') .slice(0, -1) .join('/'); let activeMenuItem = module || 'home'; if (activeMenuItem === 'components' || location.pathname === 'changelog') { activeMenuItem = 'docs/react'; } const { intl: { locale }, } = this.context; const isZhCN = locale === 'zh-CN'; const headerClassName = classNames({ clearfix: true, }); const menu = [ , , {isZhCN ? ( 教程 ) : null} , ]; const searchPlaceholder = locale === 'zh-CN' ? '在 ant.design 中搜索' : 'Search in ant.design'; return ( ); } }