fix(hooks): fix goToNextYear and goToPreviousYear bug

affects: @datepicker-react/hooks, @datepicker-react/styled ISSUES CLOSED: #3
t0gre · Aug 2, 2019 · 86577e5 · 86577e5
1 parent 399a5c6
commit 86577e5
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 10 deletions.
diff --git a/packages/hooks/lib/index.cjs.js b/packages/hooks/lib/index.cjs.js
@@ -956,10 +956,10 @@ function useDatepicker(e) {
         T(getNextActiveMonth(h, D, 1)), I(null)
       },
       goToPreviousYear: function() {
-        T(getNextActiveMonth(h, D, -11)), I(null)
+        T(getNextActiveMonth(h, D, -(12 - D + 1))), I(null)
       },
       goToNextYear: function() {
-        T(getNextActiveMonth(h, D, 11)), I(null)
+        T(getNextActiveMonth(h, D, 12 - D + 1)), I(null)
       },
     }
   )

diff --git a/packages/hooks/lib/index.esm.js b/packages/hooks/lib/index.esm.js
@@ -911,10 +911,10 @@ function Be(e) {
         w(Fe(p, v, 1)), b(null)
       },
       goToPreviousYear: function() {
-        w(Fe(p, v, -11)), b(null)
+        w(Fe(p, v, -(12 - v + 1))), b(null)
       },
       goToNextYear: function() {
-        w(Fe(p, v, 11)), b(null)
+        w(Fe(p, v, 12 - v + 1)), b(null)
       },
     }
   )

diff --git a/packages/hooks/src/useDatepicker/useDatepicker.test.ts b/packages/hooks/src/useDatepicker/useDatepicker.test.ts
@@ -76,6 +76,129 @@ describe('useDatepicker', () => {
     clear()
   })
 
+  test('change years, numberOfMonts = 1', () => {
+    advanceTo(new Date(2019, 2, 27, 0, 0, 0))
+    const {result} = renderHook(() =>
+      useDatepicker({
+        startDate: null,
+        endDate: null,
+        focusedInput: null,
+        onDatesChange: jest.fn(),
+        numberOfMonths: 1,
+      }),
+    )
+    expect(result.current.numberOfMonths).toBe(1)
+    expect(result.current.firstDayOfWeek).toBe(1)
+
+    // Check active months
+    expect(result.current.activeMonths[0].year).toBe(2019)
+    expect(result.current.activeMonths[0].month).toBe(2)
+
+    // next year
+    act(() => {
+      result.current.goToNextYear()
+    })
+    expect(result.current.activeMonths[0].year).toBe(2020)
+    expect(result.current.activeMonths[0].month).toBe(2)
+
+    // next year
+    act(() => {
+      result.current.goToPreviousYear()
+    })
+    expect(result.current.activeMonths[0].year).toBe(2019)
+    expect(result.current.activeMonths[0].month).toBe(2)
+
+    clear()
+  })
+
+  test('change years, numberOfMonts = 2', () => {
+    advanceTo(new Date(2019, 2, 27, 0, 0, 0))
+    const {result} = renderHook(() =>
+      useDatepicker({
+        startDate: null,
+        endDate: null,
+        focusedInput: null,
+        onDatesChange: jest.fn(),
+        numberOfMonths: 2,
+      }),
+    )
+    expect(result.current.numberOfMonths).toBe(2)
+    expect(result.current.firstDayOfWeek).toBe(1)
+
+    // Check active months
+    expect(result.current.activeMonths[0].year).toBe(2019)
+    expect(result.current.activeMonths[0].month).toBe(2)
+    expect(result.current.activeMonths[1].year).toBe(2019)
+    expect(result.current.activeMonths[1].month).toBe(3)
+
+    // next year
+    act(() => {
+      result.current.goToNextYear()
+    })
+    expect(result.current.activeMonths[0].year).toBe(2020)
+    expect(result.current.activeMonths[0].month).toBe(2)
+    expect(result.current.activeMonths[1].year).toBe(2020)
+    expect(result.current.activeMonths[1].month).toBe(3)
+
+    // next year
+    act(() => {
+      result.current.goToPreviousYear()
+    })
+    expect(result.current.activeMonths[0].year).toBe(2019)
+    expect(result.current.activeMonths[0].month).toBe(2)
+    expect(result.current.activeMonths[1].year).toBe(2019)
+    expect(result.current.activeMonths[1].month).toBe(3)
+
+    clear()
+  })
+
+  test('change years, numberOfMonts = 3', () => {
+    advanceTo(new Date(2019, 2, 27, 0, 0, 0))
+    const {result} = renderHook(() =>
+      useDatepicker({
+        startDate: null,
+        endDate: null,
+        focusedInput: null,
+        onDatesChange: jest.fn(),
+        numberOfMonths: 3,
+      }),
+    )
+    expect(result.current.numberOfMonths).toBe(3)
+    expect(result.current.firstDayOfWeek).toBe(1)
+
+    // Check active months
+    expect(result.current.activeMonths[0].year).toBe(2019)
+    expect(result.current.activeMonths[0].month).toBe(2)
+    expect(result.current.activeMonths[1].year).toBe(2019)
+    expect(result.current.activeMonths[1].month).toBe(3)
+    expect(result.current.activeMonths[2].year).toBe(2019)
+    expect(result.current.activeMonths[2].month).toBe(4)
+
+    // next year
+    act(() => {
+      result.current.goToNextYear()
+    })
+    expect(result.current.activeMonths[0].year).toBe(2020)
+    expect(result.current.activeMonths[0].month).toBe(2)
+    expect(result.current.activeMonths[1].year).toBe(2020)
+    expect(result.current.activeMonths[1].month).toBe(3)
+    expect(result.current.activeMonths[2].year).toBe(2020)
+    expect(result.current.activeMonths[2].month).toBe(4)
+
+    // next year
+    act(() => {
+      result.current.goToPreviousYear()
+    })
+    expect(result.current.activeMonths[0].year).toBe(2019)
+    expect(result.current.activeMonths[0].month).toBe(2)
+    expect(result.current.activeMonths[1].year).toBe(2019)
+    expect(result.current.activeMonths[1].month).toBe(3)
+    expect(result.current.activeMonths[2].year).toBe(2019)
+    expect(result.current.activeMonths[2].month).toBe(4)
+
+    clear()
+  })
+
   test('should set focus state', () => {
     const date = new Date(2019, 2, 27, 0, 0, 0)
     advanceTo(date)

diff --git a/packages/hooks/src/useDatepicker/useDatepicker.ts b/packages/hooks/src/useDatepicker/useDatepicker.ts
@@ -293,12 +293,12 @@ export function useDatepicker({
   }
 
   function goToPreviousYear() {
-    setActiveMonths(getNextActiveMonth(activeMonths, numberOfMonths, -11))
+    setActiveMonths(getNextActiveMonth(activeMonths, numberOfMonths, -(12 - numberOfMonths + 1)))
     setFocusedDate(null)
   }
 
   function goToNextYear() {
-    setActiveMonths(getNextActiveMonth(activeMonths, numberOfMonths, 11))
+    setActiveMonths(getNextActiveMonth(activeMonths, numberOfMonths, 12 - numberOfMonths + 1))
     setFocusedDate(null)
   }
 

diff --git a/packages/styled/lib/index.cjs.js b/packages/styled/lib/index.cjs.js
@@ -919,10 +919,10 @@ function Be(e) {
         D(Fe(b, u, 1)), C(null)
       },
       goToPreviousYear: function() {
-        D(Fe(b, u, -11)), C(null)
+        D(Fe(b, u, -(12 - u + 1))), C(null)
       },
       goToNextYear: function() {
-        D(Fe(b, u, 11)), C(null)
+        D(Fe(b, u, 12 - u + 1)), C(null)
       },
     }
   )

diff --git a/packages/styled/lib/index.esm.js b/packages/styled/lib/index.esm.js
@@ -910,10 +910,10 @@ function xe(e) {
         x(De(b, m, 1)), W(null)
       },
       goToPreviousYear: function() {
-        x(De(b, m, -11)), W(null)
+        x(De(b, m, -(12 - m + 1))), W(null)
       },
       goToNextYear: function() {
-        x(De(b, m, 11)), W(null)
+        x(De(b, m, 12 - m + 1)), W(null)
       },
     }
   )