chore(react-i18n): update react version to 16.7.0

BedrockStreaming · Nov 8, 2018 · 0440337 · 0440337
1 parent 654b030
commit 0440337
Show file tree

Hide file tree

Showing 7 changed files with 1,104 additions and 34 deletions.
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
@@ -12,7 +12,7 @@
   ],
   "peerDependencies": {
     "prop-types": "^15.6.2",
-    "react": "^16.4.2"
+    "react": "^16.7.0"
   },
   "jest": {
     "timers": "fake"
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "lodash": "4.17.10",
+    "react": "16.7.0-alpha.0",
     "sprintf-js": "1.1.1"
   },
   "publishConfig": {

diff --git a/packages/react-i18n/src/components/i18n.container.js b/packages/react-i18n/src/components/i18n.container.js
@@ -1,19 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import context from './i18n.context';
 
 export const translate = RenderComponent => {
-  const TranslatedComponent = props => (
-    <Consumer>
-      {t => {
-        if (props.componentRef) {
-          return <RenderComponent t={t} {...props} ref={element => props.componentRef(element)} />;
-        }
+  const TranslatedComponent = props => {
+    const t = useContext(context);
 
-        return <RenderComponent t={t} {...props} />;
-      }}
-    </Consumer>
-  );
+    if (props.componentRef) {
+      return <RenderComponent t={t} {...props} ref={element => props.componentRef(element)} />;
+    }
+
+    return <RenderComponent t={t} {...props} />;
+  };
 
   TranslatedComponent.propTypes = {
     componentRef: PropTypes.func,

diff --git a/packages/react-i18n/src/components/i18n.context.js b/packages/react-i18n/src/components/i18n.context.js
@@ -1,3 +1,3 @@
 import React from 'react';
 
-export const { Provider, Consumer } = React.createContext('translation');
+export default React.createContext('translation');
diff --git a/packages/react-i18n/src/components/i18n.provider.js b/packages/react-i18n/src/components/i18n.provider.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from '../utils/i18n.utils';
-import { Provider } from './i18n.context';
+import Context from './i18n.context';
 
 export const I18nProvider = ({ lang, i18nNames, children }) => (
-  <Provider value={translate(lang, i18nNames)}>{children}</Provider>
+  <Context.Provider value={translate(lang, i18nNames)}>{children}</Context.Provider>
 );
 
 I18nProvider.propTypes = {

diff --git a/packages/react-i18n/src/components/i18nElement.component.js b/packages/react-i18n/src/components/i18nElement.component.js
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import context from './i18n.context';
 
-export const HtmlTrans = ({ i18nKey, data, number, general, element: Element, ...props }) => (
-  <Consumer>
-    {t => <Element {...props} dangerouslySetInnerHTML={{ __html: t(i18nKey, data, number, general) }} />}
-  </Consumer>
-);
+export const HtmlTrans = ({ i18nKey, data, number, general, element: Element, ...props }) => {
+  const t = useContext(context);
+
+  return <Element {...props} dangerouslySetInnerHTML={{ __html: t(i18nKey, data, number, general) }}/>;
+};
 
 HtmlTrans.defaultProps = {
   element: 'span',

diff --git a/packages/react-i18n/src/components/i18nString.component.js b/packages/react-i18n/src/components/i18nString.component.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import context from './i18n.context';
 
-export const Trans = ({ i18nKey, data, number, general }) => (
-  <Consumer>{t => t(i18nKey, data, number, general)}</Consumer>
-);
+export const Trans = ({ i18nKey, data, number, general }) => {
+  const t = useContext(context)
+
+  return t(i18nKey, data, number, general);
+};
 
 Trans.defaultProps = {
   data: {},