react-globalize - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

examples/components/currency.js

@@ -26,21 +26,24 @@ var FormatCurrency = require('../react-globalize').FormatCurrency;
                 <br/>
-                USD, 150, locale default - <FormatCurrency locale={this.state.locale} currency="USD" value={150} />
+                USD, 150, locale default - <FormatCurrency locale={this.state.locale} currency="USD">{150}</FormatCurrency>
                 <br/>
-                USD, -150, style: "accounting" - <FormatCurrency locale={this.state.locale} currency="USD" value={-150} options={{ style: "accounting" }} />
+                USD, -150, style: "accounting" - <FormatCurrency locale={this.state.locale} currency="USD" options={{ style: "accounting" }}>{-150}</FormatCurrency>
                 <br/>
-                USD, 150, style: "name" - <FormatCurrency locale={this.state.locale} currency="USD" value={150} options={{ style: "name" }} />
+                USD, 150, style: "name" - <FormatCurrency locale={this.state.locale} currency="USD" options={{ style: "name" }}>{150}</FormatCurrency>
                 <br/>
-                USD, 150, style: "code" - <FormatCurrency locale={this.state.locale} currency="USD" value={150} options={{ style: "code" }} />
+                USD, 150, style: "code" - <FormatCurrency locale={this.state.locale} currency="USD" options={{ style: "code" }}>{150}</FormatCurrency>
                 <br/>
-                USD, 1.491, round: "ceil" - <FormatCurrency locale={this.state.locale} currency="USD" value={1.491} options={{ round: "ceil" }} />
+                USD, 1.491, round: "ceil" - <FormatCurrency locale={this.state.locale} currency="USD" options={{ round: "ceil" }}>{1.491}</FormatCurrency>
                 <br/>
-                EUR, 150, locale default - <FormatCurrency locale={this.state.locale} currency="EUR" value={150} />
+                EUR, 150, locale default - <FormatCurrency locale={this.state.locale} currency="EUR">{150}</FormatCurrency>
                 <br/>
-                EUR, -150, style: "accounting" - <FormatCurrency locale={this.state.locale} currency="EUR" value={-150} options={{ style: "accounting" }} />
+                EUR, -150, style: "accounting" - <FormatCurrency locale={this.state.locale} currency="EUR" options={{ style: "accounting" }}>{-150}</FormatCurrency>
                 <br/>
-                EUR, 150, style: "name" - <FormatCurrency locale={this.state.locale} currency="EUR" value={150} options={{ style: "name" }} />
+                EUR, 150, style: "name" - <FormatCurrency locale={this.state.locale} currency="EUR" options={{ style: "name" }}>{150}</FormatCurrency>
                 <br/>
-                EUR, 150, style: "code" - <FormatCurrency locale={this.state.locale} currency="EUR" value={150} options={{ style: "code" }} />
+                EUR, 150, style: "code" - <FormatCurrency locale={this.state.locale} currency="EUR" options={{ style: "code" }}>{150}</FormatCurrency>
                 <br/>
-                EUR, 1.491, round: "ceil" - <FormatCurrency locale={this.state.locale} currency="EUR" value={1.491} options={{ round: "ceil" }} />
+                EUR, 1.491, round: "ceil" - <FormatCurrency locale={this.state.locale} currency="EUR" options={{ round: "ceil" }}>{1.491}</FormatCurrency>
+                <br/>
+                EUR, 150, style: "code", with CSS class -
+                <FormatCurrency className='firstClass' locale={this.state.locale} currency="EUR" options={{ style: "code" }}>{150}</FormatCurrency>
             </div>
@@ -47,0 +50,0 @@ );

examples/components/dates.js

@@ -26,9 +26,12 @@ var FormatDate = require('../react-globalize').FormatDate;
                 <br/>
-                "GyMMMd" - <FormatDate locale={this.state.locale} value={new Date()} pattern="GyMMMd" />
+                "GyMMMd" - <FormatDate locale={this.state.locale} pattern="GyMMMd">{new Date()}</FormatDate>
                 <br/>
-                date: "medium" - <FormatDate locale={this.state.locale} value={new Date()} pattern={{ date: "medium" }} />
+                date: "medium" - <FormatDate locale={this.state.locale} pattern={{ date: "medium" }}>{new Date()}</FormatDate>
                 <br/>
-                time: "medium" - <FormatDate locale={this.state.locale} value={new Date()} pattern={{ time: "medium" }} />
+                time: "medium" - <FormatDate locale={this.state.locale} pattern={{ time: "medium" }}>{new Date()}</FormatDate>
                 <br/>
-                datetime: "medium" - <FormatDate locale={this.state.locale} value={new Date()} pattern={{ datetime: 'medium' }} />
+                datetime: "medium" - <FormatDate locale={this.state.locale} pattern={{ datetime: 'medium' }}>{new Date()}</FormatDate>
+                <br/>
+                datetime: "medium" with CSS class -
+                <FormatDate className='secondClass' locale={this.state.locale} pattern={{ datetime: 'medium' }}>{new Date()}</FormatDate>
             </div>
@@ -35,0 +38,0 @@ );

examples/components/messages.js

@@ -30,2 +30,16 @@ var FormatMessage = require('../react-globalize').FormatMessage;
                 bye - <FormatMessage locale={this.state.locale} path="salutations/bye" />
+                <h3>Simple default message</h3>
+                <FormatMessage locale={this.state.locale}>Hi</FormatMessage>
+                <br/>
+                <FormatMessage locale={this.state.locale}>Bye</FormatMessage>
+                <br/>
+                <FormatMessage locale={this.state.locale}>Hi/Bye</FormatMessage>
+                <h3>Default messages with style</h3>
+                <FormatMessage style={{color: 'red'}} locale={this.state.locale}>
+                  Hi
+                </FormatMessage>
+                <br/>
+                <FormatMessage style={{color: 'blue'}} locale={this.state.locale}>
+                  Bye
+                </FormatMessage>
                 <h3>Variable Replacement</h3>
@@ -32,0 +46,0 @@ ["Wolfgang", "Amadeus", "Mozart"] - <FormatMessage locale={this.state.locale} path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />

examples/components/numbers.js

@@ -26,11 +26,14 @@ var FormatNumber = require('../react-globalize').FormatNumber;
                 <br/>
-                pi, no options - <FormatNumber locale={this.state.locale} value={Math.PI} />
+                pi, no options - <FormatNumber locale={this.state.locale}>{Math.PI}</FormatNumber>
                 <br/>
-                pi, maximumFractionDigits: 5 - <FormatNumber locale={this.state.locale} value={Math.PI} options={{ maximumFractionDigits: 5 }} />
+                pi, maximumFractionDigits: 5 - <FormatNumber locale={this.state.locale} options={{ maximumFractionDigits: 5 }}>{Math.PI}</FormatNumber>
                 <br/>
-                pi, round: 'floor' - <FormatNumber locale={this.state.locale} value={Math.PI} options={{ round: 'floor' }} />
+                pi, round: 'floor' - <FormatNumber locale={this.state.locale} options={{ round: 'floor' }}>{Math.PI}</FormatNumber>
                 <br/>
-                10000, minimumFractionDigits: 2 - <FormatNumber locale={this.state.locale} value={10000} options={{ minimumFractionDigits: 2 }} />
+                10000, minimumFractionDigits: 2 - <FormatNumber locale={this.state.locale} options={{ minimumFractionDigits: 2 }}>{10000}</FormatNumber>
                 <br/>
-                0.5, style: 'percent' - <FormatNumber locale={this.state.locale} value={0.5} options={{ style: 'percent' }} />
+                0.5, style: 'percent' - <FormatNumber locale={this.state.locale} options={{ style: 'percent' }}>{0.5}</FormatNumber>
+                <br/>
+                0.5, style: 'percent' with inline styles -
+                <FormatNumber style={{fontWeight: 'bold', color: 'chocolate'}} locale={this.state.locale} options={{ style: 'percent' }}>{0.5}</FormatNumber>
             </div>
@@ -37,0 +40,0 @@ );

examples/index.js

@@ -42,2 +42,6 @@ var React = require('react');
     "pt-BR": {
+        // default message examples
+        "Hi": "Oi",
+        "Bye": "Tchau",
+        "Hi|Bye": "Oi/Tchau",
         salutations: {
@@ -44,0 +48,0 @@ hi: "Oi",

examples/package.json

@@ -16,4 +16,4 @@
   "scripts": {
-    "build": "cp -f ../index.js react-globalize.js && browserify --debug --transform reactify index.js > app.js"
+    "build": "mkdir -p react-globalize && cp ../dist/*.js react-globalize/ && browserify --debug --transform reactify index.js > app.js"
   }
 }

examples/README.md

@@ -8,4 +8,5 @@ Example
 
-1. Run `npm install`
-2. Run `npm run-script build` to generate the built JS file
-3. Open browser and navigate to `react-globalize/examples/index.html`
+1. Build react-globalize (`cd .. && grunt`)
+2. Run `npm install` in this directory
+3. Run `npm run-script build` to generate the built JS file
+4. Open browser and navigate to `react-globalize/examples/index.html`

package.json

 {
   "name": "react-globalize",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Bringing the i18n functionality of Globalize, backed by CLDR, to React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -90,4 +90,2 @@ # react-globalize
 
-- **value** - required
- - The date object to be formatted
 - **options**
@@ -218,4 +216,2 @@ - An optional set of options which defines how to format the date. See the [dateFormatter][] docs in Globalize for more info on supported patterns
 
-- **value** - required
- - The number to be formatted
 - **options**
@@ -222,0 +218,0 @@ - An optional set of options to further format the value. See the [numberFormatter][] docs in Globalize for more info on specific options

src/generator.js

@@ -36,3 +36,3 @@ import React from "react";
             beforeFormat.call(this);
-            return React.DOM.span(null, afterFormat.call(this, this.format()));
+            return React.DOM.span(componentProps, afterFormat.call(this, this.format()));
         }
@@ -39,0 +39,0 @@ }

src/message.js

@@ -11,2 +11,3 @@ import Globalize from "globalize";
     var scope = componentProps.scope;
+    var pathProperty = componentProps.path;
 
@@ -50,5 +51,6 @@ function extractFromFnComments(fn) {
 
-    // Set path.
-    if (args[0]) {
-        path = args[0].split("/");
+    // Set path - path as props supercedes default value
+    if (pathProperty) {
+        args[0] = pathProperty;
+        path = pathProperty.split("/");
     } else {
@@ -163,8 +165,20 @@ defaultMessage = getDefaultMessage(children);
     var sanitizedPath = sanitizePath(pathOrMessage);
-    if (this.cldr && this.cldr.get(["globalize-messages/{bundle}", sanitizedPath]) === undefined) {
-        aux[this.cldr.attributes.bundle] = {};
-        aux[this.cldr.attributes.bundle][sanitizedPath] = pathOrMessage;
-        Globalize.loadMessages(aux);
+
+    /*
+     * want to distinguish between default value and path value - just checking
+     * for sanitizedPath won't be enough, because sanitizedPath !== pathOrMessage
+     * for strings like "salutations/hi"
+     */
+    var sanitizedPathExists = this.cldr &&
+      this.cldr.get(["globalize-messages/{bundle}", sanitizedPath]) !== undefined;
+    var pathExists = this.cldr &&
+      this.cldr.get(["globalize-messages/{bundle}", pathOrMessage]) !== undefined;
+
+    if (!sanitizedPathExists && !pathExists) {
+      aux[this.cldr.attributes.bundle] = {};
+      aux[this.cldr.attributes.bundle][sanitizedPath] = pathOrMessage;
+      Globalize.loadMessages(aux);
     }
-    arguments[0] = sanitizedPath;
+
+    arguments[0] = sanitizedPathExists ? sanitizedPath : pathOrMessage;
     return messageFormatterSuper.apply(this, arguments);
@@ -171,0 +185,0 @@ };

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

Worsened metrics

Total package byte prevSize

2828997

decreased by-0.52%

Number of package files

35

decreased by-25.53%

Lines of code

79677

decreased by-0.45%

Number of lines in readme file

245

decreased by-1.61%

No dependency changes