Use injectI18n Higher-Order Component instead of I18nContext (elastic…

…#20542) (elastic#21529)

* add implementation of I18nContext, docs for injectI18n hoc

* remove i18nContext wrapper, add docs for react components as classes

packages/kbn-i18n/README.md

@@ -252,32 +252,64 @@ and added as a comment next to translation message at `defaultMessages.json`
 
 
 #### Attributes translation in React
-React wrapper provides an API to inject the imperative formatting API into a React
-component by using render callback pattern. This should be used when your React
-component needs to format data to a string value where a React element is not
-suitable; e.g., a `title` or `aria` attribute. In order to use it, you should
-wrap your components into `I18nContext` component. The child of this component
-should be a function that takes `intl` object into parameters:
+
+React wrapper provides an ability to inject the imperative formatting API into a React component via its props using `injectI18n` Higher-Order Component. This should be used when your React component needs to format data to a string value where a React element is not suitable; e.g., a `title` or `aria` attribute. In order to use it you should wrap your component with `injectI18n` Higher-Order Component. The formatting API will be provided to the wrapped component via `props.intl`.
+
+React component as a pure function:
+
+```js
+import React from 'react';
+import { ReactI18n } from '@kbn/i18n';
+
+const { injectI18n, intlShape } = ReactI18n;
+
+const MyComponentContent = ({ intl }) => (
+  <input
+    type="text"
+    placeholder={intl.formatMessage({
+      id: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
+      defaultMessage: 'Search',
+    })}
+  />
+);
+
+MyComponentContent.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export const MyComponent = injectI18n(MyComponentContent);
+```
+
+React component as a class:
 
 ```js
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ReactI18n } from '@kbn/i18n';
 
-const { I18nContext } = ReactI18n;
+const { injectI18n, intlShape } = ReactI18n;
+
+class MyComponentContent extends React.Component {
+  static propTypes = {
+    intl: intlShape.isRequired,
+  };
 
-const MyComponent = () => (
-  <I18nContext>
-    {intl => (
+  render() {
+    const { intl } = this.props;
+
+    return (
       <input
         type="text"
         placeholder={intl.formatMessage({
           id: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
           defaultMessage: 'Search',
         })}
       />
-    )}
-  </I18nContext>
-);
+    );
+  }
+}
+
+export const MyComponent = injectI18n(MyComponentContent);
 ```
 
 ## Angular

packages/kbn-i18n/src/react/index.js

@@ -29,4 +29,4 @@ export {
 } from 'react-intl';
 
 export { I18nProvider } from './provider';
-export { I18nContext } from './context';
+export { injectI18n } from './inject';

packages/kbn-i18n/src/react/context.js → packages/kbn-i18n/src/react/inject.js

@@ -17,34 +17,10 @@
  * under the License.
  */
 
-import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { intlShape } from 'react-intl';
-
 /**
- * Provides intl context to a child component using React render callback pattern
- * @example
- * <I18nContext>
- *   {intl => (
- *     <input
- *       placeholder={intl.formatMessage({
-           id: 'my-id',
-           defaultMessage: 'my default message',
-         })}
- *     />
- *   )}
- * </I18nContext>
+ * Higher-Order Component is used for injecting intl prop into wrapped
+ * component and encapsulate direct work with React context.
+ * More docs and examples can be found here https://github.com/yahoo/react-intl/wiki/API#injection-api
  */
-export class I18nContext extends PureComponent {
-  static propTypes = {
-    children: PropTypes.func.isRequired,
-  };
-
-  static contextTypes = {
-    intl: intlShape,
-  };
 
-  render() {
-    return this.props.children(this.context.intl);
-  }
-}
+export { injectIntl as injectI18n } from 'react-intl';