Merge pull request #186 from Mezzanine-UI/fix/calendar

fix(react/calendar): correct year offset of calendar in year mode
Mezzanine-UI · Feb 6, 2023 · 0ac8ed3 · 0ac8ed3
2 parents f39f08f + 77fbd75
commit 0ac8ed3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/packages/react/src/Calendar/useCalendarControlModifiers.spec.tsx b/packages/react/src/Calendar/useCalendarControlModifiers.spec.tsx
@@ -20,12 +20,12 @@ describe('useCalendarControlModifiers', () => {
     day,
   } = renderResult.result.current;
 
-  it('should add or remove 12 years for year modifier', () => {
+  it('should add or remove 10 years for year modifier', () => {
     const current = '2022-01-02';
     const [minus, add] = year;
 
-    expect(moment(current).diff(add(current), 'year')).toBe(-12);
-    expect(moment(current).diff(minus(current), 'year')).toBe(12);
+    expect(moment(current).diff(add(current), 'year')).toBe(-10);
+    expect(moment(current).diff(minus(current), 'year')).toBe(10);
   });
 
   it('should add or remove 1 year for month modifier', () => {

diff --git a/packages/react/src/Calendar/useCalendarControlModifiers.ts b/packages/react/src/Calendar/useCalendarControlModifiers.ts
@@ -1,4 +1,8 @@
-import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
+import {
+  CalendarMode,
+  DateType,
+  calendarYearModuler,
+} from '@mezzanine-ui/core/calendar';
 import { useMemo } from 'react';
 import { useCalendarContext } from './CalendarContext';
 
@@ -17,8 +21,8 @@ export function useCalendarControlModifiers(): UseCalendarControlModifiersResult
 
   return useMemo(() => ({
     year: [
-      (date) => addYear(date, -12),
-      (date) => addYear(date, 12),
+      (date) => addYear(date, -calendarYearModuler),
+      (date) => addYear(date, calendarYearModuler),
     ],
     month: [
       (date) => addYear(date, -1),

diff --git a/packages/react/src/Calendar/useCalendarControls.spec.tsx b/packages/react/src/Calendar/useCalendarControls.spec.tsx
@@ -185,7 +185,7 @@ describe('useCalendarControls', () => {
       expect(moment(initialReferenceDate).diff(result.current.referenceDate, 'year')).toBe(-1);
     });
 
-    it('should minus 12 year on referenceDate when mode="year"', () => {
+    it('should minus 10 year on referenceDate when mode="year"', () => {
       const initialReferenceDate = '2021-10-20';
       const { result } = renderHook(
         () => useCalendarControls(
@@ -206,10 +206,10 @@ describe('useCalendarControls', () => {
         onPrev();
       });
 
-      expect(moment(initialReferenceDate).diff(result.current.referenceDate, 'year')).toBe(12);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDate, 'year')).toBe(10);
     });
 
-    it('should add 12 year on referenceDate when mode="year"', () => {
+    it('should add 10 year on referenceDate when mode="year"', () => {
       const initialReferenceDate = '2021-10-20';
       const { result } = renderHook(
         () => useCalendarControls(
@@ -230,7 +230,7 @@ describe('useCalendarControls', () => {
         onNext();
       });
 
-      expect(moment(initialReferenceDate).diff(result.current.referenceDate, 'year')).toBe(-12);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDate, 'year')).toBe(-10);
     });
   });
 });
diff --git a/packages/react/src/DateRangePicker/useDateRangeCalendarControls.spec.tsx b/packages/react/src/DateRangePicker/useDateRangeCalendarControls.spec.tsx
@@ -344,8 +344,8 @@ describe('useDateRangeCalendarControls', () => {
         onFirstPrev();
       });
 
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(12);
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(2);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(10);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(0);
     });
 
     it('should onNext of the first calendar add 10 years on referenceDates when mode="year"', () => {
@@ -369,8 +369,8 @@ describe('useDateRangeCalendarControls', () => {
         onFirstNext();
       });
 
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(-12);
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(-22);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(-10);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(-20);
     });
 
     it('should onPrev of the second calendar minus 10 years on referenceDates when mode="year"', () => {
@@ -394,8 +394,8 @@ describe('useDateRangeCalendarControls', () => {
         onFirstPrev();
       });
 
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(12);
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(2);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(10);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(0);
     });
 
     it('should onNext of the second calendar add 10 years on referenceDates when mode="year"', () => {
@@ -419,8 +419,8 @@ describe('useDateRangeCalendarControls', () => {
         onFirstNext();
       });
 
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(-12);
-      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(-22);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[0], 'year')).toBe(-10);
+      expect(moment(initialReferenceDate).diff(result.current.referenceDates[1], 'year')).toBe(-20);
     });
 
     describe('should guard months and years when switching calendars', () => {