Add flags for languages

This commit is contained in:
cyril lopez 2017-08-07 12:50:32 +02:00
parent 9508421b66
commit d5adb8cdaa
9 changed files with 55 additions and 9 deletions

View File

@ -11,7 +11,7 @@ import WithFormSection from 'components/WithFormSection';
class EditFormSectionSubNested extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
return (
<div className={this.props.styles.padded}>
<div className={`${this.props.styles.padded} ${this.props.styles.subNestedFormContainer}`}>
<div className="row">
{map(this.props.section, (item, key) => (
this.props.renderInput(item, key)

View File

@ -116,9 +116,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
}
render() {
console.log(this.props)
const inputValue = this.props.value || '';
console.log(inputValue)
// override default onBlur
const handleBlur = this.props.handleBlur || this.handleBlur;
// override bootStrapClass

View File

@ -16,3 +16,10 @@
.padded {
padding: 0 15px 0 15px;
}
.subNestedFormContainer {
margin: 1rem 15px;
padding: 0 2rem;
background: #FAFAFB;
}

View File

@ -10,6 +10,7 @@ import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { bindActionCreators } from 'redux';
import { map } from 'lodash';
import 'flag-icon-css/css/flag-icon.css';
import { pluginId } from 'app';
import PluginLeftMenu from 'components/PluginLeftMenu';
import { define } from 'i18n';
@ -24,6 +25,7 @@ define(map(messages, (message, id) => ({
}
)));
class App extends React.Component {
componentDidMount() {
this.props.menuFetch();

View File

@ -4,7 +4,7 @@
*
*/
import { forEach, has, remove } from 'lodash';
import { includes, forEach, has, remove, get, split } from 'lodash';
import {
CONFIG_FETCH,
LANGUAGES_FETCH,
@ -123,9 +123,17 @@ function getDataFromConfigs(configs) {
});
});
if (configs.name === 'form.security.name' && includes(split(get(data, 'security.xframe.value'), ' '), 'ALLOW-FROM')) {
const allowFromValue = split(get(data, 'security.xframe.value'), ' ')[0];
const allowFromValueNested = split(get(data, 'security.xframe.value'), ' ')[1];
data['security.xframe.value'] = allowFromValue;
data['security.xframe.value.nested'] = allowFromValueNested;
}
return data;
}
export function changeDefaultLanguage(configsDisplay, newLanguage) {
return {
type: CHANGE_DEFAULT_LANGUAGE,

View File

@ -242,7 +242,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
}
});
if (has(this.props.home.modifiedData, 'security.xframe.value.nested')) {
if (has(this.props.home.modifiedData, 'security.xframe.value.nested') && this.props.home.modifiedData['security.xframe.value'] === 'ALLOW-FROM') {
const value = includes(this.props.home.modifiedData['security.xframe.value.nested'], 'ALLOW-FROM') ?
`ALLOW-FROM ${this.props.home.modifiedData['security.xframe.value.nested']}`
: `ALLOW-FROM.ALLOW-FROM ${this.props.home.modifiedData['security.xframe.value.nested']}`;
@ -289,11 +289,24 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
)}
</FormattedMessage>;
const flagName = this.formatLanguageLocale(props.name);
let flag;
switch (flagName.length) {
case 2:
flag = toLower(flagName[1]);
break;
case 3:
flag = toLower(flagName[2]);
break;
default:
flag = toLower(flagName[0]);
}
return (
<li key={key}>
<div className={liStyles.flexLi}>
<div className={liStyles.flexed}>
<div>{key}</div>
<div><span className={`flag-icon flag-icon-${flag}`} /></div>
<div className={`${liStyles.label} ${liStyles.capitalized}`}>{languageDisplay}</div>
</div>
<div>{props.name}</div>
@ -339,11 +352,12 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
renderPopUpFormLanguage = (section, props) => (
map(section.items, (item, key) => (
<div key={key}>
{props.renderInput(item, key)}
{props.renderInput(item, key, this.renderCustomLanguagesSelectOption)}
</div>
))
)
renderRowDatabase = (props, key) => (
// const isDefaultConnection = this.props.home.modifiedData['database.defaultConnection'] === props.host;
<RowDatabase
@ -462,6 +476,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
name={this.props.home.configsDisplay.name}
description={this.props.home.configsDisplay.description}
/>
{this.renderComponent()}
</div>
);

View File

@ -1,6 +1,6 @@
import { LOCATION_CHANGE } from 'react-router-redux';
import { forEach, set } from 'lodash';
import { forEach, set, join, split, toLower, upperCase } from 'lodash';
import { takeLatest } from 'redux-saga';
import { call, take, put, fork, cancel, select } from 'redux-saga/effects';
import request from 'utils/request';
@ -165,8 +165,18 @@ export function* fetchLanguages() {
export function* postLanguage() {
try {
const newLanguage = yield select(makeSelectModifiedData());
const languageArray = [];
forEach(split(newLanguage['language.defaultLocale'], '_'), (value, key) => {
if (key === 0){
languageArray.push(toLower(value));
} else {
languageArray.push(upperCase(value));
}
});
const body = {
name: newLanguage['language.language.defaultLocale'],
name: join(languageArray, '_'),
};
const opts = {
body,

View File

@ -1371,6 +1371,11 @@
}
}
},
"flag-icon-css": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-2.8.0.tgz",
"integrity": "sha1-7BDCD+QXreeHoJUgBjAGnKQ2pWk="
},
"flagged-respawn": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz",

View File

@ -25,6 +25,7 @@
},
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"flag-icon-css": "^2.8.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-transition-group": "^1.2.0",