Merge branch 'master' of github.com:YouCanBookMe/react-datetime into feature-render-input

* 'master' of github.com:YouCanBookMe/react-datetime: (24 commits)
  Twotenthree (arqex#434)
  Version 2.10.2
  Fix URL for 'uncontrolled elements'
  Fix formatting in demo README
  Create proper demo application
  Move @types/react back to devDependencies
  Fix build files (arqex#411)
  Bump to v2.10.0 (arqex#410)
  if isValidDate is passed we need to verify if the view date is valid … (arqex#296)
  Add create-react-class dependency
  Use same tab indentiation in all JS files
  Enforce tab indentation
  Add TODO regarding complex ternary expression
  Use consistent indentation in README examples
  Add yarn installation instructions to README
  Add snapshot testing
  Version 2.9.0
  Add TS definitions for onViewModeChange callback
  Add callback on view mode changes
  Update indentation and style for consistency
  ...

Author: Dan Forster

.eslintrc.js

@@ -35,6 +35,8 @@ module.exports = {
         // Enforce consistent spacing inside parentheses
         // "space-in-parens": [2, "always"],
         // Enforce the consistent use of either backticks, double, or single quotes
-        "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }]
+        "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+        // Enforce using tabs for indentation
+        "indent": [2, "tab", { "SwitchCase": 1 }]
     }
 };

.npmignore

@@ -1,12 +1,10 @@
-*~
+# Folders
 node_modules
+example
+.idea
+
+# Files
+*~
 .DS_Store
 npm-debug.log
-test_bundle.js
-test-built
-.idea
-examples
-bower.json
 webpack.config.js
-TODO.md
-karma.dev.js

CHANGELOG.md

@@ -1,5 +1,22 @@
 Changelog
 =========
+## 2.10.3
+* Update react-onclickoutside dependancy
+* Remove isValidDate check before rendering as implementation was causing crashes in some ednge cases.
+
+## 2.10.2
+* Move @types/react back to devDependencies
+* Add [demo](https://youcanbookme.github.io/react-datetime) app.
+
+## 2.10.1
+* Fix build files.
+
+## 2.10.0
+* Add isValidDate check before rendering so it doesn't render with an invalid date.
+
+## 2.9.0
+* Trigger callback method on view mode changes
+
 ## 2.8.11
 * Update TypeScript definitions
 * Replace deprecated React method with non-deprecated method

DateTime.d.ts

@@ -88,6 +88,11 @@ declare namespace ReactDatetimeClass {
          input (a string).
          */
         onBlur?: EventOrValueHandler<FocusEvent<any>>;
+        /*
+         Callback trigger when the view mode changes. The callback receives the selected view mode
+         string ('years', 'months', 'days', 'time') as only parameter.
+         */
+        onViewModeChange?: (viewMode: string) => void;
         /*
          The default view to display when the picker is shown. ('years', 'months', 'days', 'time')
          */

DateTime.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var assign = require('object-assign'),
-        PropTypes = require('prop-types'),
-        createClass = require('create-react-class'),
+	PropTypes = require('prop-types'),
+	createClass = require('create-react-class'),
 	moment = require('moment'),
 	React = require('react'),
 	CalendarContainer = require('./src/CalendarContainer')
-;
+	;
 
 var TYPES = PropTypes;
 var Datetime = createClass({
@@ -16,6 +16,7 @@ var Datetime = createClass({
 		onFocus: TYPES.func,
 		onBlur: TYPES.func,
 		onChange: TYPES.func,
+		onViewModeChange: TYPES.func,
 		locale: TYPES.string,
 		utc: TYPES.bool,
 		input: TYPES.bool,
@@ -41,6 +42,7 @@ var Datetime = createClass({
 			onFocus: nof,
 			onBlur: nof,
 			onChange: nof,
+			onViewModeChange: nof,
 			timeFormat: true,
 			timeConstraints: {},
 			dateFormat: true,
@@ -66,7 +68,7 @@ var Datetime = createClass({
 		var formats = this.getFormats( props ),
 			date = props.value || props.defaultValue,
 			selectedDate, viewDate, updateOn, inputValue
-		;
+			;
 
 		if ( date && typeof date === 'string' )
 			selectedDate = this.localMoment( date, formats.datetime );
@@ -103,11 +105,9 @@ var Datetime = createClass({
 	getUpdateOn: function( formats ) {
 		if ( formats.date.match(/[lLD]/) ) {
 			return 'days';
-		}
-		else if ( formats.date.indexOf('M') !== -1 ) {
+		} else if ( formats.date.indexOf('M') !== -1 ) {
 			return 'months';
-		}
-		else if ( formats.date.indexOf('Y') !== -1 ) {
+		} else if ( formats.date.indexOf('Y') !== -1 ) {
 			return 'years';
 		}
 
@@ -120,7 +120,7 @@ var Datetime = createClass({
 				time: props.timeFormat || ''
 			},
 			locale = this.localMoment( props.date, null, props ).localeData()
-		;
+			;
 
 		if ( formats.date === true ) {
 			formats.date = locale.longDateFormat('L');
@@ -192,21 +192,26 @@ var Datetime = createClass({
 				}
 			}
 		}
-
+		//we should only show a valid date if we are provided a isValidDate function. Removed in 2.10.3
+		/*if (this.props.isValidDate) {
+			updatedState.viewDate = updatedState.viewDate || this.state.viewDate;
+			while (!this.props.isValidDate(updatedState.viewDate)) {
+				updatedState.viewDate = updatedState.viewDate.add(1, 'day');
+			}
+		}*/
 		this.setState( updatedState );
 	},
 
 	onInputChange: function( e ) {
 		var value = e.target === null ? e : e.target.value,
 			localMoment = this.localMoment( value, this.state.inputFormat ),
 			update = { inputValue: value }
-		;
+			;
 
 		if ( localMoment.isValid() && !this.props.value ) {
 			update.selectedDate = localMoment;
 			update.viewDate = localMoment.clone().startOf('month');
-		}
-		else {
+		} else {
 			update.selectedDate = null;
 		}
 
@@ -224,6 +229,7 @@ var Datetime = createClass({
 	showView: function( view ) {
 		var me = this;
 		return function() {
+			me.state.currentView !== view && me.props.onViewModeChange( view );
 			me.setState({ currentView: view });
 		};
 	},
@@ -240,6 +246,7 @@ var Datetime = createClass({
 				viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value'), 10) ).startOf( type ),
 				currentView: nextViews[ type ]
 			});
+			me.props.onViewModeChange( nextViews[ type ] );
 		};
 	},
 
@@ -271,7 +278,7 @@ var Datetime = createClass({
 			state = this.state,
 			date = (state.selectedDate || state.viewDate).clone(),
 			nextType
-		;
+			;
 
 		// It is needed to set all the time properties
 		// to not to reset the time
@@ -296,7 +303,7 @@ var Datetime = createClass({
 			viewDate = this.state.viewDate,
 			currentDate = this.state.selectedDate || viewDate,
 			date
-    ;
+			;
 
 		if (target.className.indexOf('rdtDay') !== -1) {
 			if (target.className.indexOf('rdtNew') !== -1)
@@ -385,7 +392,7 @@ var Datetime = createClass({
 		var me = this,
 			formats = this.getFormats( this.props ),
 			props = {dateFormat: formats.date, timeFormat: formats.time}
-		;
+			;
 
 		this.componentProps.fromProps.forEach( function( name ) {
 			props[ name ] = me.props[ name ];
@@ -401,11 +408,12 @@ var Datetime = createClass({
 	},
 
 	render: function() {
+		// TODO: Make a function or clean up this code,
+		// logic right now is really hard to follow
 		var className = 'rdt' + (this.props.className ?
                   ( Array.isArray( this.props.className ) ?
                   ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
-			children = []
-		;
+			children = [];
 
 		if ( this.props.input ) {
 			var finalInputProps = assign({

README.md

@@ -7,13 +7,20 @@ A date and time picker in the same React.js component. It can be used as a datep
 
 This project started as a fork of https://github.com/quri/react-bootstrap-datetimepicker but the code and the API has changed a lot.
 
-## Usage
+## Installation
 
 Install using npm:
 ```sh
 npm install --save react-datetime
 ```
 
+Install using yarn:
+```sh
+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.
 
 
@@ -23,7 +30,7 @@ require('react-datetime');
 ...
 
 render: function() {
-  return <Datetime />;
+    return <Datetime />;
 }
 ```
 [See this example working](http://codepen.io/simeg/pen/mEmQmP).
@@ -35,7 +42,7 @@ render: function() {
 | Name         | Type    | Default | Description |
 | ------------ | ------- | ------- | ----------- |
 | **value** | `Date` | `new Date()` | Represents the selected date by the component, in order to use it as a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components). This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
-| **defaultValue** | `Date` | `new Date()` | Represents the selected date for the component to use it as a [uncontrolled component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components). This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
+| **defaultValue** | `Date` | `new Date()` | Represents the selected date for the component to use it as a [uncontrolled component](https://facebook.github.io/react/docs/uncontrolled-components.html). This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
 | **dateFormat**   | `boolean` or `string`  | `true` | Defines the format for the date. It accepts any [Moment.js date format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker, see [available units docs](#specify-available-units). |
 | **timeFormat**   | `boolean` or `string`  | `true` | Defines the format for the time. It accepts any [Moment.js time format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker, see [available units docs](#specify-available-units). |
 | **input** | `boolean` | `true` | Whether to show an input field to edit the date manually. |
@@ -45,6 +52,7 @@ render: function() {
 | **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. |
 | **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. |
+| **onViewModeChange** | `function` | empty function | Callback trigger when the view mode changes. The callback receives the selected view mode string (`years`, `months`, `days` or `time`) as only parameter.|
 | **viewMode** | `string` or `number` | `'days'` | The default view to display when the picker is shown (`'years'`, `'months'`, `'days'`, `'time'`). |
 | **className** | `string` or `string array` | `''` | Extra class name for the outermost markup element. |
 | **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). See [Customize the Input Appearance](#customize-the-input-appearance). |

demo/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

demo/README.md

@@ -0,0 +1,32 @@
+# react-datetime demo app
+
+[Demo](https://YouCanBookMe.github.io/react-datetime)
+
+#### How to Start
+
+```bash
+npm start
+```
+
+#### How to Deploy
+
+Run "deploy" from the demo directory:
+
+```bash
+cd ~/react-datetime/demo
+npm run deploy
+```
+
+#### How to Run the demo with your local changes
+
+If you are working on some change and you want to use the demo to test them out, you have to link your local "react-datetime" directory to the demo:
+
+```bash
+cd ~/react-datetime
+npm link
+
+cd demo
+npm link react-datetime
+
+npm start
+```