react-day-picker - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

lib/addons/MomentLocaleUtils.js

@@ -38,2 +38,13 @@ "use strict";
     return localeData.firstDayOfWeek();
+  },
+
+  getMonths: function getMonths() {
+    var locale = arguments.length <= 0 || arguments[0] === undefined ? "en" : arguments[0];
+
+    var months = [];
+    var i = 0;
+    while (i < 12) {
+      months.push((0, _moment2["default"])().locale(locale).month(i++).format("MMMM"));
+    }
+    return months;
   }
@@ -40,0 +51,0 @@

lib/DateUtils.js

@@ -9,2 +9,13 @@ "use strict";
   /**
+   * Return `d` as a new date with `n` months added.
+   * @param {[type]} d
+   * @param {[type]} n
+   */
+  addMonths: function addMonths(d, n) {
+    var newDate = DateUtils.clone(d);
+    newDate.setMonth(d.getMonth() + n);
+    return newDate;
+  },
+
+  /**
    * Clone a date object.
@@ -11,0 +22,0 @@ *

lib/DayPicker.js

@@ -42,5 +42,34 @@ "use strict";
 
-var DayPicker = (function (_Component) {
-  _inherits(DayPicker, _Component);
+var Caption = (function (_Component) {
+  _inherits(Caption, _Component);
 
+  function Caption() {
+    _classCallCheck(this, Caption);
+
+    _get(Object.getPrototypeOf(Caption.prototype), "constructor", this).apply(this, arguments);
+  }
+
+  _createClass(Caption, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props;
+      var date = _props.date;
+      var locale = _props.locale;
+      var localeUtils = _props.localeUtils;
+      var onClick = _props.onClick;
+
+      return _react2["default"].createElement(
+        "div",
+        { className: "DayPicker-Caption", onClick: onClick },
+        localeUtils.formatMonthTitle(date, locale)
+      );
+    }
+  }]);
+
+  return Caption;
+})(_react.Component);
+
+var DayPicker = (function (_Component2) {
+  _inherits(DayPicker, _Component2);
+
   _createClass(DayPicker, null, [{
@@ -79,4 +108,6 @@ key: "propTypes",
 
-      renderDay: _react.PropTypes.func
+      renderDay: _react.PropTypes.func,
 
+      captionElement: _react.PropTypes.element
+
     },
@@ -96,3 +127,4 @@ enumerable: true
         return day.getDate();
-      }
+      },
+      captionElement: _react2["default"].createElement(Caption, null)
     },
@@ -123,5 +155,3 @@ enumerable: true
     value: function allowPreviousMonth() {
-      var _props = this.props;
-      var fromMonth = _props.fromMonth;
-      var numberOfMonths = _props.numberOfMonths;
+      var fromMonth = this.props.fromMonth;
 
@@ -133,3 +163,3 @@ if (!fromMonth) {
 
-      return _Helpers2["default"].getMonthsDiff(fromMonth, currentMonth) > numberOfMonths - 1;
+      return _Helpers2["default"].getMonthsDiff(currentMonth, fromMonth) < 0;
     }
@@ -148,3 +178,3 @@ }, {
 
-      return _Helpers2["default"].getMonthsDiff(currentMonth, toMonth) > numberOfMonths - 1;
+      return _Helpers2["default"].getMonthsDiff(currentMonth, toMonth) >= numberOfMonths;
     }
@@ -183,3 +213,3 @@ }, {
 
-      var nextMonth = _Helpers2["default"].addMonths(currentMonth, 1);
+      var nextMonth = _DateUtils2["default"].addMonths(currentMonth, 1);
       this.setState({
@@ -206,3 +236,3 @@ currentMonth: nextMonth
 
-      var prevMonth = _Helpers2["default"].addMonths(currentMonth, -1);
+      var prevMonth = _DateUtils2["default"].addMonths(currentMonth, -1);
       this.setState({
@@ -219,25 +249,3 @@ currentMonth: prevMonth
     }
-
-    // Show the month(s) belonging to an outside day, counting the
-    // number of months actually shown in the calendar.
   }, {
-    key: "showMonthsForOutsideDay",
-    value: function showMonthsForOutsideDay(day) {
-      var currentMonth = this.state.currentMonth;
-      var numberOfMonths = this.props.numberOfMonths;
-
-      var diffInMonths = _Helpers2["default"].getMonthsDiff(currentMonth, day);
-      if (diffInMonths > 0 && diffInMonths >= numberOfMonths) {
-        var nextMonth = _Helpers2["default"].addMonths(currentMonth, numberOfMonths);
-        this.setState({
-          currentMonth: nextMonth
-        });
-      } else if (diffInMonths < 0) {
-        var prevMonth = _Helpers2["default"].addMonths(currentMonth, -numberOfMonths);
-        this.setState({
-          currentMonth: prevMonth
-        });
-      }
-    }
-  }, {
     key: "focusPreviousDay",
@@ -258,3 +266,3 @@ value: function focusPreviousDay(dayNode) {
 
-        var prevMonth = _Helpers2["default"].addMonths(currentMonth, -numberOfMonths);
+        var prevMonth = _DateUtils2["default"].addMonths(currentMonth, -numberOfMonths);
         this.setState({
@@ -287,3 +295,3 @@ currentMonth: prevMonth
 
-        var nextMonth = _Helpers2["default"].addMonths(currentMonth, numberOfMonths);
+        var nextMonth = _DateUtils2["default"].addMonths(currentMonth, numberOfMonths);
         this.setState({
@@ -363,3 +371,3 @@ currentMonth: nextMonth
       if (modifiers.indexOf("outside") > -1) {
-        this.showMonthsForOutsideDay(day);
+        this.handleOutsideDayPress(day);
       }
@@ -373,3 +381,3 @@ this.props.onDayTouchTap(e, day, modifiers);
       if (modifiers.indexOf("outside") > -1) {
-        this.showMonthsForOutsideDay(day);
+        this.handleOutsideDayPress(day);
       }
@@ -392,2 +400,15 @@
   }, {
+    key: "handleOutsideDayPress",
+    value: function handleOutsideDayPress(day) {
+      var currentMonth = this.state.currentMonth;
+      var numberOfMonths = this.props.numberOfMonths;
+
+      var diffInMonths = _Helpers2["default"].getMonthsDiff(currentMonth, day);
+      if (diffInMonths > 0 && diffInMonths >= numberOfMonths) {
+        this.showNextMonth();
+      } else if (diffInMonths < 0) {
+        this.showPreviousMonth();
+      }
+    }
+  }, {
     key: "renderNavBar",
@@ -411,3 +432,3 @@ value: function renderNavBar() {
     key: "renderMonth",
-    value: function renderMonth(d, i) {
+    value: function renderMonth(date, i) {
       var _this3 = this;
@@ -419,3 +440,11 @@
       var onCaptionClick = _props4.onCaptionClick;
+      var captionElement = _props4.captionElement;
 
+      var caption = _react2["default"].cloneElement(captionElement, {
+        date: date, localeUtils: localeUtils, locale: locale,
+        onClick: onCaptionClick ? function (e) {
+          return _this3.handleCaptionClick(e, date);
+        } : null
+      });
+
       return _react2["default"].createElement(
@@ -426,11 +455,5 @@ "div",
           key: i },
+        caption,
         _react2["default"].createElement(
           "div",
-          { className: "DayPicker-Caption", onClick: onCaptionClick ? function (e) {
-              return _this3.handleCaptionClick(e, d);
-            } : null },
-          localeUtils.formatMonthTitle(d, locale)
-        ),
-        _react2["default"].createElement(
-          "div",
           { className: "DayPicker-Weekdays" },
@@ -446,3 +469,3 @@ _react2["default"].createElement(
           { className: "DayPicker-Body" },
-          this.renderWeeksInMonth(d)
+          this.renderWeeksInMonth(date)
         )
@@ -464,3 +487,3 @@ );
           _react2["default"].createElement(
-            "attr",
+            "abbr",
             { title: localeUtils.formatWeekdayLong(i, locale) },
@@ -591,3 +614,3 @@ localeUtils.formatWeekdayShort(i, locale)
       for (var i = 0; i < numberOfMonths; i++) {
-        month = _Helpers2["default"].addMonths(currentMonth, i);
+        month = _DateUtils2["default"].addMonths(currentMonth, i);
         months.push(this.renderMonth(month, i));
@@ -594,0 +617,0 @@ }

lib/Helpers.js

@@ -19,8 +19,2 @@ "use strict";
 
-  addMonths: function addMonths(d, months) {
-    var newDate = _DateUtils2["default"].clone(d);
-    newDate.setMonth(d.getMonth() + months);
-    return newDate;
-  },
-
   startOfMonth: function startOfMonth(d) {
@@ -27,0 +21,0 @@ var newDate = _DateUtils2["default"].clone(d);

lib/LocaleUtils.js

@@ -28,2 +28,6 @@ "use strict";
     return 0;
+  },
+
+  getMonths: function getMonths() {
+    return MONTHS;
   }
@@ -30,0 +34,0 @@

package.json

 {
   "name": "react-day-picker",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Flexible date picker component for React",
   "main": "DayPicker.js",
+  "style": "lib/style.css",
   "directories": {
@@ -21,2 +22,5 @@ "doc": "docs"
 
+    "examples:clean": "rimraf examples/built",
+    "examples:build": "npm run examples:clean && cd examples && npm run build && cd ..",
+
     "docs:clean": "rimraf _book",
@@ -27,3 +31,3 @@ "docs:prepare": "gitbook install",
 
-    "docs:publish": "npm run docs:clean && npm run docs:build && cd examples && npm run build && cd .. && rimraf _book/examples && mv examples/built _book/examples && cd _book && git init && git commit --allow-empty -m 'Update docs and examples' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'Update docs and examples' && git push [e-mail]:gpbl/react-day-picker gh-pages --force"
+    "docs:publish": "npm run docs:clean && npm run docs:build && npm run examples:build && rimraf _book/examples && mv examples/built _book/examples && cd _book && git init && git commit --allow-empty -m 'Update docs and examples' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'Update docs and examples' && git push [e-mail]:gpbl/react-day-picker gh-pages --force"
   },
@@ -60,6 +64,7 @@ "repository": {
     "babel-eslint": "^4.0.10",
+    "chai": "^3.4.1",
     "classlist-polyfill": "^1.0.1",
     "coveralls": "^2.11.2",
-    "eslint": "^1.8.0",
-    "eslint-plugin-react": "^3.6.3",
+    "eslint": "^1.10.1",
+    "eslint-plugin-react": "^3.10.0",
     "exenv": "^1.2.0",
@@ -66,0 +71,0 @@ "fbjs": "^0.4.0",

No alert changes

Improved metrics

Total package byte prevSize

82994

4.19%

Number of package files

29

7.41%

Lines of code

971

5.77%

Worsened metrics

Dev dependency count

26

4%

No dependency changes