refactor(datepicker): Rewrite prev/nextPage() as changePage()

Author: mst101

src/components/Datepicker.vue

@@ -73,6 +73,7 @@
           :show-header="showHeader"
           :translation="translation"
           :use-utc="useUtc"
+          :view="view || computedInitialView"
           :year-range="yearPickerRange"
           @page-change="handlePageChange"
           @select="handleSelect"

src/components/PickerDay.vue

@@ -7,8 +7,7 @@
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
-      @next="nextPage"
-      @previous="previousPage"
+      @page-change="changePage($event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
       <span
@@ -213,16 +212,6 @@ export default {
     },
   },
   methods: {
-    /**
-     * Changes the page up or down (overrides changePage in pickerMixin)
-     * @param {Number} incrementBy
-     */
-    changePage(incrementBy) {
-      const date = this.pageDate
-      this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy)
-
-      this.$emit('page-change', date)
-    },
     /**
      * Set the class for a specific day
      * @param {Object} day

src/components/PickerHeader.vue

@@ -3,7 +3,7 @@
     <span
       class="prev"
       :class="{ disabled: isLeftNavDisabled }"
-      @click="$emit(isRtl ? 'next' : 'previous')"
+      @click="$emit('page-change', -1)"
     >
       <slot name="prevIntervalBtn">
         <span class="default">&lt;</span>
@@ -13,7 +13,7 @@
     <span
       class="next"
       :class="{ disabled: isRightNavDisabled }"
-      @click="$emit(isRtl ? 'previous' : 'next')"
+      @click="$emit('page-change', 1)"
     >
       <slot name="nextIntervalBtn">
         <span class="default">&gt;</span>

src/components/PickerMonth.vue

@@ -7,8 +7,7 @@
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
-      @next="nextPage"
-      @previous="previousPage"
+      @page-change="changePage($event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
       <span

src/components/PickerYear.vue

@@ -7,8 +7,7 @@
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
-      @next="nextPage"
-      @previous="previousPage"
+      @page-change="changePage($event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
       <span>
@@ -145,22 +144,6 @@ export default {
         this.selectedDate && year === this.utils.getFullYear(this.selectedDate)
       )
     },
-    /**
-     * Increments the page (overrides nextPage in pickerMixin)
-     */
-    nextPage() {
-      if (!this.isNextDisabled) {
-        this.changePage(this.yearRange)
-      }
-    },
-    /**
-     * Decrements the page (overrides previousPage in pickerMixin)
-     */
-    previousPage() {
-      if (!this.isPreviousDisabled) {
-        this.changePage(-this.yearRange)
-      }
-    },
   },
 }
 </script>

src/mixins/pickerMixin.vue

@@ -43,6 +43,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    view: {
+      type: String,
+      default: 'day',
+    },
   },
   data() {
     return {
@@ -71,10 +75,17 @@ export default {
      * @param {Number} incrementBy
      */
     changePage(incrementBy) {
-      const date = this.pageDate
-      this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
+      const { pageDate, utils } = this
+      const units =
+        this.view === 'year' ? incrementBy * this.yearRange : incrementBy
+
+      if (this.view === 'day') {
+        utils.setMonth(pageDate, utils.getMonth(pageDate) + units)
+      } else {
+        utils.setFullYear(pageDate, utils.getFullYear(pageDate) + units)
+      }
 
-      this.$emit('page-change', date)
+      this.$emit('page-change', pageDate)
     },
     /**
      * Emits a 'select' or 'select-disabled' event
@@ -87,22 +98,6 @@ export default {
         this.$emit('select', cell)
       }
     },
-    /**
-     * Increment the current page
-     */
-    nextPage() {
-      if (!this.isNextDisabled) {
-        this.changePage(+1)
-      }
-    },
-    /**
-     * Decrement the page
-     */
-    previousPage() {
-      if (!this.isPreviousDisabled) {
-        this.changePage(-1)
-      }
-    },
   },
 }
 </script>

test/unit/specs/PickerDay/disabledDates.spec.js

@@ -14,6 +14,7 @@ describe('PickerDay: disabled', () => {
           from: new Date(2016, 9, 26),
         },
         pageDate: new Date(2016, 9, 1),
+        view: 'day',
       },
     })
   })
@@ -32,11 +33,9 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.emitted('select')).toBeFalsy()
   })
 
-  it('cannot change to a disabled month', () => {
-    wrapper.vm.previousPage()
-    expect(wrapper.vm.pageDate.getMonth()).toEqual(9)
-    wrapper.vm.nextPage()
-    expect(wrapper.vm.pageDate.getMonth()).toEqual(9)
+  it('sets `isNextDisabled` and `isPreviousDisabled` correctly', () => {
+    expect(wrapper.vm.isNextDisabled).toBeTruthy()
+    expect(wrapper.vm.isPreviousDisabled).toBeTruthy()
   })
 
   it('can change month despite having a disabled month', () => {

test/unit/specs/PickerDay/pickerDay.spec.js

@@ -10,6 +10,7 @@ describe('PickerDay: DOM', () => {
       propsData: {
         translation: en,
         pageDate: new Date(2018, 1, 1),
+        view: 'day',
       },
     })
   })
@@ -28,12 +29,12 @@ describe('PickerDay: DOM', () => {
   })
 
   it('can set the next month', () => {
-    wrapper.vm.nextPage()
+    wrapper.vm.changePage(1)
     expect(wrapper.emitted('page-change')[0][0].getMonth()).toEqual(2)
   })
 
   it('can set the previous month', () => {
-    wrapper.vm.previousPage()
+    wrapper.vm.changePage(-1)
     expect(wrapper.emitted('page-change')[0][0].getMonth()).toEqual(0)
   })
 

test/unit/specs/PickerMonth/disabledMonths.spec.js

@@ -15,6 +15,7 @@ describe('PickerMonth', () => {
           to: new Date(2018, 2, 14),
           from: new Date(2018, 4, 15),
         },
+        view: 'month',
       },
     })
   })

test/unit/specs/PickerMonth/pickerMonth.spec.js

@@ -10,6 +10,7 @@ describe('PickerMonth', () => {
       propsData: {
         translation: en,
         pageDate: new Date(2018, 1, 1),
+        view: 'month',
       },
     })
   })
@@ -38,30 +39,12 @@ describe('PickerMonth', () => {
   })
 
   it('can set the next year', async () => {
-    wrapper.vm.nextPage()
-    expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2019)
-
-    await wrapper.setProps({
-      disabledDates: {
-        from: new Date(2018, 1, 1),
-      },
-    })
-
-    wrapper.vm.nextPage()
+    wrapper.vm.changePage(1)
     expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2019)
   })
 
   it('can set the previous year', async () => {
-    wrapper.vm.previousPage()
-    expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2017)
-
-    await wrapper.setProps({
-      disabledDates: {
-        to: new Date(2018, 1, 1),
-      },
-    })
-
-    wrapper.vm.previousPage()
+    wrapper.vm.changePage(-1)
     expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2017)
   })