[added] localizers of different types

build/browser.config.js

@@ -9,17 +9,23 @@ module.exports = makeConfig({
 
   minimize: false,
 
-  entry: './lib/index.js',
+  entry: {
+    'react-widgets': './lib/index.js',
+    'react-widgets-globalize': './lib/localizers/globalize.js',
+    'react-widgets-moment': './lib/localizers/moment.js',
+    'react-widgets-simple-number': './lib/localizers/simple-number.js'
+  },
 
   output: {
     path: path.join(__dirname, '../dist'),
-    filename: 'react-widgets.js',
+    filename: '[name].js',
     library:  'ReactWidgets',
     libraryTarget: 'umd'
   },
 
   externals: {
-    globalize: 'Globalize',
+    '../configure': 'ReactWidgets',
+
     'react-dom': {
       root: 'ReactDOM',
       commonjs: 'react-dom',

build/dev.config.js

@@ -11,6 +11,16 @@ module.exports = makeConfig({
 
   entry:  path.join(__dirname, '../dev/dev.jsx'),
 
+  loaders: [
+    {
+      test: /globalize/,
+      loader: 'imports?define=>false'
+    },
+    {
+      test: /cldr-data.+\.js$/,
+      loader: 'imports?define=>false'
+    }
+  ],
   output: {
     filename: 'bundle.js',
     path: __dirname,

build/localizers.config.js

@@ -0,0 +1,25 @@
+var path = require('path')
+  , makeConfig = require('./make-config');
+
+module.exports = makeConfig({
+  noCompile: true,
+  banner: true,
+  minimize: false,
+  production: true,
+
+  entry: {
+    'react-widgets-globalize': './lib/localizers/globalize.js',
+    'react-widgets-moment': './lib/localizers/moment.js',
+    'react-widgets-simple-number': './lib/localizers/simple-number.js'
+  },
+
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: '[name].js'
+  },
+
+  externals: {
+    '../configure': 'window.ReactWidgets',
+    react: 'window.React'
+  }
+})

build/make-config.js

@@ -8,6 +8,7 @@ module.exports = function makeConfig(options){
     , plugins = options.plugins || []
 
   var loaders = [
+    { test: /\.json$/, loader: 'json-loader' },
     { test: /\.css$/,  loader: options.extractStyles
         ? ExtractTextPlugin.extract('style-loader', 'css-loader')
         : 'style-loader!css-loader' },

dev/dev.jsx

@@ -1,77 +1,40 @@
 'use strict';
 require('../src/less/react-widgets.less')
 
-//require('react-a11y')();
-var configure = require('../src/configure')
-var localizers = require('../src/globalize-localizers')
-
-configure.setLocalizers(localizers(window.Globalize))
-
-//configure.setGlobalizeInstance(window.Globalize);
+var Globalize = require('globalize')
+var localizers = require('../src/localizers/globalize')
+var numberLocalizer = require('../src/localizers/simple-number')
+
+Globalize.load(
+	require('cldr-data/main/en-GB/ca-gregorian.json'),
+	require('cldr-data/main/en-GB/currencies.json'),
+	require('cldr-data/main/en-GB/dateFields.json'),
+	require('cldr-data/main/en-GB/numbers.json'),
+  require('cldr-data/supplemental/numberingSystems.json'),
+	require('cldr-data/supplemental/currencyData.json'),
+	require('cldr-data/supplemental/likelySubtags.json'),
+	require('cldr-data/supplemental/timeData.json'),
+	require('cldr-data/supplemental/weekData.json')
+);
+Globalize.locale('en-GB')
+
+localizers(Globalize)
+numberLocalizer()
 
 var React = require('react/addons')
-//var jquery = require('jquery')
 var index = require('../src')
 var dates = require('../src/util/dates')
 var DropdownList = require('../src/DropdownList.jsx')
 var Multiselect = require('../src/Multiselect.jsx')
 var Calendar = require('../src/Calendar.jsx')
-// var DatePicker = require('../src/DateTimePicker.jsx')
-// var NumberPicker = require('../src/NumberPicker.jsx')
+var DateTimePicker = require('../src/DateTimePicker.jsx')
+var NumberPicker = require('../src/NumberPicker.jsx')
 // var ComboBox = require('../src/Combobox.jsx')
 // var SelectList = require('../src/SelectList.jsx')
 // var List = require('../src/List.jsx')
 
 var chance = new (require('chance'))
 
-// var moment = require('moment')
-
-// var endOfDecade = date => moment(date).add(10, 'year').add(-1, 'millisecond').toDate()
-// var endOfCentury = date => moment(date).add(100, 'year').add(-1, 'millisecond').toDate()
-
-// configure.setDateLocalizer({
-//   formats: {
-//     date: 'L',
-//     time: 'LT',
-//     default: 'lll',
-//     header: 'MMMM YYYY',
-//     footer: 'LL',
-//     weekday: (day, culture, localizer) => moment().locale(culture).weekday(day).format('dd'),
-
-//     dayOfMonth: 'DD',
-//     month: 'MMM',
-//     year: 'YYYY',
-
-//     decade: (date, culture, localizer) => {
-//       return localizer.format(date, 'YYYY', culture)
-//         + ' - ' + localizer.format(endOfDecade(date), 'YYYY', culture)
-//     },
-
-//     century: (date, culture, localizer) => {
-//       return localizer.format(date, 'YYYY', culture)
-//         + ' - ' + localizer.format(endOfCentury(date), 'YYYY', culture)
-//     }
-//   },
-
-//   firstOfWeek(culture){
-//     return moment.localeData(culture).firstDayOfWeek()
-//   },
-
-//   parse(value, format, culture){
-//     return moment(value, format).locale(culture).toDate()
-//   },
-
-//   format(value, format, culture){
-//     return moment(value).locale(culture).format(format)
-//   }
-// })
-
-
-// configure.setAnimate((element, props, duration, ease, callback) => {
-//   return jquery(element).animate(props, duration, callback)
-// })
-
-
 var App = React.createClass({
 
   getInitialState: function(){
@@ -140,11 +103,12 @@ var App = React.createClass({
             >
               add
             </button>
-
+            <DateTimePicker/>
             <Calendar
               value={this.state.calDate}
               onChange={calDate => this.setState({ calDate })}
             />
+            <NumberPicker />
           </section>
         </div>
       </div>