feat: onPanelChange also trigger when panel switch (#26)

* prepare for multiple trigger

* update test case

Author: zombieJ

src/PickerPanel.tsx

@@ -241,12 +241,18 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     () => mergedMode,
   );
 
-  const onInternalPanelChange = (newMode: PanelMode, viewValue: DateType) => {
-    const nextMode = getInternalNextMode(newMode);
+  const onInternalPanelChange = (
+    newMode: PanelMode | null,
+    viewValue: DateType,
+  ) => {
+    const nextMode = getInternalNextMode(newMode || mergedMode);
     setSourceMode(mergedMode);
     setInnerMode(nextMode);
 
-    if (onPanelChange && mergedMode !== nextMode) {
+    if (
+      onPanelChange &&
+      (mergedMode !== nextMode || isEqual(generateConfig, viewDate, viewDate))
+    ) {
       onPanelChange(viewValue, nextMode);
     }
   };

src/interface.ts

@@ -80,7 +80,7 @@ export interface PanelSharedProps<DateType> {
 
   onSelect: OnSelect<DateType>;
   onViewDateChange: (value: DateType) => void;
-  onPanelChange: (mode: PanelMode, viewValue: DateType) => void;
+  onPanelChange: (mode: PanelMode | null, viewValue: DateType) => void;
 }
 
 export interface DisabledTimes {

src/panels/DatePanel/index.tsx

@@ -60,10 +60,14 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
 
   // ==================== View Operation ====================
   const onYearChange = (diff: number) => {
-    onViewDateChange(generateConfig.addYear(viewDate, diff));
+    const newDate = generateConfig.addYear(viewDate, diff);
+    onViewDateChange(newDate);
+    onPanelChange(null, newDate);
   };
   const onMonthChange = (diff: number) => {
-    onViewDateChange(generateConfig.addMonth(viewDate, diff));
+    const newDate = generateConfig.addMonth(viewDate, diff);
+    onViewDateChange(newDate);
+    onPanelChange(null, newDate);
   };
 
   return (

src/panels/DecadePanel/index.tsx

@@ -55,9 +55,12 @@ function DecadePanel<DateType>(props: DecadePanelProps<DateType>) {
 
   // ==================== View Operation ====================
   const onDecadesChange = (diff: number) => {
-    onViewDateChange(
-      generateConfig.addYear(viewDate, diff * DECADE_DISTANCE_COUNT),
+    const newDate = generateConfig.addYear(
+      viewDate,
+      diff * DECADE_DISTANCE_COUNT,
     );
+    onViewDateChange(newDate);
+    onPanelChange(null, newDate);
   };
 
   const onInternalSelect = (date: DateType) => {

src/panels/MonthPanel/index.tsx

@@ -46,7 +46,9 @@ function MonthPanel<DateType>(props: MonthPanelProps<DateType>) {
 
   // ==================== View Operation ====================
   const onYearChange = (diff: number) => {
-    onViewDateChange(generateConfig.addYear(viewDate, diff));
+    const newDate = generateConfig.addYear(viewDate, diff);
+    onViewDateChange(newDate);
+    onPanelChange(null, newDate);
   };
 
   return (

src/panels/YearPanel/index.tsx

@@ -55,7 +55,9 @@ function YearPanel<DateType>(props: YearPanelProps<DateType>) {
 
   // ==================== View Operation ====================
   const onDecadeChange = (diff: number) => {
-    onViewDateChange(generateConfig.addYear(viewDate, diff * 10));
+    const newDate = generateConfig.addYear(viewDate, diff * 10);
+    onViewDateChange(newDate);
+    onPanelChange(null, newDate);
   };
 
   return (

tests/picker.spec.tsx

@@ -372,6 +372,7 @@ describe('Picker.Basic', () => {
 
         // Next page
         wrapper.find('.rc-picker-header-super-next-btn').simulate('click');
+        expectPanelChange('2090-09-03', 'decade');
 
         // Select decade
         wrapper.selectCell('2010-2019');