feat: Add okButtonProps to time picker (#49657)

* feat: add `okButtonProps` to pickers' props

* doc: add okButtonProps to date, time picker documentation

* test: add new test case for TimePicker

components/date-picker/PickerButton.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import Button from '../button';
-import type { ButtonProps } from '../button';
-
-export default function PickerButton(props: ButtonProps) {
-  return <Button size="small" type="primary" {...props} />;
-}

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -4,8 +4,8 @@ import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
 import classNames from 'classnames';
-import { RangePicker as RCRangePicker } from 'rc-picker';
 import type { PickerRef } from 'rc-picker';
+import { RangePicker as RCRangePicker } from 'rc-picker';
 import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 
 import ContextIsolator from '../../_util/ContextIsolator';
@@ -49,6 +49,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
       status: customStatus,
       rootClassName,
       variant: customVariant,
+      okButtonProps,
       ...restProps
     } = props;
 
@@ -77,7 +78,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
     const [mergedAllowClear] = useIcons(props, prefixCls);
 
     // ================== components ==================
-    const mergedComponents = useComponents(components);
+    const mergedComponents = useComponents(components, okButtonProps);
 
     // ===================== Size =====================
     const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -3,8 +3,8 @@ import { forwardRef, useContext, useImperativeHandle } from 'react';
 import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 import classNames from 'classnames';
-import RCPicker from 'rc-picker';
 import type { PickerRef } from 'rc-picker';
+import RCPicker from 'rc-picker';
 import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import type { PickerMode } from 'rc-picker/lib/interface';
 
@@ -56,6 +56,7 @@ export default function generatePicker<DateType extends AnyObject>(
         status: customStatus,
         variant: customVariant,
         onCalendarChange,
+        okButtonProps,
         ...restProps
       } = props;
 
@@ -119,7 +120,7 @@ export default function generatePicker<DateType extends AnyObject>(
       const [mergedAllowClear, removeIcon] = useIcons(props, prefixCls);
 
       // ================== components ==================
-      const mergedComponents = useComponents(components);
+      const mergedComponents = useComponents(components, okButtonProps);
 
       // ===================== Size =====================
       const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);

components/date-picker/generatePicker/interface.ts

@@ -1,6 +1,6 @@
 import type {
-  PickerRef,
   PickerProps as RcPickerProps,
+  PickerRef,
   RangePickerProps as RcRangePickerProps,
 } from 'rc-picker';
 import type { Locale as RcPickerLocale } from 'rc-picker/lib/interface';
@@ -10,6 +10,7 @@ import type { AnyObject } from '../../_util/type';
 import type { SizeType } from '../../config-provider/SizeContext';
 import type { Variant } from '../../config-provider';
 import type { TimePickerLocale } from '../../time-picker';
+import type { ButtonProps } from '../../button/button';
 
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 
@@ -61,6 +62,7 @@ type InjectDefaultProps<Props> = Omit<Props, 'locale' | 'generateConfig' | 'hide
   popupClassName?: string;
   rootClassName?: string;
   popupStyle?: React.CSSProperties;
+  okButtonProps?: ButtonProps;
 };
 
 /** Base Single Picker props */

components/date-picker/generatePicker/useComponents.ts

@@ -1,14 +0,0 @@
-import { useMemo } from 'react';
-import type { Components } from 'rc-picker/lib/interface';
-
-import PickerButton from '../PickerButton';
-
-export default function useComponents(components?: Components) {
-  return useMemo(
-    () => ({
-      button: PickerButton,
-      ...components,
-    }),
-    [components],
-  );
-}

components/date-picker/generatePicker/useComponents.tsx

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import type { Components } from 'rc-picker/lib/interface';
+
+import type { ButtonProps } from '../../button/button';
+import Button from '../../button/button';
+
+export default function useComponents(components?: Components, buttonProps?: ButtonProps) {
+  function PickerButton(props: ButtonProps) {
+    const mergedProps = { size: 'small', type: 'primary', ...buttonProps, ...props } as ButtonProps;
+
+    return <Button {...mergedProps} />;
+  }
+
+  return useMemo(
+    () => ({
+      button: PickerButton,
+      ...components,
+    }),
+    [components],
+  );
+}

components/date-picker/index.en-US.md

@@ -154,6 +154,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 | onOk | Callback when click ok button | function() | - |  |
+| okButtonProps | The ok button props | [ButtonProps](/components/button/#api) | - |  |
 | onPanelChange | Callback function for panel changing | function(value, mode) | - |  |
 
 ### DatePicker\[picker=year]

components/time-picker/__tests__/index.test.tsx

@@ -99,4 +99,11 @@ describe('TimePicker', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('should modify the ok button', () => {
+    const { container } = render(
+      <TimePicker open okButtonProps={{ className: 'test-ok-button' }} />,
+    );
+    expect(Array.from(container.children)).toMatchSnapshot();
+  });
 });

components/time-picker/index.en-US.md

@@ -82,6 +82,7 @@ dayjs.extend(customParseFormat)
 | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
+| okButtonProps | The ok button props | [ButtonProps](/components/button/#api) | - |  |
 
 #### DisabledTime