From 391c7d0bf3365382fb42ab966ebc5da87a4f4bef Mon Sep 17 00:00:00 2001 From: yankouskia Date: Sat, 7 Jul 2018 12:41:32 +0300 Subject: [PATCH 1/3] add implementaion, docs for injectI18n hoc --- packages/kbn-i18n/README.md | 22 ++++++++++++++++++++++ packages/kbn-i18n/src/react/index.js | 1 + packages/kbn-i18n/src/react/inject.js | 26 ++++++++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 packages/kbn-i18n/src/react/inject.js diff --git a/packages/kbn-i18n/README.md b/packages/kbn-i18n/README.md index ff00cb1e837da..cb0bc777fe9e5 100644 --- a/packages/kbn-i18n/README.md +++ b/packages/kbn-i18n/README.md @@ -280,6 +280,28 @@ const MyComponent = () => ( ); ``` +Library provides an API to inject the imperative formatting API into a React component via its props using `injectI18n` HOC. 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 into `injectI18n` function. The formatting API will be provided to the wrapped component via `props.intl`. + +```js +import React from 'react'; +import { ReactI18n } from '@kbn/i18n'; + +const { injectI18n } = ReactI18n; + +const MyComponentContent = ({ intl }) => ( + +); + +export const MyComponent = injectI18n(MyComponentContent); +``` + + ## Angular Angular wrapper has 4 entities: translation `provider`, `service`, `directive` diff --git a/packages/kbn-i18n/src/react/index.js b/packages/kbn-i18n/src/react/index.js index f80dd27268f96..63cb8885d88ce 100644 --- a/packages/kbn-i18n/src/react/index.js +++ b/packages/kbn-i18n/src/react/index.js @@ -30,3 +30,4 @@ export { export { I18nProvider } from './provider'; export { I18nContext } from './context'; +export { injectI18n } from './inject'; diff --git a/packages/kbn-i18n/src/react/inject.js b/packages/kbn-i18n/src/react/inject.js new file mode 100644 index 0000000000000..812812e132d66 --- /dev/null +++ b/packages/kbn-i18n/src/react/inject.js @@ -0,0 +1,26 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * HOC 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 { injectIntl as injectI18n } from 'react-intl'; From 0b35c4e6fd9e8bea28bd37b7036fdb4d405d8452 Mon Sep 17 00:00:00 2001 From: yankouskia Date: Thu, 12 Jul 2018 11:37:19 +0300 Subject: [PATCH 2/3] remove i18nContext wrapper, add docs for react components as classes --- packages/kbn-i18n/README.md | 66 +++++++++++++++----------- packages/kbn-i18n/src/react/context.js | 50 ------------------- packages/kbn-i18n/src/react/index.js | 1 - 3 files changed, 38 insertions(+), 79 deletions(-) delete mode 100644 packages/kbn-i18n/src/react/context.js diff --git a/packages/kbn-i18n/README.md b/packages/kbn-i18n/README.md index cb0bc777fe9e5..791c4d18349c5 100644 --- a/packages/kbn-i18n/README.md +++ b/packages/kbn-i18n/README.md @@ -252,41 +252,16 @@ 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: -```js -import React from 'react'; -import { ReactI18n } from '@kbn/i18n'; +React wrapper provides an ability to inject the imperative formatting API into a React component via its props using `injectI18n` HOC. 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 into `injectI18n` function. The formatting API will be provided to the wrapped component via `props.intl`. -const { I18nContext } = ReactI18n; - -const MyComponent = () => ( - - {intl => ( - - )} - -); -``` - -Library provides an API to inject the imperative formatting API into a React component via its props using `injectI18n` HOC. 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 into `injectI18n` function. 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 } = ReactI18n; +const { injectI18n, intlShape } = ReactI18n; const MyComponentContent = ({ intl }) => ( ( /> ); +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 { injectI18n, intlShape } = ReactI18n; + +class MyComponentContent extends React.Component { + static propTypes = { + intl: intlShape.isRequired, + }; + + render() { + const { intl } = this.props; + + return ( + + ); + } +} + +export const MyComponent = injectI18n(MyComponentContent); +``` ## Angular diff --git a/packages/kbn-i18n/src/react/context.js b/packages/kbn-i18n/src/react/context.js deleted file mode 100644 index df7c8877725fb..0000000000000 --- a/packages/kbn-i18n/src/react/context.js +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * 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 - * - * {intl => ( - * - * )} - * - */ -export class I18nContext extends PureComponent { - static propTypes = { - children: PropTypes.func.isRequired, - }; - - static contextTypes = { - intl: intlShape, - }; - - render() { - return this.props.children(this.context.intl); - } -} diff --git a/packages/kbn-i18n/src/react/index.js b/packages/kbn-i18n/src/react/index.js index 63cb8885d88ce..9619d2c8d162e 100644 --- a/packages/kbn-i18n/src/react/index.js +++ b/packages/kbn-i18n/src/react/index.js @@ -29,5 +29,4 @@ export { } from 'react-intl'; export { I18nProvider } from './provider'; -export { I18nContext } from './context'; export { injectI18n } from './inject'; From f73edd4205c29b93892056bd196fb8915fa50909 Mon Sep 17 00:00:00 2001 From: yankouskia Date: Thu, 12 Jul 2018 18:10:29 +0300 Subject: [PATCH 3/3] fix nits regarding naming conventions --- packages/kbn-i18n/README.md | 2 +- packages/kbn-i18n/src/react/inject.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/kbn-i18n/README.md b/packages/kbn-i18n/README.md index 791c4d18349c5..17d9032442d41 100644 --- a/packages/kbn-i18n/README.md +++ b/packages/kbn-i18n/README.md @@ -253,7 +253,7 @@ and added as a comment next to translation message at `defaultMessages.json` #### Attributes translation in React -React wrapper provides an ability to inject the imperative formatting API into a React component via its props using `injectI18n` HOC. 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 into `injectI18n` function. The formatting API will be provided to the wrapped component via `props.intl`. +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: diff --git a/packages/kbn-i18n/src/react/inject.js b/packages/kbn-i18n/src/react/inject.js index 812812e132d66..4520709657f20 100644 --- a/packages/kbn-i18n/src/react/inject.js +++ b/packages/kbn-i18n/src/react/inject.js @@ -18,8 +18,8 @@ */ /** - * HOC is used for injecting intl prop into wrapped component - * and encapsulate direct work with React context. + * 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 */