lingui-react - npm Package Compare versions

Comparing version 1.0.0-6 to 1.0.0

dist/index.es.js

@@ -13,2 +13,4 @@ import { date, number } from 'lingui-formats';
 import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import _Object$keys from 'babel-runtime/core-js/object/keys';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 
@@ -386,32 +388,24 @@ var Render = function Render(_ref) {
 
-var Plural = function (_React$Component) {
-  _inherits(Plural, _React$Component);
+var Select = WithI18n()(function (_React$Component) {
+  _inherits(Select, _React$Component);
 
-  function Plural() {
-    _classCallCheck(this, Plural);
+  function Select() {
+    _classCallCheck(this, Select);
 
-    return _possibleConstructorReturn(this, (Plural.__proto__ || _Object$getPrototypeOf(Plural)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Select.__proto__ || _Object$getPrototypeOf(Select)).apply(this, arguments));
   }
 
-  _createClass(Plural, [{
+  _createClass(Select, [{
     key: 'render',
     value: function render() {
       var _props = this.props,
-          value = _props.value,
-          offset = _props.offset,
-          i18n = _props.i18n;
+          className = _props.className,
+          render = _props.render,
+          i18n = _props.i18n,
+          selectProps = _objectWithoutProperties(_props, ['className', 'render', 'i18n']);
 
-
-      var n = parseInt(value) - parseInt(offset);
-      var form = i18n.pluralForm(n);
-      var translation = (this.props['_' + value] || this.props[form]).replace('#', n);
-
-      var _props2 = this.props,
-          className = _props2.className,
-          render = _props2.render;
-
       return React.createElement(
         Render,
         { className: className, render: render },
-        translation
+        i18n.select(selectProps)
       );
@@ -421,48 +415,74 @@ }
 
-  return Plural;
-}(React.Component);
+  return Select;
+}(React.Component));
 
-Plural.defaultProps = {
-  offset: 0
-};
+var PluralFactory = function PluralFactory() {
+  var _class2, _temp2;
 
+  var ordinal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-var Plural$1 = WithI18n()(Plural);
+  var displayName = !ordinal ? 'Plural' : 'SelectOrdinal';
+  var pluralType = !ordinal ? 'plural' : 'selectOrdinal';
 
-var Select = function (_React$Component) {
-  _inherits(Select, _React$Component);
+  return _temp2 = _class2 = function (_React$Component2) {
+    _inherits(_class2, _React$Component2);
 
-  function Select() {
-    _classCallCheck(this, Select);
+    function _class2() {
+      var _ref;
 
-    return _possibleConstructorReturn(this, (Select.__proto__ || _Object$getPrototypeOf(Select)).apply(this, arguments));
-  }
+      var _temp, _this2, _ret;
 
-  _createClass(Select, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          value = _props.value,
-          other = _props.other;
+      _classCallCheck(this, _class2);
 
-      var translation = this.props[value] || other;
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-      var _props2 = this.props,
-          className = _props2.className,
-          render = _props2.render;
-
-      return React.createElement(
-        Render,
-        { className: className, render: render },
-        translation
-      );
+      return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_ref = _class2.__proto__ || _Object$getPrototypeOf(_class2)).call.apply(_ref, [this].concat(args))), _this2), _this2.displayName = displayName, _temp), _possibleConstructorReturn(_this2, _ret);
     }
-  }]);
 
-  return Select;
-}(React.Component);
+    _createClass(_class2, [{
+      key: 'render',
+      value: function render() {
+        var _props2 = this.props,
+            className = _props2.className,
+            render = _props2.render,
+            i18n = _props2.i18n,
+            value = _props2.value,
+            offset = _props2.offset,
+            props = _objectWithoutProperties(_props2, ['className', 'render', 'i18n', 'value', 'offset']);
 
+        // i18n.selectOrdinal/plural uses numbers for exact matches (1, 2),
+        // while SelectOrdinal/Plural has to use strings (_1, _2).
+
+
+        var pluralProps = _Object$keys(props).reduce(function (acc, prop) {
+          var key = prop.replace('_', '');
+          acc[key] = props[prop];
+          return acc;
+        }, {
+          value: parseInt(value),
+          offset: parseInt(offset)
+        });
+
+        return React.createElement(
+          Render,
+          { className: className, render: render },
+          i18n[pluralType](pluralProps)
+        );
+      }
+    }]);
+
+    return _class2;
+  }(React.Component), _class2.defaultProps = {
+    offset: 0
+  }, _temp2;
+};
+
+var Plural = WithI18n()(PluralFactory(false));
+var SelectOrdinal = WithI18n()(PluralFactory(true));
+
 var DateFormat = WithI18n()(createFormat(date));
 var NumberFormat = WithI18n()(createFormat(number));
 
-export { WithI18n, DateFormat, NumberFormat, I18nProvider, Trans$1 as Trans, Plural$1 as Plural, Select };
+export { WithI18n, DateFormat, NumberFormat, I18nProvider, Trans$1 as Trans, Plural, Select, SelectOrdinal };

dist/index.js

@@ -20,2 +20,4 @@ 'use strict';
 var _slicedToArray = _interopDefault(require('babel-runtime/helpers/slicedToArray'));
+var _Object$keys = _interopDefault(require('babel-runtime/core-js/object/keys'));
+var _objectWithoutProperties = _interopDefault(require('babel-runtime/helpers/objectWithoutProperties'));
 
@@ -393,32 +395,24 @@ var Render = function Render(_ref) {
 
-var Plural = function (_React$Component) {
-  _inherits(Plural, _React$Component);
+var Select = WithI18n()(function (_React$Component) {
+  _inherits(Select, _React$Component);
 
-  function Plural() {
-    _classCallCheck(this, Plural);
+  function Select() {
+    _classCallCheck(this, Select);
 
-    return _possibleConstructorReturn(this, (Plural.__proto__ || _Object$getPrototypeOf(Plural)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Select.__proto__ || _Object$getPrototypeOf(Select)).apply(this, arguments));
   }
 
-  _createClass(Plural, [{
+  _createClass(Select, [{
     key: 'render',
     value: function render() {
       var _props = this.props,
-          value = _props.value,
-          offset = _props.offset,
-          i18n = _props.i18n;
+          className = _props.className,
+          render = _props.render,
+          i18n = _props.i18n,
+          selectProps = _objectWithoutProperties(_props, ['className', 'render', 'i18n']);
 
-
-      var n = parseInt(value) - parseInt(offset);
-      var form = i18n.pluralForm(n);
-      var translation = (this.props['_' + value] || this.props[form]).replace('#', n);
-
-      var _props2 = this.props,
-          className = _props2.className,
-          render = _props2.render;
-
       return React__default.createElement(
         Render,
         { className: className, render: render },
-        translation
+        i18n.select(selectProps)
       );
@@ -428,45 +422,71 @@ }
 
-  return Plural;
-}(React__default.Component);
+  return Select;
+}(React__default.Component));
 
-Plural.defaultProps = {
-  offset: 0
-};
+var PluralFactory = function PluralFactory() {
+  var _class2, _temp2;
 
+  var ordinal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-var Plural$1 = WithI18n()(Plural);
+  var displayName = !ordinal ? 'Plural' : 'SelectOrdinal';
+  var pluralType = !ordinal ? 'plural' : 'selectOrdinal';
 
-var Select = function (_React$Component) {
-  _inherits(Select, _React$Component);
+  return _temp2 = _class2 = function (_React$Component2) {
+    _inherits(_class2, _React$Component2);
 
-  function Select() {
-    _classCallCheck(this, Select);
+    function _class2() {
+      var _ref;
 
-    return _possibleConstructorReturn(this, (Select.__proto__ || _Object$getPrototypeOf(Select)).apply(this, arguments));
-  }
+      var _temp, _this2, _ret;
 
-  _createClass(Select, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          value = _props.value,
-          other = _props.other;
+      _classCallCheck(this, _class2);
 
-      var translation = this.props[value] || other;
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-      var _props2 = this.props,
-          className = _props2.className,
-          render = _props2.render;
-
-      return React__default.createElement(
-        Render,
-        { className: className, render: render },
-        translation
-      );
+      return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_ref = _class2.__proto__ || _Object$getPrototypeOf(_class2)).call.apply(_ref, [this].concat(args))), _this2), _this2.displayName = displayName, _temp), _possibleConstructorReturn(_this2, _ret);
     }
-  }]);
 
-  return Select;
-}(React__default.Component);
+    _createClass(_class2, [{
+      key: 'render',
+      value: function render() {
+        var _props2 = this.props,
+            className = _props2.className,
+            render = _props2.render,
+            i18n = _props2.i18n,
+            value = _props2.value,
+            offset = _props2.offset,
+            props = _objectWithoutProperties(_props2, ['className', 'render', 'i18n', 'value', 'offset']);
 
+        // i18n.selectOrdinal/plural uses numbers for exact matches (1, 2),
+        // while SelectOrdinal/Plural has to use strings (_1, _2).
+
+
+        var pluralProps = _Object$keys(props).reduce(function (acc, prop) {
+          var key = prop.replace('_', '');
+          acc[key] = props[prop];
+          return acc;
+        }, {
+          value: parseInt(value),
+          offset: parseInt(offset)
+        });
+
+        return React__default.createElement(
+          Render,
+          { className: className, render: render },
+          i18n[pluralType](pluralProps)
+        );
+      }
+    }]);
+
+    return _class2;
+  }(React__default.Component), _class2.defaultProps = {
+    offset: 0
+  }, _temp2;
+};
+
+var Plural = WithI18n()(PluralFactory(false));
+var SelectOrdinal = WithI18n()(PluralFactory(true));
+
 var DateFormat = WithI18n()(createFormat(linguiFormats.date));
@@ -480,3 +500,4 @@ var NumberFormat = WithI18n()(createFormat(linguiFormats.number));
 exports.Trans = Trans$1;
-exports.Plural = Plural$1;
+exports.Plural = Plural;
 exports.Select = Select;
+exports.SelectOrdinal = SelectOrdinal;

package.json

 {
   "name": "lingui-react",
-  "version": "1.0.0-6",
+  "version": "1.0.0",
   "description": "React components for translations",
@@ -37,4 +37,4 @@ "main": "index.js",
     "babel-runtime": "^6.23.0",
-    "lingui-formats": "^1.0.0-6",
-    "lingui-i18n": "^1.0.0-6",
+    "lingui-formats": "^1.0.0",
+    "lingui-i18n": "^1.0.0",
     "prop-types": "^15.5.10"
@@ -41,0 +41,0 @@ },

src/DateFormat.test.js

@@ -5,3 +5,3 @@ // @flow
 
-import { DateFormat } from '.'
+import { DateFormat, NumberFormat } from '.'
 
@@ -32,1 +32,37 @@ describe('DateFormat', function () {
 })
+
+describe('NumberFormat', function () {
+  const languageContext = (code) => ({ context: { linguiPublisher: { i18n: { language: code } } } })
+
+  it('should render', function () {
+    const node = mount(
+      <NumberFormat value={42} format={{
+        style: 'currency',
+        currency: 'EUR',
+        minimumFractionDigits: 2
+      }} />,
+      languageContext('en')
+    ).find('Render')
+    expect(node.text()).toEqual('€42.00')
+  })
+
+  it('should render translation inside custom component', function () {
+    const format = {
+      style: 'currency',
+      currency: 'EUR',
+      minimumFractionDigits: 2
+    }
+
+    const html1 = mount(
+      <NumberFormat value="42" format={format} render={<p className="lead" />} />,
+      languageContext('en')
+    ).find('Render').html()
+    const html2 = mount(
+      <NumberFormat value="42" format={format} render={({ translation }) => <p className="lead">{translation}</p>} />,
+      languageContext('en')
+    ).find('Render').html()
+
+    expect(html1).toEqual('<p class="lead">€42.00</p>')
+    expect(html2).toEqual(html1)
+  })
+})

src/index.js

@@ -13,6 +13,5 @@ // @flow
 export { default as Trans } from './Trans'
-export { default as Plural } from './Plural'
-export { default as Select } from './Select'
+export { Plural, Select, SelectOrdinal } from './Select'
 
 export const DateFormat = WithI18n()(createFormat(date))
 export const NumberFormat = WithI18n()(createFormat(number))

src/Select.js

 // @flow
 import React from 'react'
+import WithI18n from './WithI18n'
+import type { WithI18nProps } from './WithI18n'
 
@@ -7,19 +9,67 @@ import type { RenderProps } from './Render'
 
+type PluralProps = {
+  value: number | string,
+  offset?: number | string,
+  zero?: any,
+  one?: any,
+  two?: any,
+  few?: any,
+  many?: any,
+  other: any,
+} & WithI18nProps & RenderProps
+
 type SelectProps = {
   value: any,
   other: any,
-} & RenderProps
+} & WithI18nProps & RenderProps
 
-class Select extends React.Component<*, SelectProps, *> {
+const Select = WithI18n()(class Select extends React.Component<*, SelectProps, *> {
   props: SelectProps
 
   render () {
-    const { value, other } = this.props
-    const translation = this.props[value] || other
+    const { className, render, i18n, ...selectProps } = this.props
+    return <Render className={className} render={render}>{i18n.select(selectProps)}</Render>
+  }
+})
 
-    const { className, render } = this.props
-    return <Render className={className} render={render}>{translation}</Render>
+const PluralFactory = (ordinal = false) => {
+  const displayName = !ordinal ? 'Plural' : 'SelectOrdinal'
+  const pluralType = !ordinal ? 'plural' : 'selectOrdinal'
+
+  return class extends React.Component<*, PluralProps, *> {
+    displayName = displayName
+
+    props: PluralProps
+
+    static defaultProps = {
+      offset: 0
+    }
+
+    render () {
+      const { className, render, i18n, value, offset, ...props } = this.props
+
+      // i18n.selectOrdinal/plural uses numbers for exact matches (1, 2),
+      // while SelectOrdinal/Plural has to use strings (_1, _2).
+      const pluralProps = Object.keys(props).reduce((acc, prop) => {
+        const key = prop.replace('_', '')
+        acc[key] = props[prop]
+        return acc
+      }, {
+        value: parseInt(value),
+        offset: parseInt(offset)
+      })
+
+      return (
+        <Render className={className} render={render}>
+          {i18n[pluralType](pluralProps)}
+        </Render>
+      )
+    }
   }
 }
 
-export default Select
+const Plural = WithI18n()(PluralFactory(false))
+const SelectOrdinal = WithI18n()(PluralFactory(true))
+
+export { Plural, SelectOrdinal, Select }
+export type { PluralProps }

src/Select.test.js

 // @flow
 import React from 'react'
 import { mount } from 'enzyme'
-import { Select } from '.'
+import { setupI18n } from 'lingui-i18n'
+import linguiDev from 'lingui-i18n/dev'
+import { Select, Plural, SelectOrdinal } from '.'
 
-describe('Select', function () {
-  it('should render translation inside custom component', function () {
-    const html1 = mount(
-      <Select
-        render={<p className="lead"/>}
-        value="male" male="He" female="She" other="They" />
-    ).find('Render').html()
-    const html2 = mount(
-      <Select
-        render={({ translation }) => <p className="lead">{translation}</p>}
-        value="male" male="He" female="She" other="They" />
-    ).find('Render').html()
+describe('Categories', function () {
+  const i18n = code => setupI18n({
+    language: code,
+    catalogs: { [code]: {} },
+    development: linguiDev
+  })
+  const languageContext = (code) => ({ context: { linguiPublisher: { i18n: i18n(code) } } })
 
-    expect(html1).toEqual('<p class="lead">He</p>')
-    expect(html2).toEqual(html1)
+  describe('Plural', function () {
+    it('should render translation inside custom component', function () {
+      const html1 = mount(
+        <Plural render={
+          <p className="lead"/>} value="1" one="# book" other="# books"/>,
+        languageContext('en')
+      ).find('Render').html()
+      const html2 = mount(
+        <Plural render={({ translation }) =>
+          <p className="lead">{translation}</p>} value="1" one="# book" other="# books"/>,
+        languageContext('en')
+      ).find('Render').html()
+
+      expect(html1).toEqual('<p class="lead">1 book</p>')
+      expect(html2).toEqual(html1)
+    })
+
+    it('should render plural correctly', function () {
+      const node = mount(
+        <Plural value="1" one="# book" other="# books"/>,
+        languageContext('en')
+      )
+
+      const t = () => node.find('Render').text()
+
+      expect(t()).toEqual('1 book')
+
+      node.setProps({ value: 2 })
+      expect(t()).toEqual('2 books')
+    })
+
+    it('should use plural forms based on language', function () {
+      const node = mount(
+        <Plural value="1" one="# kniha" few="# knihy" other="# knih"/>,
+        languageContext('cs')
+      )
+
+      const t = () => node.find('Render').text()
+
+      expect(t()).toEqual('1 kniha')
+
+      node.setProps({ value: 2 })
+      expect(t()).toEqual('2 knihy')
+
+      node.setProps({ value: 5 })
+      expect(t()).toEqual('5 knih')
+    })
+
+    it('should offset value', function () {
+      const node = mount(
+        <Plural value="1" offset="1" _1="one" one="one and one another" other="other"/>,
+        languageContext('en')
+      )
+
+      const t = () => node.find('Render').text()
+
+      expect(t()).toEqual('one')
+
+      node.setProps({ value: 2 })
+      expect(t()).toEqual('one and one another')
+
+      node.setProps({ value: 3 })
+      expect(t()).toEqual('other')
+    })
   })
 
-  it('should render Select correctly', function () {
-    const node = mount(
-      <Select value="male" male="He" female="She" other="They" />
-    )
+  describe('SelectOrdinal', function () {
+    it('should render ordinal correctly', function () {
+      const node = mount(
+        <SelectOrdinal value="1" one="#st" two="#nd" few="#rd" other="#th" />,
+        languageContext('en')
+      )
 
-    const t = () => node.find('Render').text()
+      const t = () => node.find('Render').text()
 
-    expect(t()).toEqual('He')
+      expect(t()).toEqual('1st')
 
-    node.setProps({ value: 'female' })
-    expect(t()).toEqual('She')
+      node.setProps({ value: 2 })
+      expect(t()).toEqual('2nd')
 
-    node.setProps({ value: 'nan' })
-    expect(t()).toEqual('They')
+      node.setProps({ value: 3 })
+      expect(t()).toEqual('3rd')
+
+      node.setProps({ value: 4 })
+      expect(t()).toEqual('4th')
+    })
+
+    it('should use plural forms based on language', function () {
+      // Something Welsh
+      // http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html
+      const node = mount(
+        <SelectOrdinal
+          value="0"
+          zero="# cŵn"
+          one="# ci"
+          two="# gi"
+          few="# chi"
+          many="# chi"
+          other="# ci"
+        />,
+        languageContext('cy')
+      )
+      const t = () => node.find('Render').text()
+
+      expect(t()).toEqual('0 cŵn')
+
+      node.setProps({ value: 1 })
+      expect(t()).toEqual('1 ci')
+
+      node.setProps({ value: 2 })
+      expect(t()).toEqual('2 gi')
+
+      node.setProps({ value: 3 })
+      expect(t()).toEqual('3 chi')
+
+      node.setProps({ value: 5 })
+      expect(t()).toEqual('5 chi')
+
+      node.setProps({ value: 10 })
+      expect(t()).toEqual('10 ci')
+    })
+
+    it('should use other rule when cardinal ones are missing', function () {
+      const node = mount(
+        <SelectOrdinal value="1" one="Nope" other="1. křižovatka" />,
+        languageContext('cs')
+      )
+
+      const t = () => node.find('Render').text()
+      expect(t()).toEqual('1. křižovatka')
+    })
+
+    it('should offset value', function () {
+      const node = mount(
+        <SelectOrdinal value="1" offset="1" _1="This one" one="This one and #st" two="This one and #nd" few="This one and #rd" other="This one and #th" />,
+        languageContext('en')
+      )
+
+      const t = () => node.find('Render').text()
+      expect(t()).toEqual('This one')
+
+      node.setProps({ value: 2 })
+      expect(t()).toEqual('This one and 1st')
+
+      node.setProps({ value: 3 })
+      expect(t()).toEqual('This one and 2nd')
+
+      node.setProps({ value: 4 })
+      expect(t()).toEqual('This one and 3rd')
+
+      node.setProps({ value: 5 })
+      expect(t()).toEqual('This one and 4th')
+    })
   })
+
+  describe('Select', function () {
+    it('should render translation inside custom component', function () {
+      const html1 = mount(
+        <Select
+          render={<p className="lead"/>}
+          value="male" male="He" female="She" other="They" />,
+        languageContext('en')
+      ).find('Render').html()
+      const html2 = mount(
+        <Select
+          render={({ translation }) => <p className="lead">{translation}</p>}
+          value="male" male="He" female="She" other="They" />,
+        languageContext('en')
+      ).find('Render').html()
+
+      expect(html1).toEqual('<p class="lead">He</p>')
+      expect(html2).toEqual(html1)
+    })
+
+    it('should render Select correctly', function () {
+      const node = mount(
+        <Select value="male" male="He" female="She" other="They" />,
+        languageContext('en')
+      )
+
+      const t = () => node.find('Render').text()
+
+      expect(t()).toEqual('He')
+
+      node.setProps({ value: 'female' })
+      expect(t()).toEqual('She')
+
+      node.setProps({ value: 'nan' })
+      expect(t()).toEqual('They')
+    })
+  })
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100504

increased by1.63%

Lines of code

1877

increased by0.37%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of package files

39

decreased by-15.22%

Number of medium maintenance alerts

1

increased byInfinity%

Dependency changes

• Updatedlingui-formats@^1.0.0

• Updatedlingui-i18n@^1.0.0