Add onSubtractTime and onAddTime hooks (arqex#508)

* Add onSubtractTime and onAddTime hooks

* Add tests for onSubtractTime and onAddTime hooks

* Fix mixup in describe blocks

* Give onSubtractTime and onAddTime hooks more logical names onNavigateBack and onNavigateForward

Author: DaanDD

DateTime.d.ts

@@ -98,6 +98,16 @@ declare namespace ReactDatetimeClass {
          string ('years', 'months', 'days', 'time') as only parameter.
          */
         onViewModeChange?: (viewMode: string) => void;
+        /*
+         Callback trigger when the user navigates to the previous month, year or decade.
+         The callback receives the amount and type ('month', 'year') as parameters.
+         */
+        onNavigateBack?: (amount: number, type: string) => void;
+        /*
+         Callback trigger when the user navigates to the next month, year or decade.
+         The callback receives the amount and type ('month', 'year') as parameters.
+         */
+        onNavigateForward?: (amount: number, type: string) => void;
         /*
          The default view to display when the picker is shown. ('years', 'months', 'days', 'time')
          */

DateTime.js

@@ -26,6 +26,8 @@ var Datetime = createClass({
 		onBlur: TYPES.func,
 		onChange: TYPES.func,
 		onViewModeChange: TYPES.func,
+		onNavigateBack: TYPES.func,
+		onNavigateForward: TYPES.func,
 		locale: TYPES.string,
 		utc: TYPES.bool,
 		input: TYPES.bool,
@@ -254,26 +256,29 @@ var Datetime = createClass({
 		};
 	},
 
-	addTime: function( amount, type, toSelected ) {
-		return this.updateTime( 'add', amount, type, toSelected );
-	},
-
 	subtractTime: function( amount, type, toSelected ) {
-		return this.updateTime( 'subtract', amount, type, toSelected );
+		var me = this;
+		return function() {
+			me.props.onNavigateBack( amount, type );
+			me.updateTime( 'subtract', amount, type, toSelected );
+		};
 	},
 
-	updateTime: function( op, amount, type, toSelected ) {
+	addTime: function( amount, type, toSelected ) {
 		var me = this;
-
 		return function() {
-			var update = {},
-				date = toSelected ? 'selectedDate' : 'viewDate'
-			;
+			me.props.onNavigateForward( amount, type );
+			me.updateTime( 'add', amount, type, toSelected );
+		};
+	},
 
-			update[ date ] = me.state[ date ].clone()[ op ]( amount, type );
+	updateTime: function( op, amount, type, toSelected ) {
+		var update = {},
+			date = toSelected ? 'selectedDate' : 'viewDate';
 
-			me.setState( update );
-		};
+		update[ date ] = this.state[ date ].clone()[ op ]( amount, type );
+
+		this.setState( update );
 	},
 
 	allowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'],
@@ -459,6 +464,8 @@ Datetime.defaultProps = {
 	onBlur: function() {},
 	onChange: function() {},
 	onViewModeChange: function() {},
+	onNavigateBack: function() {},
+	onNavigateForward: function() {},
 	timeFormat: true,
 	timeConstraints: {},
 	dateFormat: true,

README.md

@@ -54,6 +54,8 @@ render: function() {
 | **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. |
 | **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.|
+| **onNavigateBack** | `function` | empty function | Callback trigger when the user navigates to the previous month, year or decade. The callback receives the amount and type ('month', 'year') as parameters. |
+| **onNavigateForward** | `function` | empty function | Callback trigger when the user navigates to the next month, year or decade. The callback receives the amount and type ('month', 'year') as parameters. |
 | **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: `onClick`, `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). See [Customize the Input Appearance](#customize-the-input-appearance). |

react-datetime.d.ts

@@ -79,6 +79,16 @@ declare module ReactDatetime {
      string ('years', 'months', 'days', 'time') as only parameter.
     */
     onViewModeChange?: (viewMode: string) => void;
+    /*
+      Callback trigger when the user navigates to the previous month, year or decade.
+      The callback receives the amount and type ('month', 'year') as parameters.
+     */
+    onNavigateBack?: (amount: number, type: string) => void;
+    /*
+      Callback trigger when the user navigates to the next month, year or decade.
+      The callback receives the amount and type ('month', 'year') as parameters.
+     */
+    onNavigateForward?: (amount: number, type: string) => void;
     /*
      The default view to display when the picker is shown. ('years', 'months', 'days', 'time')
      */
@@ -92,8 +102,8 @@ declare module ReactDatetime {
      */
     inputProps?: Object;
     /*
-     Replace the rendering of the input element. The accepted function has openCalendar 
-     (a function which opens the calendar) and the default calculated props for the input. 
+     Replace the rendering of the input element. The accepted function has openCalendar
+     (a function which opens the calendar) and the default calculated props for the input.
      Must return a React component or null.
      */
     renderInput?: (props: Object, openCalendar: Function) => React.Component<any, any>;

test/tests.spec.js

@@ -1087,6 +1087,64 @@ describe('Datetime', () => {
 
 	});
 
+	describe('onNavigateForward', () => {
+		it('when moving to next month', () => {
+			const component = utils.createDatetime({ onNavigateForward: (amount, type) => {
+				expect(amount).toEqual(1);
+				expect(type).toEqual('months');
+			}});
+
+			utils.clickOnElement(component.find('.rdtNext'));
+		});
+
+		it('when moving to next year', () => {
+			const component = utils.createDatetime({ viewMode: 'months', onNavigateForward: (amount, type) => {
+				expect(amount).toEqual(1);
+				expect(type).toEqual('years');
+			}});
+
+			utils.clickOnElement(component.find('.rdtNext'));
+		});
+
+		it('when moving decade forward', () => {
+			const component = utils.createDatetime({ viewMode: 'years', onNavigateForward: (amount, type) => {
+				expect(amount).toEqual(10);
+				expect(type).toEqual('years');
+			}});
+
+			utils.clickOnElement(component.find('.rdtNext'));
+		});
+	});
+
+	describe('onNavigateBack', () => {
+		it('when moving to previous month', () => {
+			const component = utils.createDatetime({ onNavigateBack: (amount, type) => {
+				expect(amount).toEqual(1);
+				expect(type).toEqual('months');
+			}});
+
+			utils.clickOnElement(component.find('.rdtPrev'));
+		});
+
+		it('when moving to previous year', () => {
+			const component = utils.createDatetime({ viewMode: 'months', onNavigateBack: (amount, type) => {
+				expect(amount).toEqual(1);
+				expect(type).toEqual('years');
+			}});
+
+			utils.clickOnElement(component.find('.rdtPrev'));
+		});
+
+		it('when moving decade back', () => {
+			const component = utils.createDatetime({ viewMode: 'years', onNavigateBack: (amount, type) => {
+				expect(amount).toEqual(10);
+				expect(type).toEqual('years');
+			}});
+
+			utils.clickOnElement(component.find('.rdtPrev'));
+		});
+	});
+
 	describe('with set value', () => {
 		it('date value', () => {
 			const date = new Date(2000, 0, 15, 2, 2, 2, 2),