fix: Language switch
This commit is contained in:
parent
be0ba62bbd
commit
4a0ce8e331
@ -85,7 +85,7 @@ class App extends React.Component {
|
|||||||
this.props.changeLanguage(language);
|
this.props.changeLanguage(language);
|
||||||
}
|
}
|
||||||
|
|
||||||
generateRouter() {
|
static generateRouter() {
|
||||||
return (
|
return (
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<Layout navList={_menu.data}>
|
<Layout navList={_menu.data}>
|
||||||
@ -120,7 +120,7 @@ class App extends React.Component {
|
|||||||
fullScreen
|
fullScreen
|
||||||
{...this.state.nacosLoading}
|
{...this.state.nacosLoading}
|
||||||
>
|
>
|
||||||
<ConfigProvider locale={locale}>{this.generateRouter()}</ConfigProvider>
|
<ConfigProvider locale={locale}>{App.generateRouter()}</ConfigProvider>
|
||||||
</Loading>
|
</Loading>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -12,10 +12,13 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import { connect } from 'react-redux';
|
||||||
|
import { ConfigProvider } from '@alifd/next';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import siteConfig from '../config';
|
import siteConfig from '../config';
|
||||||
import { getLink } from '../utils/nacosutil';
|
import { getLink } from '../utils/nacosutil';
|
||||||
|
import { changeLanguage } from '../reducers/locale';
|
||||||
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
const languageSwitch = [
|
const languageSwitch = [
|
||||||
@ -30,26 +33,18 @@ const languageSwitch = [
|
|||||||
];
|
];
|
||||||
const noop = () => {};
|
const noop = () => {};
|
||||||
|
|
||||||
const defaultProps = {
|
@connect(
|
||||||
type: 'primary',
|
state => ({ ...state.locale }),
|
||||||
language: 'en-us',
|
{ changeLanguage }
|
||||||
onLanguageChange: noop,
|
)
|
||||||
};
|
@ConfigProvider.config
|
||||||
|
|
||||||
class Header extends React.Component {
|
class Header extends React.Component {
|
||||||
static propTypes = {
|
static displayName = 'Header';
|
||||||
language: PropTypes.string,
|
|
||||||
type: PropTypes.string,
|
|
||||||
logo: PropTypes.string,
|
|
||||||
currentKey: PropTypes.string,
|
|
||||||
onLanguageChange: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
menuBodyVisible: false,
|
menuBodyVisible: false,
|
||||||
language: props.language,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.switchLang = this.switchLang.bind(this);
|
this.switchLang = this.switchLang.bind(this);
|
||||||
@ -62,9 +57,8 @@ class Header extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
switchLang() {
|
switchLang() {
|
||||||
const language = this.state.language === 'zh-cn' ? 'en-us' : 'zh-cn';
|
const { language = 'en-US', changeLanguage } = this.props;
|
||||||
this.setState({ language });
|
changeLanguage(language === 'en-US' ? 'zh-CN' : 'en-US');
|
||||||
this.props.onLanguageChange(language);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||||
@ -74,8 +68,10 @@ class Header extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { locale = {}, language = 'en-US' } = this.props;
|
||||||
|
const { home, docs, blog, community, languageSwitchButton } = locale;
|
||||||
const { type, logo, onLanguageChange, currentKey } = this.props;
|
const { type, logo, onLanguageChange, currentKey } = this.props;
|
||||||
const { menuBodyVisible, language } = this.state;
|
const { menuBodyVisible } = this.state;
|
||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
className={classnames({
|
className={classnames({
|
||||||
@ -84,10 +80,10 @@ class Header extends React.Component {
|
|||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<div className="header-body">
|
<div className="header-body">
|
||||||
<a href={'https://nacos.io/zh-cn/'} target="_blank" rel="noopener noreferrer">
|
<a href="https://nacos.io/zh-cn/" target="_blank" rel="noopener noreferrer">
|
||||||
<img className="logo" alt={siteConfig.name} title={siteConfig.name} src={logo} />
|
<img className="logo" alt={siteConfig.name} title={siteConfig.name} src={logo} />
|
||||||
</a>
|
</a>
|
||||||
{onLanguageChange !== noop ? (
|
{onLanguageChange !== noop && (
|
||||||
<span
|
<span
|
||||||
className={classnames({
|
className={classnames({
|
||||||
'language-switch': true,
|
'language-switch': true,
|
||||||
@ -97,7 +93,7 @@ class Header extends React.Component {
|
|||||||
>
|
>
|
||||||
{languageSwitch.find(lang => lang.value === language).text}
|
{languageSwitch.find(lang => lang.value === language).text}
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
)}
|
||||||
<div
|
<div
|
||||||
className={classnames({
|
className={classnames({
|
||||||
'header-menu': true,
|
'header-menu': true,
|
||||||
@ -105,17 +101,22 @@ class Header extends React.Component {
|
|||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
{siteConfig[language].pageMenu.map(item => (
|
{[
|
||||||
|
[home, 'https://nacos.io/en-us/index.html'],
|
||||||
|
[docs, 'https://nacos.io/en-us/docs/quick-start.html'],
|
||||||
|
[blog, 'https://nacos.io/en-us/blog'],
|
||||||
|
[community, 'https://nacos.io/en-us/community'],
|
||||||
|
].map(([text, link]) => (
|
||||||
<li
|
<li
|
||||||
key={item.link}
|
key={text}
|
||||||
className={classnames({
|
className={classnames({
|
||||||
'menu-item': true,
|
'menu-item': true,
|
||||||
[`menu-item-${type}`]: true,
|
[`menu-item-${type}`]: true,
|
||||||
[`menu-item-${type}-active`]: currentKey === item.key,
|
[`menu-item-${type}-active`]: false,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<a href={getLink(item.link)} target="_blank" rel="noopener noreferrer">
|
<a href={link} target="_blank" rel="noopener noreferrer">
|
||||||
{item.text}
|
{text}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
@ -127,5 +128,4 @@ class Header extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Header.defaultProps = defaultProps;
|
|
||||||
export default Header;
|
export default Header;
|
||||||
|
Loading…
Reference in New Issue
Block a user