chore: Duplicate Able to navigate between disabled dates with keyboard (#621)

Co-authored-by: dujiaqi <[email protected]>

Author: Yuiai01

src/PickerPanel.tsx

@@ -29,11 +29,11 @@ import type {
   OnPanelChange,
   Components,
 } from './interface';
-import { isEqual } from './utils/dateUtil';
+import { WEEK_DAY_COUNT, isEqual } from './utils/dateUtil';
 import PanelContext from './PanelContext';
 import type { DateRender } from './panels/DatePanel/DateBody';
 import { PickerModeMap } from './utils/uiUtil';
-import type { MonthCellRender } from './panels/MonthPanel/MonthBody';
+import { MONTH_COL_COUNT, type MonthCellRender } from './panels/MonthPanel/MonthBody';
 import RangeContext from './RangeContext';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
@@ -117,6 +117,9 @@ type MergedPickerPanelProps<DateType> = {
   picker?: PickerMode;
 } & OmitType<DateType>;
 
+// Calendar picker type
+const CALENDAR_PANEL_MODE: PanelMode[] = ['date', 'month'];
+
 function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   const {
     prefixCls = 'rc-picker',
@@ -290,9 +293,49 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     }
   };
 
+  const isSelectable = (key) => {
+    if (CALENDAR_PANEL_MODE.includes(mergedMode)) {
+      let date;
+      let operationFnc;
+      const isDateMode = mergedMode === 'date';
+      if (key === KeyCode.PAGE_UP || key === KeyCode.PAGE_DOWN) {
+        operationFnc = isDateMode ? generateConfig.addMonth : generateConfig.addYear;
+      } else {
+        operationFnc = isDateMode ? generateConfig.addDate : generateConfig.addMonth;
+      }
+
+      switch (key) {
+        case KeyCode.LEFT:
+        case KeyCode.PAGE_UP:
+          date = operationFnc(viewDate, -1);
+          break;
+        case KeyCode.RIGHT:
+        case KeyCode.PAGE_DOWN:
+          date = operationFnc(viewDate, 1);
+          break;
+        case KeyCode.UP:
+        case KeyCode.DOWN:
+          date = operationFnc(
+            viewDate,
+            Number(
+              `${key === KeyCode.UP ? '-' : ''}${isDateMode ? WEEK_DAY_COUNT : MONTH_COL_COUNT}`,
+            ),
+          );
+          break;
+      }
+
+      if (date) {
+        return !disabledDate?.(date);
+      }
+    }
+    return true;
+  };
+
   // ========================= Interactive ==========================
   const onInternalKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
     if (panelRef.current && panelRef.current.onKeyDown) {
+      let selectable = true;
+      const { which } = e;
       if (
         [
           KeyCode.LEFT,
@@ -302,11 +345,18 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
           KeyCode.PAGE_UP,
           KeyCode.PAGE_DOWN,
           KeyCode.ENTER,
-        ].includes(e.which)
+        ].includes(which)
       ) {
         e.preventDefault();
+        if (which !== KeyCode.ENTER && tabIndex === 0) {
+          selectable = isSelectable(which);
+        }
+      }
+
+      // Cannot use keyboard to select disabled date
+      if (selectable) {
+        return panelRef.current.onKeyDown(e);
       }
-      return panelRef.current.onKeyDown(e);
     }
 
     /* istanbul ignore next */

tests/keyboard.spec.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import MockDate from 'mockdate';
 import { act } from 'react-dom/test-utils';
 import KeyCode from 'rc-util/lib/KeyCode';
+import type { Wrapper } from './util/commonUtil';
 import {
   mount,
   getMoment,
   isSame,
   MomentPicker,
   MomentPickerPanel,
-  Wrapper,
   MomentRangePicker,
 } from './util/commonUtil';
 
@@ -396,10 +396,7 @@ describe('Picker.Keyboard', () => {
         jest.runAllTimers();
       });
       expect(
-        wrapper
-          .find('.rc-picker-input')
-          .last()
-          .hasClass('rc-picker-input-active'),
+        wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-active'),
       ).toBeTruthy();
       onCalendarChange.mockReset();
 
@@ -436,12 +433,7 @@ describe('Picker.Keyboard', () => {
         .first()
         .simulate('change', { target: { value: '2000-01-01' } });
       wrapper.keyDown(KeyCode.ESC);
-      expect(
-        wrapper
-          .find('input')
-          .first()
-          .props().value,
-      ).toEqual('');
+      expect(wrapper.find('input').first().props().value).toEqual('');
     });
 
     it('move based on current date on first keyboard event', () => {
@@ -523,15 +515,56 @@ describe('Picker.Keyboard', () => {
 
       wrapper.find('.rc-picker-panel').simulate('focus');
 
-      // 9-10 is disabled
+      // 9-02、9-04、9-10 is disabled
+      wrapper.keyDown(KeyCode.LEFT);
+      wrapper.keyDown(KeyCode.RIGHT);
       wrapper.keyDown(KeyCode.DOWN);
-      expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy();
-      expect(onChange).not.toHaveBeenCalled();
+      expect(onSelect).not.toHaveBeenCalled();
 
-      // 9-17 is enabled
+      // 7-27、8-27 is enabled
+      wrapper.keyDown(KeyCode.UP);
+      expect(isSame(onSelect.mock.calls[0][0], '1990-08-27')).toBeTruthy();
+      onSelect.mockReset();
+      wrapper.keyDown(KeyCode.PAGE_UP);
+      expect(isSame(onSelect.mock.calls[0][0], '1990-07-27')).toBeTruthy();
+      onSelect.mockReset();
+      wrapper.keyDown(KeyCode.PAGE_DOWN);
+      expect(isSame(onSelect.mock.calls[0][0], '1990-08-27')).toBeTruthy();
+    });
+
+    it('month panel', () => {
+      const onChange = jest.fn();
+      const onSelect = jest.fn();
+      const now = new Date();
+      const wrapper = mount(
+        <MomentPickerPanel
+          picker="month"
+          onSelect={onSelect}
+          onChange={onChange}
+          disabledDate={date => date.month() < now.getMonth()}
+        />,
+      );
+
+      wrapper.find('.rc-picker-panel').simulate('focus');
+
+      // PAGE_UP and PAGE_DOWN do not trigger the select
+      wrapper.keyDown(KeyCode.PAGE_UP);
+      wrapper.keyDown(KeyCode.PAGE_DOWN);
+      expect(onSelect).not.toHaveBeenCalled();
+
+      // The disabled date is before August
+      wrapper.keyDown(KeyCode.LEFT);
+      wrapper.keyDown(KeyCode.UP);
+      expect(onSelect).not.toHaveBeenCalled();
+
+      // August and subsequent dates are enable
+      wrapper.keyDown(KeyCode.RIGHT);
+      expect(isSame(onSelect.mock.calls[0][0], '1990-10-03')).toBeTruthy();
+      onSelect.mockReset();
+      wrapper.keyDown(KeyCode.LEFT);
+      onSelect.mockReset();
       wrapper.keyDown(KeyCode.DOWN);
-      expect(isSame(onSelect.mock.calls[1][0], '1990-09-17')).toBeTruthy();
-      expect(isSame(onChange.mock.calls[0][0], '1990-09-17')).toBeTruthy();
+      expect(isSame(onSelect.mock.calls[0][0], '1990-12-03')).toBeTruthy();
     });
   });
 });