Skip to content
This repository has been archived by the owner on May 17, 2019. It is now read-only.

Commit

Permalink
Feature: pass localeCode along with the translate prop in the withTra…
Browse files Browse the repository at this point in the history
#238

Co-authored-by: Mo Kouli <[email protected]>
  • Loading branch information
2 people authored and fusion-bot[bot] committed Apr 10, 2019
1 parent fb16ce6 commit 5dd6c62
Show file tree
Hide file tree
Showing 7 changed files with 203 additions and 6 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -257,13 +257,14 @@ const TranslatedComponent = withTranslations(['key'])(Component);

Be aware that the `withTranslations` function expects an array of string literals. This plugin uses a babel transform and the argument to this function must be an inline value, i.e. you cannot pass a variable.

The original `Component` receives a prop called `{translate}`.
The original `Component` receives a prop called `{translate}` and the `{localeCode}`.

**Types**

```js
type TranslateProp = {
translate: (key: string, interpolations: Object) => string,
localeCode: string
};
type WithTranslations = (
translationKeys: Array<string>
Expand All @@ -272,6 +273,7 @@ type WithTranslations = (

* `translationKeys: Array<string>` - list of keys with which to provide translations for.
* `translate: (key: string, interpolations: Object) => string` - returns the translation for the given key, with the provided interpolations.
* `localeCode: string = 'en_US'` - the current `localeCode` we are tranlating to. Defaults to `en_US`.

---

Expand Down
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"babel-jest": "^23.6.0",
"create-universal-package": "3.4.6",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.12.1",
"eslint": "^5.11.1",
"eslint-config-fusion": "^4.0.0",
"eslint-plugin-cup": "2.0.1",
Expand Down Expand Up @@ -84,5 +85,8 @@
}
}
},
"jest": {
"setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
},
"license": "MIT"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`withTranslations() - localeCode 1`] = `"<div>fr_CAfoo bar baz</div>"`;
50 changes: 50 additions & 0 deletions src/__tests__/with-translations.test.browser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// @flow

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {mount} from 'enzyme';

import {withTranslations} from '../index';

function mockProvider(i18n) {
class I18NProvider extends Component<*, *> {
getChildContext() {
return {i18n};
}
render() {
return React.Children.only(this.props.children);
}
}

I18NProvider.childContextTypes = {
i18n: PropTypes.object.isRequired,
};

return I18NProvider;
}

test('withTranslations() HOC - localeCode', () => {
const Foo = withTranslations([])(({localeCode, translate}) => {
return (
<div>
{localeCode}
{translate()}
</div>
);
});

const Provider = mockProvider({
localeCode: 'fr_CA',
translate() {
return 'foo bar baz';
},
});

expect(
mount(
<Provider>
<Foo />
</Provider>
).html()
).toMatchSnapshot();
});
6 changes: 6 additions & 0 deletions src/setupTests.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// @flow

import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({adapter: new Adapter()});
16 changes: 14 additions & 2 deletions src/with-translations.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,33 @@ export const withTranslations = (
) => {
return <T: {}>(
Component: React$ComponentType<T>
): Class<React$Component<$Diff<T, {|translate?: TranslateType|}>>> => {
): Class<
React$Component<
$Diff<T, {|translate?: TranslateType, localeCode?: string|}>
>
> => {
class WithTranslations extends React.Component<T> {
translate: TranslateType;
localeCode: string;

constructor(props: T, context: Context) {
super(props, context);
const {i18n} = context;
this.localeCode = i18n ? i18n.localeCode : 'en_US';
this.translate = i18n
? (key: string, interpolations?: {[string]: string | number}) =>
i18n.translate(key, interpolations)
: (key: string) => key;
}

render() {
return <Component {...this.props} translate={this.translate} />;
return (
<Component
{...this.props}
translate={this.translate}
localeCode={this.localeCode}
/>
);
}
}

Expand Down
126 changes: 123 additions & 3 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1059,6 +1059,22 @@ agent-base@^4.1.0:
dependencies:
es6-promisify "^5.0.0"

airbnb-prop-types@^2.12.0:
version "2.13.2"
resolved "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.13.2.tgz#43147a5062dd2a4a5600e748a47b64004cc5f7fc"
integrity sha512-2FN6DlHr6JCSxPPi25EnqGaXC4OC3/B3k1lCd6MMYrZ51/Gf/1qDfaR+JElzWa+Tl7cY2aYOlsYJGFeQyVHIeQ==
dependencies:
array.prototype.find "^2.0.4"
function.prototype.name "^1.1.0"
has "^1.0.3"
is-regex "^1.0.4"
object-is "^1.0.1"
object.assign "^4.1.0"
object.entries "^1.1.0"
prop-types "^15.7.2"
prop-types-exact "^1.2.0"
react-is "^16.8.6"

ajv-keywords@^3.1.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
Expand Down Expand Up @@ -1220,6 +1236,14 @@ array-unique@^0.3.2:
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=

array.prototype.find@^2.0.4:
version "2.0.4"
resolved "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.0.4.tgz#556a5c5362c08648323ddaeb9de9d14bc1864c90"
integrity sha1-VWpcU2LAhkgyPdrrnenRS8GGTJA=
dependencies:
define-properties "^1.1.2"
es-abstract "^1.7.0"

array.prototype.flat@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
Expand Down Expand Up @@ -2280,7 +2304,7 @@ default-require-extensions@^2.0.0:
dependencies:
strip-bom "^3.0.0"

define-properties@^1.1.2:
define-properties@^1.1.2, define-properties@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
Expand Down Expand Up @@ -2509,6 +2533,31 @@ entities@^1.1.1, entities@~1.1.1:
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==

enzyme-adapter-react-16@^1.12.1:
version "1.12.1"
resolved "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.12.1.tgz#6a2d74c80559d35ac0a91ca162fa45f4186290cf"
integrity sha512-GB61gvY97XvrA6qljExGY+lgI6BBwz+ASLaRKct9VQ3ozu0EraqcNn3CcrUckSGIqFGa1+CxO5gj5is5t3lwrw==
dependencies:
enzyme-adapter-utils "^1.11.0"
object.assign "^4.1.0"
object.values "^1.1.0"
prop-types "^15.7.2"
react-is "^16.8.6"
react-test-renderer "^16.0.0-0"
semver "^5.6.0"

enzyme-adapter-utils@^1.11.0:
version "1.11.0"
resolved "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.11.0.tgz#6ffff782b1b57dd46c72a845a91fc4103956a117"
integrity sha512-0VZeoE9MNx+QjTfsjmO1Mo+lMfunucYB4wt5ficU85WB/LoetTJrbuujmHP3PJx6pSoaAuLA+Mq877x4LoxdNg==
dependencies:
airbnb-prop-types "^2.12.0"
function.prototype.name "^1.1.0"
object.assign "^4.1.0"
object.fromentries "^2.0.0"
prop-types "^15.7.2"
semver "^5.6.0"

enzyme@^3.8.0:
version "3.8.0"
resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.8.0.tgz#646d2d5d0798cb98fdec39afcee8a53237b47ad5"
Expand Down Expand Up @@ -2564,7 +2613,7 @@ es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.5.0, es-abstract@^1.6.1
is-callable "^1.1.3"
is-regex "^1.0.4"

es-abstract@^1.5.1:
es-abstract@^1.12.0, es-abstract@^1.5.1:
version "1.13.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
Expand Down Expand Up @@ -4895,7 +4944,7 @@ longest@^1.0.1:
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
Expand Down Expand Up @@ -5507,6 +5556,16 @@ object.entries@^1.0.4:
function-bind "^1.1.0"
has "^1.0.1"

object.entries@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
dependencies:
define-properties "^1.1.3"
es-abstract "^1.12.0"
function-bind "^1.1.1"
has "^1.0.3"

object.fromentries@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
Expand Down Expand Up @@ -5550,6 +5609,16 @@ object.values@^1.0.4:
function-bind "^1.1.0"
has "^1.0.1"

object.values@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
dependencies:
define-properties "^1.1.3"
es-abstract "^1.12.0"
function-bind "^1.1.1"
has "^1.0.3"

on-finished@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
Expand Down Expand Up @@ -5977,6 +6046,15 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"

prop-types-exact@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
dependencies:
has "^1.0.3"
object.assign "^4.1.0"
reflect.ownkeys "^0.2.0"

prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
Expand All @@ -5985,6 +6063,15 @@ prop-types@^15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.1"

prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.8.1"

proxy-from-env@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
Expand Down Expand Up @@ -6148,6 +6235,21 @@ react-is@^16.7.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==

react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==

react-test-renderer@^16.0.0-0:
version "16.8.6"
resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==
dependencies:
object-assign "^4.1.1"
prop-types "^15.6.2"
react-is "^16.8.6"
scheduler "^0.13.6"

react@^16.7.0:
version "16.7.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
Expand Down Expand Up @@ -6247,6 +6349,11 @@ realpath-native@^1.0.0, realpath-native@^1.0.2:
dependencies:
util.promisify "^1.0.0"

reflect.ownkeys@^0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=

regenerate-unicode-properties@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"
Expand Down Expand Up @@ -6601,11 +6708,24 @@ scheduler@^0.12.0:
loose-envify "^1.1.0"
object-assign "^4.1.1"

scheduler@^0.13.6:
version "0.13.6"
resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
version "5.6.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==

semver@^5.6.0:
version "5.7.0"
resolved "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==

set-blocking@^2.0.0, set-blocking@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
Expand Down

0 comments on commit 5dd6c62

Please sign in to comment.