Merge pull request #2 from Airbase/bind-this-context-to-year-month-se…

…lectors Bind click handlers with this context
Airbase · Sep 2, 2018 · a8fd1db · a8fd1db
2 parents 656f82e + e8833e3
commit a8fd1db
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 37 deletions.
diff --git a/lib/components/MonthYearSwitch.js b/lib/components/MonthYearSwitch.js
@@ -142,10 +142,16 @@ module.exports =
 	var MonthSelector = function (_React$Component) {
 	  _inherits(MonthSelector, _React$Component);
 
-	  function MonthSelector() {
+	  function MonthSelector(props) {
 	    _classCallCheck(this, MonthSelector);
 
-	    return _possibleConstructorReturn(this, (MonthSelector.__proto__ || Object.getPrototypeOf(MonthSelector)).apply(this, arguments));
+	    var _this = _possibleConstructorReturn(this, (MonthSelector.__proto__ || Object.getPrototypeOf(MonthSelector)).call(this, props));
+
+	    _this.prevMonthClick = _this.prevMonthClick.bind(_this);
+	    _this.nextMonthClick = _this.nextMonthClick.bind(_this);
+	    _this.prevYearClick = _this.prevYearClick.bind(_this);
+	    _this.nextYearClick = _this.nextYearClick.bind(_this);
+	    return _this;
 	  }
 
 	  _createClass(MonthSelector, [{
@@ -158,44 +164,74 @@ module.exports =
 	      return shouldComponentUpdate;
 	    }()
 	  }, {
-	    key: 'render',
+	    key: 'prevMonthClick',
 	    value: function () {
-	      function render() {
+	      function prevMonthClick(e) {
 	        var _props = this.props,
 	            date = _props.date,
-	            onSelectMonth = _props.onSelectMonth,
-	            onSelectYear = _props.onSelectYear,
-	            navPrev = _props.navPrev,
-	            navNext = _props.navNext;
+	            onSelectMonth = _props.onSelectMonth;
+
+	        e.preventDefault();
+	        onSelectMonth(date, date.get('month') - 1);
+	      }
+
+	      return prevMonthClick;
+	    }()
+	  }, {
+	    key: 'nextMonthClick',
+	    value: function () {
+	      function nextMonthClick(e) {
+	        var _props2 = this.props,
+	            date = _props2.date,
+	            onSelectMonth = _props2.onSelectMonth;
+
+	        e.preventDefault();
+	        onSelectMonth(date, date.get('month') + 1);
+	      }
+
+	      return nextMonthClick;
+	    }()
+	  }, {
+	    key: 'prevYearClick',
+	    value: function () {
+	      function prevYearClick(e) {
+	        var _props3 = this.props,
+	            date = _props3.date,
+	            onSelectYear = _props3.onSelectYear;
+
+	        e.preventDefault();
+	        onSelectYear(date, date.get('year') - 1);
+	      }
+
+	      return prevYearClick;
+	    }()
+	  }, {
+	    key: 'nextYearClick',
+	    value: function () {
+	      function nextYearClick(e) {
+	        var _props4 = this.props,
+	            date = _props4.date,
+	            onSelectYear = _props4.onSelectYear;
+
+	        e.preventDefault();
+	        onSelectYear(date, date.get('year') + 1);
+	      }
+
+	      return nextYearClick;
+	    }()
+	  }, {
+	    key: 'render',
+	    value: function () {
+	      function render() {
+	        var _props5 = this.props,
+	            date = _props5.date,
+	            navPrev = _props5.navPrev,
+	            navNext = _props5.navNext;
 
 	        var currentMonth = date.format('MMMM');
 	        var currentYear = date.format('YYYY');
 
-	        return _react2['default'].createElement('div', { className: 'MonthYearSwitch' }, _react2['default'].createElement('div', { className: 'Month' }, _react2['default'].createElement('button', { onClick: function () {
-	            function onClick() {
-	              return onSelectMonth(date, date.get('month') - 1);
-	            }
-
-	            return onClick;
-	          }() }, navPrev ? navPrev : _react2['default'].createElement(_arrowLeft2['default'], null)), _react2['default'].createElement('span', { className: 'Month--title' }, currentMonth), _react2['default'].createElement('button', { onClick: function () {
-	            function onClick() {
-	              return onSelectMonth(date, date.get('month') + 1);
-	            }
-
-	            return onClick;
-	          }() }, navNext ? navNext : _react2['default'].createElement(_arrowRight2['default'], null))), _react2['default'].createElement('div', { className: 'Year' }, _react2['default'].createElement('button', { onClick: function () {
-	            function onClick() {
-	              return onSelectYear(date, date.get('year') - 1);
-	            }
-
-	            return onClick;
-	          }() }, navPrev ? navPrev : _react2['default'].createElement(_arrowLeft2['default'], null)), _react2['default'].createElement('span', { className: 'Year--title' }, currentYear), _react2['default'].createElement('button', { onClick: function () {
-	            function onClick() {
-	              return onSelectYear(date, date.get('year') + 1);
-	            }
-
-	            return onClick;
-	          }() }, navNext ? navNext : _react2['default'].createElement(_arrowRight2['default'], null))));
+	        return _react2['default'].createElement('div', { className: 'MonthYearSwitch' }, _react2['default'].createElement('div', { className: 'Month' }, _react2['default'].createElement('button', { onClick: this.prevMonthClick }, navPrev ? navPrev : _react2['default'].createElement(_arrowLeft2['default'], null)), _react2['default'].createElement('span', { className: 'Month--title' }, currentMonth), _react2['default'].createElement('button', { onClick: this.nextMonthClick }, navNext ? navNext : _react2['default'].createElement(_arrowRight2['default'], null))), _react2['default'].createElement('div', { className: 'Year' }, _react2['default'].createElement('button', { onClick: this.prevYearClick }, navPrev ? navPrev : _react2['default'].createElement(_arrowLeft2['default'], null)), _react2['default'].createElement('span', { className: 'Year--title' }, currentYear), _react2['default'].createElement('button', { onClick: this.nextYearClick }, navNext ? navNext : _react2['default'].createElement(_arrowRight2['default'], null))));
 	      }
 
 	      return render;

diff --git a/lib/components/OutsideClickHandler.js b/lib/components/OutsideClickHandler.js
@@ -147,9 +147,11 @@ module.exports =
 	    key: 'onOutsideClick',
 	    value: function () {
 	      function onOutsideClick(e) {
-	        var isDescendantOfRoot = this.childNode.contains(e.target);
-	        if (!isDescendantOfRoot) {
-	          this.props.onOutsideClick(e);
+	        if (this.childNode) {
+	          var isDescendantOfRoot = this.childNode.contains(e.target);
+	          if (!isDescendantOfRoot) {
+	            this.props.onOutsideClick(e);
+	          }
 	        }
 	      }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "12.1.2",
+  "version": "12.3.3",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

diff --git a/src/components/MonthYearSwitch.jsx b/src/components/MonthYearSwitch.jsx
@@ -25,6 +25,15 @@ const defaultProps = {
 };
 
 export default class MonthSelector extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.prevMonthClick = this.prevMonthClick.bind(this);
+    this.nextMonthClick = this.nextMonthClick.bind(this);
+    this.prevYearClick = this.prevYearClick.bind(this);
+    this.nextYearClick = this.nextYearClick.bind(this);
+  }
+
   shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }