fix: presets和maxDate的对比

fix: presets和maxDate的比较

Author: Roxannej

src/PickerInput/Popup/PresetPanel.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import type { ValueDate } from '../../interface';
+import moment from 'moment';
 
 export interface PresetPanelProps<ValueType = any> {
   prefixCls: string;
   presets: ValueDate<ValueType>[];
   onClick: (value: ValueType) => void;
   onHover: (value: ValueType) => void;
+  maxDate?: dateTy;
 }
 
 function executeValue<ValueType extends object>(value: ValueDate<ValueType>['value']): ValueType {
@@ -15,7 +17,7 @@ function executeValue<ValueType extends object>(value: ValueDate<ValueType>['val
 export default function PresetPanel<DateType extends object = any>(
   props: PresetPanelProps<DateType>,
 ) {
-  const { prefixCls, presets, onClick, onHover } = props;
+  const { prefixCls, presets, onClick, onHover, maxDate } = props;
 
   if (!presets.length) {
     return null;
@@ -24,22 +26,29 @@ export default function PresetPanel<DateType extends object = any>(
   return (
     <div className={`${prefixCls}-presets`}>
       <ul>
-        {presets.map(({ label, value }, index) => (
-          <li
-            key={index}
-            onClick={() => {
-              onClick(executeValue(value));
-            }}
-            onMouseEnter={() => {
-              onHover(executeValue(value));
-            }}
-            onMouseLeave={() => {
-              onHover(null);
-            }}
-          >
-            {label}
-          </li>
-        ))}
+        {presets.map(({ label, value }, index) => {
+          const isDisabled = moment(value).isAfter(maxDate) || moment(value).isSame(maxDate);
+          return (
+            <li
+              key={index}
+              onClick={() => {
+                if (!isDisabled) {
+                  onClick(executeValue(value));
+                }
+              }}
+              onMouseEnter={() => {
+                if (!isDisabled) {
+                  onHover(executeValue(value));
+                }
+              }}
+              onMouseLeave={() => {
+                onHover(null);
+              }}
+            >
+              {label}
+            </li>
+          );
+        })}
       </ul>
     </div>
   );

src/PickerInput/Popup/index.tsx

@@ -33,6 +33,8 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   needConfirm: boolean;
   isInvalid: (date: DateType | DateType[]) => boolean;
   onOk: VoidFunction;
+
+  maxDate?: DateType;
 }
 
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>) {
@@ -66,6 +68,8 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     defaultOpenValue,
     onOk,
     onSubmit,
+
+    maxDate,
   } = props;
 
   const { prefixCls } = React.useContext(PickerContext);
@@ -144,6 +148,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     <div className={`${prefixCls}-panel-layout`}>
       {/* `any` here since PresetPanel is reused for both Single & Range Picker which means return type is not stable */}
       <PresetPanel<any>
+        maxDate={maxDate}
         prefixCls={prefixCls}
         presets={presets}
         onClick={onPresetSubmit}

src/PickerInput/RangePicker.tsx

@@ -592,6 +592,7 @@ function RangePicker<DateType extends object = any>(
       onNow={onNow}
       // Render
       cellRender={onInternalCellRender}
+      maxDate={maxDate}
     />
   );
 

src/PickerInput/SinglePicker.tsx

@@ -521,6 +521,7 @@ function Picker<DateType extends object = any>(
       onNow={onNow}
       // Render
       cellRender={onInternalCellRender}
+      maxDate={maxDate}
     />
   );
 

tests/picker.spec.tsx

@@ -1115,6 +1115,32 @@ describe('Picker.Basic', () => {
     expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('1990-09-04');
   });
 
+  it('presets - disabled does not trigger', () => {
+    const onChange = jest.fn();
+    const onHover = jest.fn();
+
+    const futureDate = dayjs().add(1, 'day');
+    render(
+      <DayPicker
+        onChange={onChange}
+        onHover={onHover}
+        open
+        presets={[{ label: 'Future', value: futureDate }]}
+        maxDate={dayjs()} // maxDate 是今天，futureDate 是明天，禁用
+      />,
+    );
+
+    const presetEle = document.querySelector('.rc-picker-presets li');
+
+    // Hover
+    fireEvent.mouseEnter(presetEle);
+    expect(onHover).not.toHaveBeenCalled();
+
+    // Click
+    fireEvent.click(presetEle);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('presets support callback', () => {
     const onChange = jest.fn();
     const mockPresetValue = jest.fn().mockImplementationOnce(() => getDay('2000-09-03'));