Merge pull request #16474 from ArekChr/fix/store_selected_month_new_d…

…ate_picker

fix: selected month while navigating to year list

src/components/CalendarPicker/calendarPickerPropTypes.js

@@ -15,20 +15,28 @@ const propTypes = {
     /** Default year to be set in the calendar picker. Used with navigation to set the correct year after going back to the view with calendar */
     selectedYear: PropTypes.string,
 
+    /** Default month to be set in the calendar picker. Used to keep last selected month after going back to the view with calendar */
+    selectedMonth: PropTypes.number,
+
     /** A function that is called when the date changed inside the calendar component */
     onChanged: PropTypes.func,
 
     /** A function called when the date is selected */
     onSelected: PropTypes.func,
+
+    /** A function called when the year picker is opened */
+    onYearPickerOpen: PropTypes.func,
 };
 
 const defaultProps = {
     value: new Date(),
     minDate: moment().year(CONST.CALENDAR_PICKER.MIN_YEAR).toDate(),
     maxDate: moment().year(CONST.CALENDAR_PICKER.MAX_YEAR).toDate(),
     selectedYear: null,
+    selectedMonth: null,
     onChanged: () => {},
     onSelected: () => {},
+    onYearPickerOpen: () => {},
 };
 
 export {propTypes, defaultProps};

src/components/CalendarPicker/index.js

@@ -25,6 +25,9 @@ class CalendarPicker extends React.PureComponent {
         if (props.selectedYear) {
             currentDateView = moment(currentDateView).set('year', props.selectedYear).toDate();
         }
+        if (props.selectedMonth != null) {
+            currentDateView = moment(currentDateView).set('month', props.selectedMonth).toDate();
+        }
         if (props.maxDate < currentDateView) {
             currentDateView = props.maxDate;
         } else if (props.minDate > currentDateView) {
@@ -68,6 +71,7 @@ class CalendarPicker extends React.PureComponent {
         const maxYear = moment(this.props.maxDate).year();
         const currentYear = this.state.currentDateView.getFullYear();
         Navigation.navigate(ROUTES.getYearSelectionRoute(minYear, maxYear, currentYear, Navigation.getActiveRoute()));
+        this.props.onYearPickerOpen(this.state.currentDateView);
     }
 
     /**

src/components/NewDatePicker/index.js

@@ -24,12 +24,14 @@ class NewDatePicker extends React.Component {
 
         this.state = {
             isPickerVisible: false,
+            selectedMonth: null,
             selectedDate: moment(props.value || props.defaultValue || undefined).toDate(),
         };
 
         this.setDate = this.setDate.bind(this);
         this.showPicker = this.showPicker.bind(this);
         this.hidePicker = this.hidePicker.bind(this);
+        this.setCurrentSelectedMonth = this.setCurrentSelectedMonth.bind(this);
 
         this.opacity = new Animated.Value(0);
 
@@ -59,6 +61,15 @@ class NewDatePicker extends React.Component {
         this.unsubscribeEscapeKey();
     }
 
+    /**
+     * Updates selected month when year picker is opened.
+     * This is used to keep the last visible month in the calendar when going back from year picker screen.
+     * @param {Date} currentDateView
+     */
+    setCurrentSelectedMonth(currentDateView) {
+        this.setState({selectedMonth: currentDateView.getMonth()});
+    }
+
     /**
      * Trigger the `onInputChange` handler when the user input has a complete date or is cleared
      * @param {Date} selectedDate
@@ -149,7 +160,9 @@ class NewDatePicker extends React.Component {
                             maxDate={this.props.maxDate}
                             value={this.state.selectedDate}
                             onSelected={this.setDate}
+                            selectedMonth={this.state.selectedMonth}
                             selectedYear={this.props.selectedYear}
+                            onYearPickerOpen={this.setCurrentSelectedMonth}
                         />
                     </Animated.View>
                     )