Change API to Addon instead of mixin

Author: rxaviers

examples/modules/currency.js renamed to examples/components/currency.js

@@ -1,15 +1,6 @@
-var ReactGlobalize = require('../react-globalize');
+var FormatCurrency = require('../react-globalize').FormatCurrency;
 var React = require('react');
 
-var FormatCurrency = React.createClass({
-    mixins: [ReactGlobalize.formatCurrency],
-    render: function() {
-        return (
-            <span>{this.state.formattedValue}</span>
-        );
-    }
-});
-
 module.exports = React.createClass({
     getInitialState: function() {
         return {

examples/modules/dates.js renamed to examples/components/dates.js

@@ -1,15 +1,6 @@
-var ReactGlobalize = require('../react-globalize');
+var FormatDate = require('../react-globalize').FormatDate;
 var React = require('react');
 
-var FormatDate = React.createClass({
-    mixins: [ReactGlobalize.formatDate],
-    render: function() {
-        return (
-            <span>{this.state.formattedValue}</span>
-        );
-    }
-});
-
 module.exports = React.createClass({
     getInitialState: function() {
         return {

examples/modules/messages.js renamed to examples/components/messages.js

@@ -1,16 +1,7 @@
-var ReactGlobalize = require('../react-globalize');
+var FormatMessage = require('../react-globalize').FormatMessage;
 var React = require('react');
 var Globalize = require('globalize');
 
-var FormatMessage = React.createClass({
-    mixins: [ReactGlobalize.formatMessage],
-    render: function() {
-        return (
-            <span>{this.state.formattedValue}</span>
-        );
-    }
-});
-
 module.exports = React.createClass({
     getInitialState: function() {
         return {

examples/modules/numbers.js renamed to examples/components/numbers.js

@@ -1,15 +1,6 @@
-var ReactGlobalize = require('../react-globalize');
+var FormatNumber = require('../react-globalize').FormatNumber;
 var React = require('react');
 
-var FormatNumber = React.createClass({
-    mixins: [ReactGlobalize.formatNumber],
-    render: function() {
-        return (
-            <span>{this.state.formattedValue}</span>
-        );
-    }
-});
-
 module.exports = React.createClass({
     getInitialState: function() {
         return {

examples/index.js

@@ -1,9 +1,9 @@
 var React = require('react');
 var Globalize = require('globalize');
-var LocalizedCurrencies = require('./modules/currency');
-var LocalizedDates = require('./modules/dates');
-var LocalizedMessages = require('./modules/messages');
-var LocalizedNumbers = require('./modules/numbers');
+var LocalizedCurrencies = require('./components/currency');
+var LocalizedDates = require('./components/dates');
+var LocalizedMessages = require('./components/messages');
+var LocalizedNumbers = require('./components/numbers');
 
 var messages = {
     en: {

index.js

@@ -1,34 +1,38 @@
 var Globalize = require("globalize");
-var mixins = {};
+var React = require("react");
+var ReactGlobalize = {};
+
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
 
 Object.getOwnPropertyNames(Globalize).forEach(function(fn) {
     if (fn.indexOf("format") === 0) {
+        var Fn = capitalizeFirstLetter(fn);
         var fnString = Globalize[fn].toString();
         var argString = fnString.substr(fnString.indexOf("(")+1, fnString.indexOf(")")-(fnString.indexOf("(")+1)).trim();
         var argArray = argString.split(", ");
 
-        (function(currentFn, currentArgs) {
-            var formatter = function(nextProps) {
+        ReactGlobalize[Fn] = React.createClass({
+            displayName: Fn,
+            render: function() {
+                var formatted;
+                var componentProps = this.props;
                 var instance = Globalize;
-                var componentProps = nextProps || this.props;
-                var propArgs = currentArgs.map(function(element) {
-                        return componentProps[element.replace(/(\s\/\*|\*\/)/,"").trim()];
-                    });
+                var propArgs = argArray.map(function(element) {
+                    return componentProps[element.replace(/(\s\/\*|\*\/)/,"").trim()];
+                });
 
                 if (componentProps["locale"]) {
                   instance = Globalize(componentProps["locale"]);
                 }
-                this.setState({
-                    formattedValue: instance[currentFn].apply(instance, propArgs)
-                });
-            };
 
-            mixins[currentFn] = {
-                componentWillMount: formatter,
-                componentWillReceiveProps: formatter
-            };
-        })(fn, argArray);
+                formatted = instance[fn].apply(instance, propArgs);
+
+                return React.DOM.span(null, formatted);
+            }
+        });
     }
 });
 
-module.exports = mixins;
+module.exports = ReactGlobalize;