Bumps to v2.16

Author: arqex

CHANGELOG.md

@@ -1,5 +1,11 @@
 Changelog
 =========
+## 2.16.0
+* The prop `disableOnClickOutside` has been renamed to `disableCloseOnClickOutside`
+* The calendar doesn't get closed an open when clicking in the input anymore.
+* Fixes errors not finding dates when customizing day rendering.
+* Event listeners in `inputProps` now only override default behaviour when returning `false`.
+
 ## 2.15.0
 * New `onNavigateBack` and `onNavigateForward` hooks thanks to @DaanDD and @simeg.
 * Touch improvements by @NicoDos

DateTime.js

@@ -5,7 +5,8 @@ var assign = require('object-assign'),
 	createClass = require('create-react-class'),
 	moment = require('moment'),
 	React = require('react'),
-	CalendarContainer = require('./src/CalendarContainer')
+	CalendarContainer = require('./src/CalendarContainer'),
+	onClickOutside = require('react-onclickoutside').default
 	;
 
 var viewModes = Object.freeze({
@@ -315,7 +316,7 @@ var Datetime = createClass({
 	},
 
 	updateSelectedDate: function( e, close ) {
-		var target = e.target,
+		var target = e.currentTarget,
 			modifier = 0,
 			viewDate = this.state.viewDate,
 			currentDate = this.state.selectedDate || viewDate,
@@ -383,7 +384,7 @@ var Datetime = createClass({
 	},
 
 	handleClickOutside: function() {
-		if ( this.props.input && this.state.open && !this.props.open && !this.props.disableOnClickOutside ) {
+		if ( this.props.input && this.state.open && this.props.open === undefined && !this.props.disableCloseOnClickOutside ) {
 			this.setState({ open: false }, function() {
 				this.props.onBlur( this.state.selectedDate || this.state.inputValue );
 			});
@@ -432,6 +433,27 @@ var Datetime = createClass({
 		return props;
 	},
 
+	overrideEvent: function( handler, action ) {
+		if ( !this.overridenEvents ) {
+			this.overridenEvents = {};
+		}
+
+		if ( !this.overridenEvents[handler] ) {
+			var me = this;
+			this.overridenEvents[handler] = function( e ) {
+				var result;
+				if ( me.props.inputProps && me.props.inputProps[handler] ) {
+					result = me.props.inputProps[handler]( e );
+				}
+				if ( result !== false ) {
+					action( e );
+				}
+			};
+		}
+
+		return this.overridenEvents[handler];
+	},
+
 	render: function() {
 		// TODO: Make a function or clean up this code,
 		// logic right now is really hard to follow
@@ -444,10 +466,10 @@ var Datetime = createClass({
 			var finalInputProps = assign({
 				type: 'text',
 				className: 'form-control',
-				onClick: this.openCalendar,
-				onFocus: this.openCalendar,
-				onChange: this.onInputChange,
-				onKeyDown: this.onInputKey,
+				onClick: this.overrideEvent( 'onClick', this.openCalendar ),
+				onFocus: this.overrideEvent( 'onFocus', this.openCalendar ),
+				onChange: this.overrideEvent( 'onChange', this.onInputChange ),
+				onKeyDown: this.overrideEvent( 'onKeyDown', this.onInputKey ),
 				value: this.state.inputValue,
 			}, this.props.inputProps);
 			if ( this.props.renderInput ) {
@@ -459,18 +481,27 @@ var Datetime = createClass({
 			className += ' rdtStatic';
 		}
 
-		if ( this.state.open )
+		if ( this.props.open || (this.props.open === undefined && this.state.open ) )
 			className += ' rdtOpen';
 
-		return React.createElement( 'div', { className: className }, children.concat(
+		return React.createElement( ClickableWrapper, {className: className, onClickOut: this.handleClickOutside}, children.concat(
 			React.createElement( 'div',
 				{ key: 'dt', className: 'rdtPicker' },
-				React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
+				React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps() })
 			)
 		));
 	}
 });
 
+var ClickableWrapper = onClickOutside( createClass({
+	render: function() {
+		return React.createElement( 'div', { className: this.props.className }, this.props.children );
+	},
+	handleClickOutside: function( e ) {
+		this.props.onClickOut( e );
+	}
+}));
+
 Datetime.defaultProps = {
 	className: '',
 	defaultValue: '',

README.md

@@ -21,7 +21,7 @@ yarn add react-datetime
 
 ## Usage
 
-[React.js](http://facebook.github.io/react/) and [Moment.js](http://momentjs.com/) are peer dependencies for react-datetime. These dependencies are not installed along with react-datetime automatically, but your project needs to have them installed in order to make the datepicker work. You can then use the datepicker like in the example below.
+[React.js](http://facebook.github.io/react/) and [Moment.js](http://momentjs.com/) are peer dependencies for react-datetime (as well as [Moment.js timezones](https://momentjs.com/timezone/) if you want to use the `displayTimeZone` prop). These dependencies are not installed along with react-datetime automatically, but your project needs to have them installed in order to make the datepicker work. You can then use the datepicker like in the example below.
 
 
 ```js
@@ -50,7 +50,7 @@ render: function() {
 | **open** | `boolean` | `null` | Whether to open or close the picker. If not set react-datetime will open the datepicker on input focus and close it on click outside. |
 | **locale** | `string` | `null` | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see [i18n docs](#i18n).
 | **utc** | `boolean` | `false` | When true, input time values will be interpreted as UTC (Zulu time) by Moment.js. Otherwise they will default to the user's local timezone.
-| **displayTImeZone** | `string` | `null` | When specified, input time values will be displayed in the given time zone. Otherwise they will default to the user's local timezone (unless `utc` specified).
+| **displayTimeZone** | `string` | `null` | **Needs [moment's timezone](https://momentjs.com/timezone/) available in your project.** When specified, input time values will be displayed in the given time zone. Otherwise they will default to the user's local timezone (unless `utc` specified).
 | **onChange** | `function` | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string). |
 | **onFocus** | `function` | empty function | Callback trigger for when the user opens the datepicker. The callback receives an event of type SyntheticEvent. |
 | **onBlur** | `function` | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback returned. |
@@ -69,7 +69,7 @@ render: function() {
 | **closeOnSelect** | `boolean` | `false` | When `true`, once the day has been selected, the datepicker will be automatically closed.
 | **closeOnTab** | `boolean` | `true` | When `true` and the input is focused, pressing the `tab` key will close the datepicker.
 | **timeConstraints** | `object` | `null` | Add some constraints to the timepicker. It accepts an `object` with the format `{ hours: { min: 9, max: 15, step: 2 }}`, this example means the hours can't be lower than `9` and higher than `15`, and it will change adding or subtracting `2` hours everytime the buttons are clicked. The constraints can be added to the `hours`, `minutes`, `seconds` and `milliseconds`.
-| **disableOnClickOutside** | `boolean` | `false` | When `true`, keep the datepicker open when click event is triggered outside of component. When `false`, close it.
+| **disableCloseOnClickOutside** | `boolean` | `false` | When `true`, keep the datepicker open when click event is triggered outside of component. When `false`, close it.
 
 ## i18n
 Different language and date formats are supported by react-datetime. React uses [Moment.js](http://momentjs.com/) to format the dates, and the easiest way of changing the language of the calendar is [changing the Moment.js locale](http://momentjs.com/docs/#/i18n/changing-locale/).