pass props down to <span> (for styling)

alunny · alunny · commit f89620e2b2f3 · 2015-09-17T15:48:17.000-07:00
diff --git a/examples/components/currency.js b/examples/components/currency.js
@@ -42,6 +42,9 @@ module.exports = React.createClass({
                 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" 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>
         );
     }
diff --git a/examples/components/dates.js b/examples/components/dates.js
@@ -30,6 +30,9 @@ module.exports = React.createClass({
                 time: "medium" - <FormatDate locale={this.state.locale} pattern={{ time: "medium" }}>{new Date()}</FormatDate>
                 <br/>
                 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>
         );
     }
diff --git a/examples/components/messages.js b/examples/components/messages.js
@@ -33,6 +33,14 @@ module.exports = React.createClass({
                 <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>
                 ["Wolfgang", "Amadeus", "Mozart"] - <FormatMessage locale={this.state.locale} path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />
                 <br/>
diff --git a/examples/components/numbers.js b/examples/components/numbers.js
@@ -33,6 +33,8 @@ module.exports = React.createClass({
                 <br/>
                 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>
         );
     }
diff --git a/examples/index.html b/examples/index.html
@@ -3,6 +3,17 @@
   <head>
     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
     <title>Examples</title>
+    <style>
+      .firstClass {
+        color: green;
+        font-weight: bold;
+      }
+
+      .secondClass {
+        color: slategray;
+        font-size: 20px;
+      }
+    </style>
   </head>
   <body>
     <h1>Currency</h1>
@@ -15,4 +26,4 @@ <h1>Numbers</h1>
     <div id="numbers"></div>
     <script src="app.js"></script>
   </body>
-</html>
+</html>
diff --git a/src/generator.js b/src/generator.js
@@ -33,7 +33,7 @@ function generator(fn, argArray, options) {
             }
 
             beforeFormat.call(this);
-            return React.DOM.span(null, afterFormat.call(this, this.format()));
+            return React.DOM.span(componentProps, afterFormat.call(this, this.format()));
         }
     }
 };

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,8 @@ module.exports = React.createClass({`
`33`	`33`	`<br/>`
`34`	`34`	`0.5, style: 'percent' - <FormatNumber locale={this.state.locale} options={{ style: 'percent' }}>{0.5}</FormatNumber>`
`35`	`35`	`<br/>`
	`36`	`+ 0.5, style: 'percent' with inline styles -`
	`37`	`+ <FormatNumber style={{fontWeight: 'bold', color: 'chocolate'}} locale={this.state.locale} options={{ style: 'percent' }}>{0.5}</FormatNumber>`
`36`	`38`	`</div>`
`37`	`39`	`);`
`38`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ function generator(fn, argArray, options) {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`beforeFormat.call(this);`
`36`		`- return React.DOM.span(null, afterFormat.call(this, this.format()));`
	`36`	`+ return React.DOM.span(componentProps, afterFormat.call(this, this.format()));`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`};`