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, Button, Popover, AutoComplete, Input } from 'antd'; import * as utils from '../utils'; import { version as antdVersion } from '../../../../package.json'; const { Option } = AutoComplete; const searchEngine = 'Google'; const searchLink = 'https://www.google.com/#q=site:ant.design+'; export default class Header extends React.Component { static contextTypes = { router: PropTypes.object.isRequired, intl: PropTypes.object.isRequired, } state = { inputValue: '', menuVisible: false, menuMode: 'horizontal', }; componentDidMount() { this.context.router.listen(this.handleHideMenu); const { searchInput } = this; /* eslint-disable global-require */ require('enquire.js') .register('only screen and (min-width: 0) and (max-width: 992px)', { match: () => { this.setState({ menuMode: 'inline' }); }, unmatch: () => { this.setState({ menuMode: 'horizontal' }); }, }); document.addEventListener('keyup', (event) => { if (event.keyCode === 83 && event.target === document.body) { searchInput.focus(); } }); /* eslint-enable global-require */ } handleSearch = (value) => { if (value === searchEngine) { window.location.href = `${searchLink}${this.state.inputValue}`; return; } const { intl, router } = this.context; this.setState({ inputValue: '', }, () => { router.push({ pathname: utils.getLocalizedPathname(`${value}/`, intl.locale === 'zh-CN') }); this.searchInput.blur(); }); } handleInputChange = (value) => { this.setState({ inputValue: value, }); } handleShowMenu = () => { this.setState({ menuVisible: true, }); } handleHideMenu = () => { this.setState({ menuVisible: false, }); } onMenuVisibleChange = (visible) => { this.setState({ menuVisible: visible, }); } handleSelectFilter = (value, option) => { const optionValue = option.props['data-label']; return optionValue === searchEngine || optionValue.indexOf(value.toLowerCase()) > -1; } handleLangChange = () => { const { pathname } = this.props.location; 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)), ); } 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)); } render() { const { inputValue, menuMode, menuVisible } = this.state; const { location, picked, isFirstScreen, themeConfig, } = this.props; const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion }; const versionOptions = Object.keys(docVersions) .map(version => ); const { components } = picked; 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 { locale } = this.context.intl; const isZhCN = locale === 'zh-CN'; const excludedSuffix = isZhCN ? 'en-US.md' : 'zh-CN.md'; const options = components .filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)) .map(({ meta }) => { const pathSnippet = meta.filename.split('/')[1]; const url = `/components/${pathSnippet}`; const { subtitle } = meta; return ( ); }); options.push( ); const headerClassName = classNames({ clearfix: true, 'home-nav-white': !isFirstScreen, }); const menu = [ , , , ]; const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search Components...'; return ( ); } }