Merge pull request arqex#276 from arqex/master

Update react-onclickoutside dependency and create the CalendarContainer

Author: arqex

DateTime.js

@@ -3,23 +3,11 @@
 var assign = require('object-assign'),
 	moment = require('moment'),
 	React = require('react'),
-	DaysView = require('./src/DaysView'),
-	MonthsView = require('./src/MonthsView'),
-	YearsView = require('./src/YearsView'),
-	TimeView = require('./src/TimeView')
+	CalendarContainer = require('./src/CalendarContainer')
 ;
 
 var TYPES = React.PropTypes;
 var Datetime = React.createClass({
-	mixins: [
-		require('./src/onClickOutside')
-	],
-	viewComponents: {
-		days: DaysView,
-		months: MonthsView,
-		years: YearsView,
-		time: TimeView
-	},
 	propTypes: {
 		// value: TYPES.object | TYPES.string,
 		// defaultValue: TYPES.object | TYPES.string,
@@ -411,8 +399,7 @@ var Datetime = React.createClass({
 	},
 
 	render: function() {
-		var Component = this.viewComponents[ this.state.currentView ],
-			DOM = React.DOM,
+		var DOM = React.DOM,
 			className = 'rdt' + (this.props.className ?
                   ( Array.isArray( this.props.className ) ?
                   ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
@@ -439,7 +426,7 @@ var Datetime = React.createClass({
 		return DOM.div({className: className}, children.concat(
 			DOM.div(
 				{ key: 'dt', className: 'rdtPicker' },
-				React.createElement( Component, this.getComponentProps())
+				React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
 			)
 		));
 	}

package.json

@@ -77,7 +77,7 @@
   },
   "dependencies": {
     "object-assign": "^3.0.0",
-    "react-onclickoutside": "^4.1.0"
+    "react-onclickoutside": "^5.9.0"
   },
   "pre-commit": [
     "lint",

src/CalendarContainer.js

@@ -0,0 +1,26 @@
+var React = require('react'),
+  DaysView = require('./DaysView'),
+  MonthsView = require('./MonthsView'),
+  YearsView = require('./YearsView'),
+  TimeView = require('./TimeView'),
+  onClickOutside = require('react-onclickoutside')
+;
+
+var CalendarContainer = onClickOutside( React.createClass({
+	viewComponents: {
+		days: DaysView,
+		months: MonthsView,
+		years: YearsView,
+		time: TimeView
+	},
+
+  render: function() {
+    return React.createElement( this.viewComponents[ this.props.view ], this.props.viewProps );
+  },
+
+  handleClickOutside: function() {
+    this.props.onClickOutside();
+  }
+}));
+
+module.exports = CalendarContainer;