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 ? (