react-i18nify - npm Package Compare versions

Comparing version 2.0.0-0 to 2.0.0-1

build/lib/I18n.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _parse = require('date-fns/parse');
@@ -76,6 +80,2 @@
   },
-  loadTranslations: function loadTranslations(translations) {
-    console.error('I18n.loadTranslations is deprecated, please use I18n.setTranslations instead');
-    this.setTranslations(translations);
-  },
   setTranslationsGetter: function setTranslationsGetter(fn) {
@@ -117,2 +117,5 @@ if (typeof fn !== 'function') {
     }
+    if (_react2.default.isValidElement(translation)) {
+      return translation;
+    }
     if ((typeof translation === 'undefined' ? 'undefined' : _typeof(translation)) === 'object') {
@@ -119,0 +122,0 @@ var _result = {};

build/lib/Localize.js

@@ -48,23 +48,13 @@ 'use strict';
       var _props = this.props,
-          Tag = _props.tag,
           value = _props.value,
           dateFormat = _props.dateFormat,
+          parseFormat = _props.parseFormat,
           _props$options = _props.options,
-          options = _props$options === undefined ? {} : _props$options,
-          dangerousHTML = _props.dangerousHTML,
-          style = _props.style,
-          className = _props.className;
+          options = _props$options === undefined ? {} : _props$options;
 
-      var localization = _I18n2.default._localize(value, _extends({}, options, { dateFormat: dateFormat }));
+      var localization = _I18n2.default._localize(value, _extends({}, options, { dateFormat: dateFormat, parseFormat: parseFormat }));
 
-      if (dangerousHTML) {
-        return _react2.default.createElement(Tag, {
-          style: style,
-          className: className,
-          dangerouslySetInnerHTML: { __html: localization }
-        });
-      }
       return _react2.default.createElement(
-        Tag,
-        { style: style, className: className },
+        _react2.default.Fragment,
+        null,
         localization
@@ -79,13 +69,7 @@ );
 Localize.propTypes = {
-  tag: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]),
   value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.object]).isRequired,
   options: _propTypes2.default.object,
   dateFormat: _propTypes2.default.string,
-  dangerousHTML: _propTypes2.default.bool,
-  className: _propTypes2.default.string,
-  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]))
+  parseFormat: _propTypes2.default.string
 };
-Localize.defaultProps = {
-  tag: 'span'
-};
 exports.default = Localize;

build/lib/Translate.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -30,2 +28,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -47,30 +47,13 @@
   _createClass(Translate, [{
-    key: 'otherProps',
-    value: function otherProps() {
-      var result = _extends({}, this.props);
-      delete result.value;
-      return result;
-    }
-  }, {
     key: 'render',
     value: function render() {
       var _props = this.props,
-          Tag = _props.tag,
           value = _props.value,
-          dangerousHTML = _props.dangerousHTML,
-          style = _props.style,
-          className = _props.className;
+          otherProps = _objectWithoutProperties(_props, ['value']);
 
-      var translation = _I18n2.default._translate(value, this.otherProps());
+      var translation = _I18n2.default._translate(value, otherProps);
 
-      if (dangerousHTML) {
-        return _react2.default.createElement(Tag, {
-          style: style,
-          className: className,
-          dangerouslySetInnerHTML: { __html: translation }
-        });
-      }
       return _react2.default.createElement(
-        Tag,
-        { style: style, className: className },
+        _react2.default.Fragment,
+        null,
         translation
@@ -85,11 +68,4 @@ );
 Translate.propTypes = {
-  tag: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]),
-  value: _propTypes2.default.string.isRequired,
-  dangerousHTML: _propTypes2.default.bool,
-  className: _propTypes2.default.string,
-  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]))
+  value: _propTypes2.default.string.isRequired
 };
-Translate.defaultProps = {
-  tag: 'span'
-};
 exports.default = Translate;

example/example.js

@@ -26,3 +26,3 @@ const React = require('react');
     export_1: 'Export %{count} item',
-    two_lines: 'Line 1< sbr />Line 2',
+    two_lines: <div>Line 1<br />Line 2</div>,
   },
@@ -40,3 +40,3 @@ nl: {
     export_1: 'Exporteer %{count} ding',
-    two_lines: 'Regel 1<br />Regel 2',
+    two_lines: <div>Line 1<br />Line 2</div>,
   },
@@ -66,28 +66,21 @@ });
   return (
-    <div>
-      <Translate value="application.title" />
-      <br />
-      <Translate value="application.title" style={{ fontWeight: 'bold', fontSize: '14px' }} />
-      <br />
-      <Translate value="application.hello" name="Aad" />
-      <br />
-      <Translate value="export" count={1} />
-      <br />
-      <Translate value="export" count={2} />
-      <br />
-      <Translate value="application.title" tag="h1" />
-      <br />
-      <Translate value="two_lines" dangerousHTML />
-      <br />
-      <Localize value="2015-09-03" dateFormat="date.long" />
-      <br />
-      <Localize value="2015-09-03" dateFormat="date.long" tag="div" />
-      <br />
-      <Localize
-        value={10 / 3}
-        options={{
-          style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2,
-        }}
-      />
-    </div>
+    <React.Fragment>
+      <h1><Translate value="application.title" /></h1>
+      <div><Translate value="application.hello" name="Aad" /></div>
+      <ul>
+        <li><Translate value="export" count={1} /></li>
+        <li><Translate value="export" count={2} /></li>
+      </ul>
+      <Translate value="two_lines" />
+      <p><Localize value="07-2016-04" dateFormat="date.long" parseFormat="DD-YYYY-MM" /></p>
+      <p><Localize value="2015-09-03" dateFormat="date.long" /></p>
+      <p>
+        <Localize
+          value={10 / 3}
+          options={{
+            style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2,
+          }}
+        />
+      </p>
+    </React.Fragment>
   );
@@ -94,0 +87,0 @@ }

package.json

 {
   "name": "react-i18nify",
-  "version": "2.0.0-0",
+  "version": "2.0.0-1",
   "description": "Simple i18n translation and localization components and helpers for React applications.",
@@ -10,3 +10,2 @@ "main": "./build/index.js",
     "lint": "eslint src/**/*.jsx src/**/*.js __tests__/**/*.js",
-    "lint:watch": "npm run lint -- --watch",
     "lint:fix": "npm run lint -- --fix",
@@ -56,4 +55,2 @@ "clean": "rimraf build",
     "babel-eslint": "8.2.3",
-    "babel-jest": "22.4.3",
-    "babel-polyfill": "6.26.0",
     "babel-preset-env": "^1.6.1",
@@ -69,11 +66,8 @@ "babel-preset-react": "^6.24.1",
     "eslint-plugin-react": "7.7.0",
-    "eslint-watch": "3.1.4",
     "husky": "^0.14.3",
     "jest": "22.4.3",
     "react": "^16.3.2",
-    "react-addons-test-utils": "15.6.2",
     "react-dom": "16.3.2",
-    "react-test-renderer": "16.3.2",
     "rimraf": "2.6.2"
   }
 }

README.md

@@ -45,3 +45,3 @@ # react-i18nify
     export_1: 'Export %{count} item',
-    two_lines: 'Line 1<br />Line 2'
+    two_lines: <div>Line 1<br />Line 2<div>
   },
@@ -59,3 +59,3 @@ nl: {
     export_1: 'Exporteer %{count} ding',
-    two_lines: 'Regel 1<br />Regel 2'
+    two_lines: <div>Regel 1<br />Regel 2</div>
   }
@@ -77,22 +77,18 @@ });
 <Translate value="application.title" />
-  // => <span>Toffe app met i18n!</span>
-<Translate value="application.title" style={{ fontWeight: 'bold', fontSize: '14px' }} />
-  // => <span style="font-weight:bold;font-size:14px;">Toffe app met i18n!</span>
+  // => Toffe app met i18n!
 <Translate value="application.hello" name="Aad" />
-  // => <span>Hallo, Aad!</span>
+  // => Hallo, Aad!
 <Translate value="export" count={1} />
-  // => <span>Exporteer 1 ding</span>
+  // => Exporteer 1 ding
 <Translate value="export" count={2} />
-  // => <span>Exporteer 2 dingen</span>
-<Translate value="two_lines" dangerousHTML />
-  // => <span>Regel 1<br />Regel 2</span>
-<Translate value="application.title" tag="h1" />
- // => <h1>Toffe app met i18n!</h1>
+  // => Exporteer 2 dingen
+<Translate value="two_lines" />
+  // => <div>Regel 1<br />Regel 2</div>
 
+<Localize value="07-2016-04" dateFormat="date.long" parseFormat="DD-YYYY-MM" />
+  // => 7 april 2016
 <Localize value="2015-09-03" dateFormat="date.long" />
-  // => <span>3 september 2015</span>
-<Localize value="2015-09-03" dateFormat="date.long" tag="div" />
-  // => <div>3 september 2015</div>
+  // => 3 september 2015
 <Localize value={10/3} options={{style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2}} />
-  // => <span>€ 3,33</span>
+  // => € 3,33
 ```
@@ -193,6 +189,6 @@
 
-For localizing dates, the `moment` library is used.
+For localizing dates, the `date-fns` library is used.
 A `dateFormat` option can be used for providing a translation key with the format string.
-For the full list of formatting tokens which can be used in the format string, see http://momentjs.com/docs/#/displaying/format/.
-Moreover, a `strictParse` option can be provided. When set to `true`, `moment`'s strict parsing will be used.
+Moreover, `parseFormat` option can be used for providing a formatting string for parsing the value.
+For the full list of formatting tokens which can be used in the format string, see the [date-fns documentation](https://date-fns.org/v2.0.0-alpha.7/docs/format).
 
@@ -214,18 +210,2 @@ For number formatting, the localize helper supports all options as provided by the Javascript built-in `Intl.NumberFormat` object.
 
-#### `dangerousHTML` (bool)
-
-If `true`, HTML is allowed in the translation. Defaults to `false`.
-
-#### `className` (string)
-
-Optional CSS classname.
-
-#### `tag` (string|func)
-
-HTML element to render the translation in. Defaults to `span`.
-
-#### `style` (object)
-
-Optional inline styling
-
 #### Other props
@@ -246,27 +226,14 @@
 The translation key for providing the format string. Only needed for localizing dates.
-For the full list of formatting tokens which can be used in the format string, see http://momentjs.com/docs/#/displaying/format/.
+For the full list of formatting tokens which can be used in the format string, see the [date-fns documentation](https://date-fns.org/v2.0.0-alpha.7/docs/format).
 
+#### `parseFormat` (string)
+
+An optional formatting string for parsing the value when localizing dates.
+For the full list of formatting tokens which can be used in the parsing string, see the [date-fns documentation](https://date-fns.org/v2.0.0-alpha.7/docs/parse).
+
 #### `options` (object)
 
-When localizing dates, a `strictParse` option can be provided. When set to `true`, `moment`'s strict parsing will be used.
-
 When localizing numbers, the localize component supports all options as provided by the Javascript built-in `Intl.NumberFormat` object.
 For the full list of options, see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.
 
-#### `dangerousHTML` (bool)
-
-If `true`, HTML is allowed in the localization. Defaults to `false`.
-
-#### `className` (string)
-
-Optional CSS classname.
-
-#### `tag` (string|func)
-
-HTML element to render the localization in. Defaults to `span`.
-
-#### `style` (object)
-
-Optional inline styling
-
 [version-image]: https://img.shields.io/npm/v/react-i18nify.svg
@@ -273,0 +240,0 @@ [downloads-image]: https://img.shields.io/npm/dm/react-i18nify.svg

src/lib/I18n.js

@@ -5,2 +5,3 @@ /* eslint global-require: "off" */
 import IntlPolyfill from 'intl';
+import React from 'react';
 import parse from 'date-fns/parse';
@@ -50,7 +51,2 @@ import format from 'date-fns/format';
 
-  loadTranslations(translations) {
-    console.error('I18n.loadTranslations is deprecated, please use I18n.setTranslations instead');
-    this.setTranslations(translations);
-  },
-
   setTranslationsGetter(fn) {
@@ -92,2 +88,5 @@ if (typeof fn !== 'function') {
     }
+    if (React.isValidElement(translation)) {
+      return translation;
+    }
     if (typeof translation === 'object') {
@@ -94,0 +93,0 @@ const result = {};

src/lib/Localize.jsx

@@ -8,6 +8,2 @@ import React from 'react';
   static propTypes = {
-    tag: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.string,
-    ]),
     value: PropTypes.oneOfType([
@@ -19,31 +15,13 @@ PropTypes.string,
     dateFormat: PropTypes.string,
-    dangerousHTML: PropTypes.bool,
-    className: PropTypes.string,
-    style: PropTypes.objectOf(PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ])),
+    parseFormat: PropTypes.string,
   };
 
-  static defaultProps = {
-    tag: 'span',
-  };
-
   render() {
     const {
-      tag: Tag, value, dateFormat, options = {}, dangerousHTML, style, className,
+      value, dateFormat, parseFormat, options = {},
     } = this.props;
-    const localization = I18n._localize(value, { ...options, dateFormat });
+    const localization = I18n._localize(value, { ...options, dateFormat, parseFormat });
 
-    if (dangerousHTML) {
-      return (
-        <Tag
-          style={style}
-          className={className}
-          dangerouslySetInnerHTML={{ __html: localization }}
-        />
-      );
-    }
-    return <Tag style={style} className={className}>{localization}</Tag>;
+    return <React.Fragment>{localization}</React.Fragment>;
   }
 }

src/lib/Translate.jsx

@@ -8,42 +8,11 @@ import React from 'react';
   static propTypes = {
-    tag: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.string,
-    ]),
     value: PropTypes.string.isRequired,
-    dangerousHTML: PropTypes.bool,
-    className: PropTypes.string,
-    style: PropTypes.objectOf(PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ])),
   };
 
-  static defaultProps = {
-    tag: 'span',
-  };
-
-  otherProps() {
-    const result = { ...this.props };
-    delete result.value;
-    return result;
-  }
-
   render() {
-    const {
-      tag: Tag, value, dangerousHTML, style, className,
-    } = this.props;
-    const translation = I18n._translate(value, this.otherProps());
+    const { value, ...otherProps } = this.props;
+    const translation = I18n._translate(value, otherProps);
 
-    if (dangerousHTML) {
-      return (
-        <Tag
-          style={style}
-          className={className}
-          dangerouslySetInnerHTML={{ __html: translation }}
-        />
-      );
-    }
-    return <Tag style={style} className={className}>{translation}</Tag>;
+    return <React.Fragment>{translation}</React.Fragment>;
   }
 }

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

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

Improved metrics

Dev dependency count

18

decreased by-21.74%

Worsened metrics

Total package byte prevSize

34785

decreased by-9.87%

Lines of code

597

decreased by-13.85%

Number of lines in readme file

237

decreased by-12.22%

No dependency changes