#379: move flags related code into a separate module to get rid of code duplication

This commit is contained in:
SleepWalker 2017-12-30 21:44:32 +02:00
parent 025ba9b1d5
commit 4458b1fe97
7 changed files with 46 additions and 46 deletions

View File

@ -11,9 +11,9 @@
"node": ">=8.0.0" "node": ">=8.0.0"
}, },
"scripts": { "scripts": {
"start": "yarn run clean && yarn run build:dll && webpack-dev-server --progress --colors", "start": "yarn run clean && yarn run build:dll && NODE_PATH=./src webpack-dev-server --progress --colors",
"clean": "rm -rf dist/", "clean": "rm -rf dist/",
"test": "yarn run build:dll && karma start ./karma.conf.js", "test": "yarn run build:dll && NODE_PATH=./src karma start ./karma.conf.js",
"lint": "eslint ./src", "lint": "eslint ./src",
"flow": "flow", "flow": "flow",
"i18n:collect": "babel-node ./scripts/i18n-collect.js", "i18n:collect": "babel-node ./scripts/i18n-collect.js",
@ -21,7 +21,7 @@
"i18n:pull": "babel-node --presets es2015,stage-0 ./scripts/i18n-onesky.js pull", "i18n:pull": "babel-node --presets es2015,stage-0 ./scripts/i18n-onesky.js pull",
"build": "yarn run clean && yarn run build:webpack --progress", "build": "yarn run clean && yarn run build:webpack --progress",
"build:install": "yarn install && check-node-version", "build:install": "yarn install && check-node-version",
"build:webpack": "webpack --colors -p --bail", "build:webpack": "NODE_PATH=./src webpack --colors -p --bail",
"build:quiet": "yarn run clean && yarn run build:webpack --quiet", "build:quiet": "yarn run clean && yarn run build:webpack --quiet",
"build:dll": "node ./scripts/build-dll.js" "build:dll": "node ./scripts/build-dll.js"
}, },

View File

@ -1,5 +1,3 @@
import IntlProvider from './IntlProvider'; // @flow
export { default as IntlProvider } from './IntlProvider';
export { export { default as localeFlags } from './localeFlags';
IntlProvider
};

View File

@ -0,0 +1,30 @@
// @flow
import supportedLocales from 'i18n/index.json';
const localeToCountryCode = {
en: 'gb',
be: 'by',
pt: 'br',
uk: 'ua',
vi: 'vn',
sl: 'si',
};
const SUPPORTED_LANGUAGES: Array<string> = Object.keys(supportedLocales);
export default {
getCountryList(): Array<string> {
return SUPPORTED_LANGUAGES.map((locale) => localeToCountryCode[locale] || locale);
},
/**
* Возвращает для указанной локали её флаг с учётом всех нюансов загрузки флага
* и подбора соответствующего локали флага.
*
* @param {string} locale
*
* @return {string}
*/
getIconUrl(locale: string): string {
return require(`flag-icon-css/flags/4x3/${localeToCountryCode[locale] || locale}.svg`);
}
};

View File

@ -5,7 +5,7 @@ import { FormattedMessage as Message, intlShape } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import { requireLocaleFlag } from 'functions'; import { localeFlags } from 'components/i18n';
import LANGS from 'i18n/index.json'; import LANGS from 'i18n/index.json';
import formStyles from 'components/ui/form/form.scss'; import formStyles from 'components/ui/form/form.scss';
@ -197,7 +197,7 @@ class LanguageSwitcher extends Component {
return ( return (
<div className={styles.languageFlex}> <div className={styles.languageFlex}>
<div className={styles.languageIco} style={{ <div className={styles.languageIco} style={{
backgroundImage: `url('${requireLocaleFlag(locale)}')`, backgroundImage: `url('${localeFlags.getIconUrl(locale)}')`,
}} /> }} />
<div className={styles.languageCaptions}> <div className={styles.languageCaptions}>
<div className={styles.languageName}> <div className={styles.languageName}>

View File

@ -5,7 +5,7 @@ import { FormattedMessage as Message, FormattedRelative as Relative } from 'reac
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { requireLocaleFlag } from 'functions'; import { localeFlags } from 'components/i18n';
import LANGS from 'i18n/index.json'; import LANGS from 'i18n/index.json';
import { userShape } from 'components/user/User'; import { userShape } from 'components/user/User';
@ -93,7 +93,7 @@ class Profile extends Component {
value={ value={
<span className={styles.language} onClick={this.onLanguageSwitcher.bind(this)}> <span className={styles.language} onClick={this.onLanguageSwitcher.bind(this)}>
<span className={styles.languageIcon} style={{ <span className={styles.languageIcon} style={{
backgroundImage: `url('${requireLocaleFlag(user.lang)}')` backgroundImage: `url('${localeFlags.getIconUrl(user.lang)}')`
}} /> }} />
{LANGS[user.lang].name} {LANGS[user.lang].name}
</span> </span>

View File

@ -79,23 +79,3 @@ export function getJwtPayload(jwt: string): Object {
throw new Error('Can not decode jwt token'); throw new Error('Can not decode jwt token');
} }
} }
const localeToCountryCode = {
en: 'gb',
be: 'by',
pt: 'br',
uk: 'ua',
vi: 'vn',
sl: 'si',
};
/**
* Возвращает для указанной локали её флаг с учётом всех нюансов загрузки флага
* и подбора соответствующего локали флага.
*
* @param {string} locale
* @return {*}
*/
export function requireLocaleFlag(locale: string) {
return require(`flag-icon-css/flags/4x3/${localeToCountryCode[locale] || locale}.svg`);
}

View File

@ -1,5 +1,7 @@
/* eslint-env node */ /* eslint-env node */
require('babel-register');
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
@ -8,6 +10,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const cssUrl = require('webpack-utils/cssUrl'); const cssUrl = require('webpack-utils/cssUrl');
const cssImport = require('postcss-import'); const cssImport = require('postcss-import');
const localeFlags = require('./src/components/i18n/localeFlags').default;
const SUPPORTED_LANGUAGES = Object.keys(require('./src/i18n/index.json')); const SUPPORTED_LANGUAGES = Object.keys(require('./src/i18n/index.json'));
const rootPath = path.resolve('./src'); const rootPath = path.resolve('./src');
@ -15,17 +18,6 @@ const outputPath = path.join(__dirname, 'dist');
const packageJson = require('./package.json'); const packageJson = require('./package.json');
const localeToCountryCode = {
en: 'gb',
be: 'by',
pt: 'br',
uk: 'ua',
vi: 'vn',
sl: 'si',
};
const flagsList = SUPPORTED_LANGUAGES.map((locale) => localeToCountryCode[locale] || locale);
let config = {}; let config = {};
try { try {
config = require('./config/env.js'); config = require('./config/env.js');
@ -148,9 +140,9 @@ const webpackConfig = {
new webpack.ContextReplacementPlugin( new webpack.ContextReplacementPlugin(
/locale-data/, new RegExp(`/(${SUPPORTED_LANGUAGES.join('|')})\\.js`) /locale-data/, new RegExp(`/(${SUPPORTED_LANGUAGES.join('|')})\\.js`)
), ),
// @see functions.js:requireLocaleFlag() // @see components/i18n/localeFlags.js
new webpack.ContextReplacementPlugin( new webpack.ContextReplacementPlugin(
/flag-icon-css\/flags\/4x3/, new RegExp(`/(${flagsList.join('|')})\\.svg`) /flag-icon-css\/flags\/4x3/, new RegExp(`/(${localeFlags.getCountryList().join('|')})\\.svg`)
), ),
], ],
@ -159,7 +151,7 @@ const webpackConfig = {
{ {
test: /\.scss$/, test: /\.scss$/,
extractInProduction: true, extractInProduction: true,
loader: 'style!css?' + JSON.stringify(cssLoaderQuery) + '!sass!postcss?syntax=postcss-scss' loader: `style!css?${ JSON.stringify(cssLoaderQuery) }!sass!postcss?syntax=postcss-scss`
}, },
{ {
test: /\.jsx?$/, test: /\.jsx?$/,