Merge pull request #15 from relayrides/b/numbers-in-t-params

fix: convert numbers to strings in params before replace

CHANGELOG.md

@@ -88,4 +88,8 @@
 
 - Escapes any '$' characters passed to *t* function via params object to prevent unexpected behavior with string.replace(). Thanks to *gannoncurran* (https://github.com/APSL/redux-i18n/pull/14)
 
-## 1.0.11 (Not created yet)
+## 1.0.11 
+
+- Fix: make sure numbers passed to *t* function via params object are converted to strings so .replace() won't fail
+
+## 1.0.12 (Not created yet)

dist/component/component.js

@@ -48,7 +48,7 @@ var I18n = function (_React$Component) {
           var reg = new RegExp('\{' + k + '\}', 'g');
           // Escape possible '$' in params to prevent unexpected behavior with .replace()
           // especially important for IE11, which misinterprets '$0' as a regex command
-          var param = _params[k].replace(/\$/g, '$$$$');
+          var param = _params[k].toString().replace(/\$/g, '$$$$');
           text = text.replace(reg, param);
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-i18n",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "A simple and powerful package for translate your react applications.",
   "main": "./dist/index.js",
   "repository": {

src/component/component.js

@@ -20,7 +20,7 @@ class I18n extends React.Component {
         let reg = new RegExp('\{' + k + '\}', 'g')
         // Escape possible '$' in params to prevent unexpected behavior with .replace()
         // especially important for IE11, which misinterprets '$0' as a regex command
-        let param = params[k].replace(/\$/g, '$$$$')
+        let param = params[k].toString().replace(/\$/g, '$$$$')
         text = text.replace(reg, param)
       }
     }

test/component.spec.js

@@ -12,6 +12,7 @@ import {setLanguage} from '../dist/actions'
 import TransWithoutParams from './components/TransWithoutParams'
 import TransWithParams from './components/TransWithParams'
 import TransWithDollarSignParams from './components/TransWithDollarSignParams'
+import TransWithNumberParams from './components/TransWithNumberParams'
 import Dates from './components/Dates'
 
 const translations = {
@@ -54,6 +55,14 @@ describe('component test', function() {
       </Provider>
     ))
 
+    this.withNumberParamsNode = ReactDOM.findDOMNode(TestUtils.renderIntoDocument(
+      <Provider store={this.store}>
+        <I18n translations={translations}>
+          <TransWithNumberParams/>
+        </I18n>
+      </Provider>
+    ))
+
     this.dates = ReactDOM.findDOMNode(TestUtils.renderIntoDocument(
       <Provider store={this.store}>
         <I18n translations={translations}>
@@ -87,6 +96,10 @@ describe('component test', function() {
     expect(this.withDollarSignParamsNode.textContent).toEqual('We should have two dollar signs $$!')
   })
 
+  it('text with number params', function() {
+    expect(this.withNumberParamsNode.textContent).toEqual('13 things!')
+  })
+
   it('changing language in text with params', function() {
     this.store.dispatch(setLanguage('es'))
     expect(this.withParamsNode.textContent).toEqual('Hola Francesc!')

test/components/TransWithNumberParams.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+class TransWithNumberParams extends React.Component {
+  render() {
+    return (
+      <div>{this.context.t("{number} things!", {number: 13})}</div>
+    )
+  }
+}
+
+TransWithNumberParams.contextTypes = {
+  t: React.PropTypes.func.isRequired
+}
+
+export default TransWithNumberParams