tripleo-ui/src/js/components/i18n/I18nDropdown.js

90 lines
2.6 KiB
JavaScript

/**
* Copyright 2017 Red Hat Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License. You may obtain
* a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
import { connect } from 'react-redux';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import React from 'react';
import Dropdown from '../ui/dropdown/Dropdown';
import DropdownToggle from '../ui/dropdown/DropdownToggle';
import DropdownItem from '../ui/dropdown/DropdownItem';
import { getEnabledLanguages, getCurrentLanguage } from '../../selectors/i18n';
import I18nActions from '../../actions/I18nActions';
import { MESSAGES } from './messages';
const messages = defineMessages({
language: {
id: 'I18nDropdown.language',
defaultMessage: 'Language'
}
});
class I18nDropdown extends React.Component {
_renderDropdownItems() {
const { currentLanguage, languages } = this.props;
return languages
.map((langName, langKey) => {
const active = currentLanguage === langKey;
return MESSAGES[langKey] || langKey === 'en'
? <DropdownItem
key={`lang-${langKey}`}
active={active}
onClick={this.props.chooseLanguage.bind(this, langKey)}
>
{langName}
</DropdownItem>
: null;
})
.toList();
}
render() {
return (
<Dropdown>
<DropdownToggle>
<FormattedMessage {...messages.language} /> <b className="caret" />
</DropdownToggle>
{this._renderDropdownItems()}
</Dropdown>
);
}
}
I18nDropdown.propTypes = {
chooseLanguage: PropTypes.func.isRequired,
currentLanguage: PropTypes.string,
languages: ImmutablePropTypes.map.isRequired
};
const mapStateToProps = state => {
return {
languages: getEnabledLanguages(state),
currentLanguage: getCurrentLanguage(state)
};
};
const mapDispatchToProps = dispatch => {
return {
chooseLanguage: language => dispatch(I18nActions.chooseLanguage(language))
};
};
export default injectIntl(
connect(mapStateToProps, mapDispatchToProps)(I18nDropdown)
);