fix: Cal onPanelChange (ant-design#24695)

* simple code * add test case * patch
07akioni · Jun 4, 2020 · e2b1c15 · e2b1c15
1 parent 2d385a7
commit e2b1c15
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/components/calendar/__tests__/index.test.js b/components/calendar/__tests__/index.test.js
@@ -127,15 +127,27 @@ describe('Calendar', () => {
     MockDate.reset();
   });
 
-  it('should trigger onPanelChange when click last month of date', () => {
-    const onPanelChange = jest.fn();
-    const date = new Moment('1990-09-03');
-    const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+  describe('onPanelChange', () => {
+    it('trigger when click last month of date', () => {
+      const onPanelChange = jest.fn();
+      const date = new Moment('1990-09-03');
+      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
 
-    wrapper.find('.ant-picker-cell').at(0).simulate('click');
+      wrapper.find('.ant-picker-cell').at(0).simulate('click');
 
-    expect(onPanelChange).toHaveBeenCalled();
-    expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
+      expect(onPanelChange).toHaveBeenCalled();
+      expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
+    });
+
+    it('not trigger when in same month', () => {
+      const onPanelChange = jest.fn();
+      const date = new Moment('1990-09-03');
+      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+
+      wrapper.find('.ant-picker-cell').at(10).simulate('click');
+
+      expect(onPanelChange).not.toHaveBeenCalled();
+    });
   });
 
   it('switch should work correctly without prop mode', async () => {

diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import classNames from 'classnames';
 import padStart from 'lodash/padStart';
 import { PickerPanel as RCPickerPanel } from 'rc-picker';
@@ -62,13 +63,13 @@ export interface CalendarProps<DateType> {
 }
 
 function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
+  function isSameYear(date1: DateType, date2: DateType) {
+    return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
+  }
+
   function isSameMonth(date1: DateType, date2: DateType) {
     return (
-      date1 === date2 ||
-      (date1 &&
-        date2 &&
-        generateConfig.getYear(date1) === generateConfig.getYear(date2) &&
-        generateConfig.getMonth(date1) === generateConfig.getMonth(date2))
+      isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2)
     );
   }
 
@@ -106,15 +107,15 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     // ====================== State =======================
 
     // Value
-    const [innerValue, setInnerValue] = React.useState(
-      () => value || defaultValue || generateConfig.getNow(),
-    );
-
-    const mergedValue = value || innerValue;
+    const [mergedValue, setMergedValue] = useMergedState(() => value || generateConfig.getNow(), {
+      defaultValue,
+      value,
+    });
 
     // Mode
-    const [innerMode, setInnerMode] = React.useState(() => mode || 'month');
-    const mergedMode = mode || innerMode;
+    const [mergedMode, setMergedMode] = useMergedState('month', {
+      value: mode,
+    });
     const panelMode = React.useMemo<'month' | 'date'>(
       () => (mergedMode === 'year' ? 'month' : 'date'),
       [mergedMode],
@@ -142,10 +143,16 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     };
 
     const triggerChange = (date: DateType) => {
-      setInnerValue(date);
+      setMergedValue(date);
 
       if (!isSameDate(date, mergedValue)) {
-        triggerPanelChange(date, mergedMode);
+        // Trigger when month panel switch month
+        if (
+          (panelMode === 'date' && !isSameMonth(date, mergedValue)) ||
+          (panelMode === 'month' && !isSameYear(date, mergedValue))
+        ) {
+          triggerPanelChange(date, mergedMode);
+        }
 
         if (onChange) {
           onChange(date);
@@ -154,7 +161,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     };
 
     const triggerModeChange = (newMode: CalendarMode) => {
-      setInnerMode(newMode);
+      setMergedMode(newMode);
       triggerPanelChange(mergedValue, newMode);
     };