Add callback on view mode changes

Simon Egersand

2017-07-29 5377a9c3033f36d6adddc3aefcde415d50fdb3c1

Add callback on view mode changes

Original commit by josefernand:
https://github.com/YouCanBookMe/react-datetime/pull/302/commits/3e736469c4b2e6cf79aab0c416adb3d808a8b3c2

 DateTime.js

@@ -16,6 +16,7 @@
        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 @@
            onFocus: nof,
            onBlur: nof,
            onChange: nof,
            onViewModeChange: nof,
            timeFormat: true,
            timeConstraints: {},
            dateFormat: true,
@@ -221,6 +223,7 @@
    showView: function( view ) {
        var me = this;
        return function() {
            me.state.currentView !== view && me.props.onViewModeChange( view );
            me.setState({ currentView: view });
        };
    },
@@ -237,6 +240,7 @@
                viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value'), 10) ).startOf( type ),
                currentView: nextViews[ type ]
            });
            me.props.onViewModeChange( nextViews[ type ] );
        };
    },


 README.md

@@ -45,6 +45,7 @@
| **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). |

 test/tests.spec.js

@@ -882,6 +882,64 @@
            expect(onFocusFn).toHaveBeenCalledTimes(1);
        });

        describe('onViewModeChange', () => {
            it('when switch from days to time view mode', () => {
                const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
                    expect(viewMode).toEqual('time');
                }});
                expect(utils.isDayView(component)).toBeTruthy();
                utils.clickOnElement(component.find('.rdtTimeToggle'));
                expect(utils.isTimeView(component)).toBeTruthy();
            });

            it('when switch from time to days view mode', () => {
                const component = utils.createDatetime({ viewMode: 'time', onViewModeChange: (viewMode) => {
                    expect(viewMode).toEqual('days');
                }});
                expect(utils.isTimeView(component)).toBeTruthy();
                utils.clickOnElement(component.find('.rdtSwitch'));
                expect(utils.isDayView(component)).toBeTruthy();
            });

            it('when switch from days to months view mode', () => {
                const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
                    expect(viewMode).toEqual('months');
                }});
                expect(utils.isDayView(component)).toBeTruthy();
                utils.clickOnElement(component.find('.rdtSwitch'));
                expect(utils.isMonthView(component)).toBeTruthy();
            });

            it('when switch from months to years view mode', () => {
                const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
                    expect(viewMode).toEqual('years');
                }});
                expect(utils.isMonthView(component)).toBeTruthy();
                utils.clickOnElement(component.find('.rdtSwitch'));
                expect(utils.isYearView(component)).toBeTruthy();
            });

            it('only when switch from years to months view mode', () => {
                const component = utils.createDatetime({ viewMode: 'years', onViewModeChange: (viewMode) => {
                    expect(viewMode).toEqual('months');
                }});
                expect(utils.isYearView(component)).toBeTruthy();
                utils.clickOnElement(component.find('.rdtSwitch'));
                expect(utils.isYearView(component)).toBeTruthy();
                utils.clickNthYear(component, 2);
                expect(utils.isMonthView(component)).toBeTruthy();
            });

            it('when switch from months to days view mode', () => {
                const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
                    expect(viewMode).toEqual('days');
                }});
                expect(utils.isMonthView(component)).toBeTruthy();
                utils.clickNthMonth(component, 2);
                expect(utils.isDayView(component)).toBeTruthy();
            });
        });

        describe('onChange', () => {
            it('trigger only when last selection type is selected', () => {
                // By selection type I mean if you CAN select day, then selecting a month