react-calendar - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

demo.js

@@ -10,6 +10,2 @@ /** @jsx React.DOM */
 
-function handleClick (scope, m, e) {
-  alert("handleClick: " + scope + " " + m.format());
-};
-
 var PagingCalendar = React.createClass({
@@ -36,2 +32,6 @@ getInitialState: function () {
 
+  handleClick: function (scope, m, e) {
+    alert("handleClick: " + scope + " " + m.format());
+  },
+
   render: function () {
@@ -50,6 +50,6 @@ return (
                   size={12}>
-          <Day onClick={handleClick} />
+          <Day onClick={this.handleClick} />
           <Month date={moment()}
                  modifiers={{current: true}}
-                 onClick={handleClick} />
+                 onClick={this.handleClick} />
           <Day date={moment()}
@@ -56,0 +56,0 @@ modifiers={{current: true}} />

dist/react-calendar.js

@@ -14,10 +14,10 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	var installedModules = {};
-/******/
+
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-/******/
+
 /******/ 		// Check if module is in cache
 /******/ 		if(installedModules[moduleId])
 /******/ 			return installedModules[moduleId].exports;
-/******/
+
 /******/ 		// Create a new module (and put it into the cache)
@@ -29,23 +29,23 @@ /******/ 		var module = installedModules[moduleId] = {
 /******/ 		};
-/******/
+
 /******/ 		// Execute the module function
 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
+
 /******/ 		// Flag the module as loaded
 /******/ 		module.loaded = true;
-/******/
+
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-/******/
-/******/
+
+
 /******/ 	// expose the modules object (__webpack_modules__)
 /******/ 	__webpack_require__.m = modules;
-/******/
+
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
-/******/
+
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
-/******/
+
 /******/ 	// Load entry module and return exports
@@ -74,3 +74,2 @@ /******/ 	return __webpack_require__(0);
 
-	/** @jsx React.DOM */
 	"use strict";
@@ -87,3 +86,3 @@
 
-	var Calendar = React.createClass({displayName: 'Calendar',
+	var Calendar = React.createClass({displayName: "Calendar",
 	  mixins: [
@@ -114,2 +113,6 @@ CalendarBaseMixin,
 
+	  getChildContext:function(){
+	    return this.getCalendarCtx();
+	  },
+
 	  getMonthRange: function () {
@@ -144,21 +147,19 @@ var range, left, right;
 	  render: function () {
-	    return React.withContext(this.getCalendarCtx(), function()  {
-	      var classes = this.className({
-	        modifiers: this.props.modifiers,
-	        classes: this.props.classes
-	      });
-	      var childrenMap = this.splitChildrenByDate(Month);
-	      var months = this.getMonthRange().map(
-	        this.makeDirectChild.bind(this, childrenMap, Month)
-	      );
+	    var classes = this.className({
+	      modifiers: this.props.modifiers,
+	      classes: this.props.classes
+	    });
+	    var childrenMap = this.splitChildrenByDate(Month);
+	    var months = this.getMonthRange().map(
+	      this.makeDirectChild.bind(this, childrenMap, Month)
+	    );
 
-	      var props = _.assign({
-	        className: classes()
-	      }, this.getEventHandlers());
+	    var props = _.assign({
+	      className: classes()
+	    }, this.getEventHandlers());
 
-	      return React.DOM.div(props, [
-	        this.makeHeader(classes),
-	        months
-	      ]);
-	    }.bind(this));
+	    return React.DOM.div(props, [
+	      this.makeHeader(classes),
+	      months
+	    ]);
 	  }
@@ -174,3 +175,2 @@ });
 
-	/** @jsx React.DOM */
 	"use strict";
@@ -188,3 +188,3 @@
 
-	var Month = React.createClass({displayName: 'Month',
+	var Month = React.createClass({displayName: "Month",
 	  mixins: [
@@ -243,27 +243,29 @@ CalendarBaseMixin,
 
+	  getChildContext:function(){
+	    return this.getCalendarCtx();
+	  },
+
 	  render: function () {
-	    return React.withContext(this.getCalendarCtx(), function()  {
-	      var classes = this.className({
-	        modifiers: this.props.modifiers,
-	        classes: this.props.classes
-	      });
+	    var classes = this.className({
+	      modifiers: this.props.modifiers,
+	      classes: this.props.classes
+	    });
 
-	      var childrenMap = this.splitChildrenByDate(
-	        Week,
-	        dateUtils.monthEdges(this.props.date).map(this.createMonthEdge)
-	      );
-	      var weeks = dateUtils.weeksOfMonth(this.props.date).map(
-	        this.makeDirectChild.bind(this, childrenMap, Week)
-	      );
+	    var childrenMap = this.splitChildrenByDate(
+	      Week,
+	      dateUtils.monthEdges(this.props.date).map(this.createMonthEdge)
+	    );
+	    var weeks = dateUtils.weeksOfMonth(this.props.date).map(
+	      this.makeDirectChild.bind(this, childrenMap, Week)
+	    );
 
-	      var props = _.assign({
-	        className: classes()
-	      }, this.getEventHandlers());
+	    var props = _.assign({
+	      className: classes()
+	    }, this.getEventHandlers());
 
-	      return React.DOM.div(props, [
-	        this.makeHeader(classes.descendant('header')),
-	        this.makeWeekHeader(classes.descendant('weekdays')),
-	        weeks
-	      ]);
-	    }.bind(this));
+	    return React.DOM.div(props, [
+	      this.makeHeader(classes.descendant('header')),
+	      this.makeWeekHeader(classes.descendant('weekdays')),
+	      weeks
+	    ]);
 	  }
@@ -279,3 +281,2 @@ });
 
-	/** @jsx React.DOM */
 	"use strict";
@@ -292,3 +293,3 @@
 
-	var Week = React.createClass({displayName: 'Week',
+	var Week = React.createClass({displayName: "Week",
 	  mixins: [
@@ -315,26 +316,27 @@ CalendarBaseMixin,
 	  },
+	  getChildContext:function(){
+	    return this.getCalendarCtx();
+	  },
 
 	  render: function () {
-	    return React.withContext(this.getCalendarCtx(), function()  {
-	      var classes = this.className({
-	        modifiers: this.props.modifiers,
-	        classes: this.props.classes
-	      });
+	    var classes = this.className({
+	      modifiers: this.props.modifiers,
+	      classes: this.props.classes
+	    });
 
-	      var childrenMap = this.splitChildrenByDate(Day);
-	      var days = dateUtils.daysOfWeek(this.props.date).map(
-	        this.makeDirectChild.bind(this, childrenMap, Day)
-	      );
+	    var childrenMap = this.splitChildrenByDate(Day);
+	    var days = dateUtils.daysOfWeek(this.props.date).map(
+	      this.makeDirectChild.bind(this, childrenMap, Day)
+	    );
 
-	      var props = _.assign({
-	        className: classes()
-	      }, this.getEventHandlers());
+	    var props = _.assign({
+	      className: classes()
+	    }, this.getEventHandlers());
 
-	      return React.DOM.div(props, [
-	        this.makeWeekNumber(classes),
-	        React.createElement("div", {key: "days", className: classes.descendant('days')}, 
-	          days
-	        )
-	      ]);
-	    }.bind(this));
+	    return React.DOM.div(props, [
+	      this.makeWeekNumber(classes),
+	      React.createElement("div", {key: "days", className: classes.descendant('days')}, 
+	        days
+	      )
+	    ]);
 	  }
@@ -350,3 +352,2 @@ });
 
-	/** @jsx React.DOM */
 	"use strict";
@@ -360,3 +361,3 @@
 
-	var Day = React.createClass({displayName: 'Day',
+	var Day = React.createClass({displayName: "Day",
 	  mixins: [propTypes.Mixin(true,
@@ -370,3 +371,3 @@ 'Day'
 	        React.createElement("header", {className: classes()}, 
-	          this.porps.date.format(this.getPropOrCtx('dayHeaderFormat'))
+	          this.props.date.format(this.getPropOrCtx('dayHeaderFormat'))
 	        )
@@ -392,3 +393,4 @@ );
 	        React.createElement("div", {key: "agenda", 
-	             className: classes()}
+	             className: classes()}, 
+	          this.props.children
 	        )
@@ -400,20 +402,21 @@ );
 	  },
+	  getChildContext:function(){
+	    return this.getCalendarCtx();
+	  },
 
 	  render: function () {
-	    return React.withContext(this.getCalendarCtx(), function()  {
-	      var classes = this.className({
-	        modifiers: this.props.modifiers,
-	        classes: this.props.classes
-	      });
+	    var classes = this.className({
+	      modifiers: this.props.modifiers,
+	      classes: this.props.classes
+	    });
 
-	      var props = _.assign({
-	        className: classes()
-	      }, this.getEventHandlers());
+	    var props = _.assign({
+	      className: classes()
+	    }, this.getEventHandlers());
 
-	      return React.DOM.div(props, [
-	        this.makeHeader(classes.descendant('header')),
-	        this.makeBody(classes.descendant('body')),
-	        this.makeAgenda(classes.descendant('agenda'))
-	      ]);
-	    }.bind(this));
+	    return React.DOM.div(props, [
+	      this.makeHeader(classes.descendant('header')),
+	      this.makeBody(classes.descendant('body')),
+	      this.makeAgenda(classes.descendant('agenda'))
+	    ]);
 	  }
@@ -520,3 +523,3 @@ });
 	  Month: 'YYYY-MM',
-	  Week: 'YYYY-ww',
+	  Week: 'gggg-ww',
 	  Day: 'YYYY-DDDD'
@@ -588,3 +591,13 @@ };
 	      });
-	      props = _.assign({}, child.props, props);
+	      var mergedProps = ['modifiers', 'classes'].reduce(function(merged, propKey)  {
+	        if (props.hasOwnProperty(propKey) &&
+	            child.props.hasOwnProperty(propKey)) {
+	          merged[propKey] = _.assign({},
+	            props[propKey],
+	            child.props[propKey]
+	          );
+	        }
+	        return merged;
+	      }, {});
+	      props = _.assign({}, child.props, props, mergedProps);
 	    });
@@ -751,3 +764,4 @@
 	  var result = {
-	    propTypes: propTypes
+	    propTypes: propTypes,
+	    childContextTypes: propTypes
 	  };
@@ -762,3 +776,3 @@
 	      return this.props[val];
-	    } else if (this.context[val]) {
+	    } else if (this.context[val] !== undefined) {
 	      return this.context[val];
@@ -779,3 +793,3 @@ } else {
 	      return cb.bind(
-	        this,
+	        null,
 	        this.constructor.displayName,
@@ -939,1 +953,2 @@ this.props.date.clone()
 });
+;

package.json

 {
   "name": "react-calendar",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Mikhail <[e-mail]> Novikov",
@@ -21,7 +21,7 @@ "description": "Calendar component for ReactJS",
   "peerDependencies": {
-    "react": "^0.12.1",
+    "react": "^0.13.x",
     "moment": "^2.8.3"
   },
   "devDependencies": {
-    "bootstrap": "^3.2.0",
+    "bootstrap": "~3.2.0",
     "css-loader": "^0.9.0",
@@ -34,3 +34,3 @@ "file-loader": "^0.7.2",
     "raw-loader": "^0.5.1",
-    "react": "^0.12.1",
+    "react": "^0.13.1",
     "react-hot-loader": "^0.4.5",
@@ -37,0 +37,0 @@ "style-loader": "^0.8.1",

src/Calendar.js

@@ -1,2 +0,1 @@
-/** @jsx React.DOM */
 "use strict";
@@ -39,2 +38,6 @@
 
+  getChildContext(){
+    return this.getCalendarCtx();
+  },
+
   getMonthRange: function () {
@@ -69,21 +72,19 @@ var range, left, right;
   render: function () {
-    return React.withContext(this.getCalendarCtx(), () => {
-      var classes = this.className({
-        modifiers: this.props.modifiers,
-        classes: this.props.classes
-      });
-      var childrenMap = this.splitChildrenByDate(Month);
-      var months = this.getMonthRange().map(
-        this.makeDirectChild.bind(this, childrenMap, Month)
-      );
+    var classes = this.className({
+      modifiers: this.props.modifiers,
+      classes: this.props.classes
+    });
+    var childrenMap = this.splitChildrenByDate(Month);
+    var months = this.getMonthRange().map(
+      this.makeDirectChild.bind(this, childrenMap, Month)
+    );
 
-      var props = _.assign({
-        className: classes()
-      }, this.getEventHandlers());
+    var props = _.assign({
+      className: classes()
+    }, this.getEventHandlers());
 
-      return React.DOM.div(props, [
-        this.makeHeader(classes),
-        months
-      ]);
-    });
+    return React.DOM.div(props, [
+      this.makeHeader(classes),
+      months
+    ]);
   }
@@ -90,0 +91,0 @@ });

src/CalendarBaseMixin.js

@@ -9,3 +9,3 @@ "use strict";
   Month: 'YYYY-MM',
-  Week: 'YYYY-ww',
+  Week: 'gggg-ww',
   Day: 'YYYY-DDDD'
@@ -77,3 +77,13 @@ };
       });
-      props = _.assign({}, child.props, props);
+      var mergedProps = ['modifiers', 'classes'].reduce((merged, propKey) => {
+        if (props.hasOwnProperty(propKey) &&
+            child.props.hasOwnProperty(propKey)) {
+          merged[propKey] = _.assign({},
+            props[propKey],
+            child.props[propKey]
+          );
+        }
+        return merged;
+      }, {});
+      props = _.assign({}, child.props, props, mergedProps);
     });
@@ -80,0 +90,0 @@

src/Day.js

@@ -1,2 +0,1 @@
-/** @jsx React.DOM */
 "use strict";
@@ -19,3 +18,3 @@
         <header className={classes()}>
-          {this.porps.date.format(this.getPropOrCtx('dayHeaderFormat'))}
+          {this.props.date.format(this.getPropOrCtx('dayHeaderFormat'))}
         </header>
@@ -42,2 +41,3 @@ );
              className={classes()}>
+          {this.props.children}
         </div>
@@ -49,20 +49,21 @@ );
   },
+  getChildContext(){
+    return this.getCalendarCtx();
+  },
 
   render: function () {
-    return React.withContext(this.getCalendarCtx(), () => {
-      var classes = this.className({
-        modifiers: this.props.modifiers,
-        classes: this.props.classes
-      });
+    var classes = this.className({
+      modifiers: this.props.modifiers,
+      classes: this.props.classes
+    });
 
-      var props = _.assign({
-        className: classes()
-      }, this.getEventHandlers());
+    var props = _.assign({
+      className: classes()
+    }, this.getEventHandlers());
 
-      return React.DOM.div(props, [
-        this.makeHeader(classes.descendant('header')),
-        this.makeBody(classes.descendant('body')),
-        this.makeAgenda(classes.descendant('agenda'))
-      ]);
-    });
+    return React.DOM.div(props, [
+      this.makeHeader(classes.descendant('header')),
+      this.makeBody(classes.descendant('body')),
+      this.makeAgenda(classes.descendant('agenda'))
+    ]);
   }
@@ -69,0 +70,0 @@ });

src/Month.js

@@ -1,2 +0,1 @@
-/** @jsx React.DOM */
 "use strict";
@@ -68,27 +67,29 @@
 
+  getChildContext(){
+    return this.getCalendarCtx();
+  },
+
   render: function () {
-    return React.withContext(this.getCalendarCtx(), () => {
-      var classes = this.className({
-        modifiers: this.props.modifiers,
-        classes: this.props.classes
-      });
+    var classes = this.className({
+      modifiers: this.props.modifiers,
+      classes: this.props.classes
+    });
 
-      var childrenMap = this.splitChildrenByDate(
-        Week,
-        dateUtils.monthEdges(this.props.date).map(this.createMonthEdge)
-      );
-      var weeks = dateUtils.weeksOfMonth(this.props.date).map(
-        this.makeDirectChild.bind(this, childrenMap, Week)
-      );
+    var childrenMap = this.splitChildrenByDate(
+      Week,
+      dateUtils.monthEdges(this.props.date).map(this.createMonthEdge)
+    );
+    var weeks = dateUtils.weeksOfMonth(this.props.date).map(
+      this.makeDirectChild.bind(this, childrenMap, Week)
+    );
 
-      var props = _.assign({
-        className: classes()
-      }, this.getEventHandlers());
+    var props = _.assign({
+      className: classes()
+    }, this.getEventHandlers());
 
-      return React.DOM.div(props, [
-        this.makeHeader(classes.descendant('header')),
-        this.makeWeekHeader(classes.descendant('weekdays')),
-        weeks
-      ]);
-    });
+    return React.DOM.div(props, [
+      this.makeHeader(classes.descendant('header')),
+      this.makeWeekHeader(classes.descendant('weekdays')),
+      weeks
+    ]);
   }
@@ -95,0 +96,0 @@ });

src/propTypes.js

@@ -148,3 +148,4 @@ "use strict";
   var result = {
-    propTypes: propTypes
+    propTypes: propTypes,
+    childContextTypes: propTypes
   };
@@ -159,3 +160,3 @@
       return this.props[val];
-    } else if (this.context[val]) {
+    } else if (this.context[val] !== undefined) {
       return this.context[val];
@@ -176,3 +177,3 @@ } else {
       return cb.bind(
-        this,
+        null,
         this.constructor.displayName,
@@ -179,0 +180,0 @@ this.props.date.clone()

src/Week.js

@@ -1,2 +0,1 @@
-/** @jsx React.DOM */
 "use strict";
@@ -35,26 +34,27 @@
   },
+  getChildContext(){
+    return this.getCalendarCtx();
+  },
 
   render: function () {
-    return React.withContext(this.getCalendarCtx(), () => {
-      var classes = this.className({
-        modifiers: this.props.modifiers,
-        classes: this.props.classes
-      });
+    var classes = this.className({
+      modifiers: this.props.modifiers,
+      classes: this.props.classes
+    });
 
-      var childrenMap = this.splitChildrenByDate(Day);
-      var days = dateUtils.daysOfWeek(this.props.date).map(
-        this.makeDirectChild.bind(this, childrenMap, Day)
-      );
+    var childrenMap = this.splitChildrenByDate(Day);
+    var days = dateUtils.daysOfWeek(this.props.date).map(
+      this.makeDirectChild.bind(this, childrenMap, Day)
+    );
 
-      var props = _.assign({
-        className: classes()
-      }, this.getEventHandlers());
+    var props = _.assign({
+      className: classes()
+    }, this.getEventHandlers());
 
-      return React.DOM.div(props, [
-        this.makeWeekNumber(classes),
-        <div key="days" className={classes.descendant('days')}>
-          {days}
-        </div>
-      ]);
-    });
+    return React.DOM.div(props, [
+      this.makeWeekNumber(classes),
+      <div key="days" className={classes.descendant('days')}>
+        {days}
+      </div>
+    ]);
   }
@@ -61,0 +61,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

201446

increased by0.16%

Lines of code

1563

increased by0.84%

No dependency changes