feat: support semantic for time panel (#926)

thinkasany · web-flow · commit 9283926602bd · 2025-04-16T15:15:56.000+08:00
diff --git a/docs/examples/time.tsx b/docs/examples/time.tsx
@@ -6,6 +6,13 @@ import zhCN from '../../src/locale/zh_CN';
 import '../../assets/index.less';
 
 const defaultValue = moment('2019-11-28 01:02:03');
+const testClassNames = {
+  input: 'test-input',
+  prefix: 'test-prefix',
+  suffix: 'test-suffix',
+  popupContent: 'test-popup-content',
+  popupItem: 'test-popup-item',
+}
 
 export default () => {
   return (
@@ -24,6 +31,9 @@ export default () => {
 
       <h3>TimePicker</h3>
       <Picker
+        classNames={testClassNames}
+        prefix="prefix"
+        suffixIcon="suffix"
         defaultValue={defaultValue}
         picker="time"
         locale={zhCN}
diff --git a/src/PickerInput/Selector/Icon.tsx b/src/PickerInput/Selector/Icon.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PickerContext from '../context';
+import classNames from 'classnames';
 
 export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
   icon?: React.ReactNode;
@@ -8,11 +9,14 @@ export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
 
 export default function Icon(props: IconProps) {
   const { icon, type, ...restProps } = props;
-
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, classNames: iconClassNames, styles } = React.useContext(PickerContext);
 
   return icon ? (
-    <span className={`${prefixCls}-${type}`} {...restProps}>
+    <span
+      className={classNames(`${prefixCls}-${type}`, iconClassNames?.suffix)}
+      style={styles?.suffix}
+      {...restProps}
+    >
       {icon}
     </span>
   ) : null;
diff --git a/src/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx
@@ -72,7 +72,12 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   } = props;
   const { value, onFocus, onBlur, onMouseUp } = props;
 
-  const { prefixCls, input: Component = 'input' } = React.useContext(PickerContext);
+  const {
+    prefixCls,
+    input: Component = 'input',
+    classNames: inputClassNames,
+    styles,
+  } = React.useContext(PickerContext);
   const inputPrefixCls = `${prefixCls}-input`;
 
   // ======================== Value =========================
@@ -380,12 +385,14 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
       ref={holderRef}
       className={classNames(
         inputPrefixCls,
+        inputClassNames?.input,
         {
           [`${inputPrefixCls}-active`]: active && showActiveCls,
           [`${inputPrefixCls}-placeholder`]: helped,
         },
         className,
       )}
+      style={styles?.input}
     >
       <Component
         ref={inputRef}
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
@@ -121,7 +121,7 @@ function RangeSelector<DateType extends object = any>(
   const rtl = direction === 'rtl';
 
   // ======================== Prefix ========================
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, classNames: selectorClassNames, styles } = React.useContext(PickerContext);
 
   // ========================== Id ==========================
   const ids = React.useMemo(() => {
@@ -238,7 +238,14 @@ function RangeSelector<DateType extends object = any>(
           onMouseDown?.(e);
         }}
       >
-        {prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
+        {prefix && (
+          <div
+            className={classNames(`${prefixCls}-prefix`, selectorClassNames?.prefix)}
+            style={styles?.prefix}
+          >
+            {prefix}
+          </div>
+        )}
         <Input
           ref={inputStartRef}
           {...getInputProps(0)}
diff --git a/src/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx
@@ -110,7 +110,7 @@ function SingleSelector<DateType extends object = any>(
   const rtl = direction === 'rtl';
 
   // ======================== Prefix ========================
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, classNames: selectorClassNames, styles } = React.useContext(PickerContext);
 
   // ========================= Refs =========================
   const rootRef = React.useRef<HTMLDivElement>();
@@ -225,7 +225,14 @@ function SingleSelector<DateType extends object = any>(
         onMouseDown?.(e);
       }}
     >
-      {prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
+      {prefix && (
+        <div
+          className={classNames(`${prefixCls}-prefix`, selectorClassNames?.prefix)}
+          style={styles?.prefix}
+        >
+          {prefix}
+        </div>
+      )}
       {selectorNode}
     </div>
   );
diff --git a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
-import { usePanelContext } from '../../context';
+import { PickerHackContext, usePanelContext } from '../../context';
 import useScrollTo from './useScrollTo';
 
 const SCROLL_DELAY = 300;
@@ -33,6 +33,7 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
     props;
 
   const { prefixCls, cellRender, now, locale } = usePanelContext<DateType>();
+  const { classNames: pickerClassNames, styles } = React.useContext(PickerHackContext);
 
   const panelPrefixCls = `${prefixCls}-time-panel`;
   const cellPrefixCls = `${prefixCls}-time-panel-cell`;
@@ -103,7 +104,8 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
         return (
           <li
             key={unitValue}
-            className={classNames(cellPrefixCls, {
+            style={styles?.popupItem}
+            className={classNames(cellPrefixCls, pickerClassNames?.popupItem, {
               [`${cellPrefixCls}-selected`]: value === unitValue,
               [`${cellPrefixCls}-disabled`]: disabled,
             })}
diff --git a/src/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx
@@ -4,6 +4,7 @@ import type { SharedPanelProps, SharedTimeProps } from '../../../interface';
 import { formatValue } from '../../../utils/dateUtil';
 import { PickerHackContext, usePanelContext } from '../../context';
 import TimeColumn, { type Unit } from './TimeColumn';
+import classNames from 'classnames';
 
 function isAM(hour: number) {
   return hour < 12;
@@ -38,7 +39,11 @@ export default function TimePanelBody<DateType extends object = any>(
 
   const value = values?.[0] || null;
 
-  const { onCellDblClick } = React.useContext(PickerHackContext);
+  const {
+    onCellDblClick,
+    classNames: pickerClassNames,
+    styles,
+  } = React.useContext(PickerHackContext);
 
   // ========================== Info ==========================
   const [getValidTime, rowHourUnits, getMinuteUnits, getSecondUnits, getMillisecondUnits] =
@@ -268,7 +273,10 @@ export default function TimePanelBody<DateType extends object = any>(
   };
 
   return (
-    <div className={`${prefixCls}-content`}>
+    <div
+      className={classNames(`${prefixCls}-content`, pickerClassNames?.popupContent)}
+      style={styles?.popupContent}
+    >
       {showHour && (
         <TimeColumn
           units={hourUnits}
diff --git a/src/interface.tsx b/src/interface.tsx
@@ -281,7 +281,7 @@ export type Components<DateType extends object = any> = Partial<
 >;
 
 // ========================= Picker =========================
-export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent' | 'popupItem';
+export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent' | 'popupItem' | 'suffix' | 'prefix' | 'input';
 
 export type CustomFormat<DateType> = (value: DateType) => string;
 
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
@@ -8,7 +8,7 @@ import KeyCode from '@rc-component/util/lib/KeyCode';
 import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
-import { PickerPanel, type PickerRef } from '../src';
+import Picker, { PickerPanel, type PickerRef } from '../src';
 import type { PanelMode, PickerMode } from '../src/interface';
 import momentGenerateConfig from '../src/generate/moment';
 import enUS from '../src/locale/en_US';
@@ -1406,6 +1406,62 @@ describe('Picker.Basic', () => {
     expect(item).toHaveClass(customClassNames.popupItem);
     expect(item).toHaveStyle(customStyles.popupItem);
   });
+  it('classNames and styles should support time panel', async () => {
+    const testClassNames = {
+      input: 'test-input',
+      prefix: 'test-prefix',
+      suffix: 'test-suffix',
+      popupContent: 'custom-content',
+      popupItem: 'custom-item',
+    };
+    const testStyles = {
+      input: { color: 'red' },
+      prefix: { color: 'green' },
+      suffix: { color: 'blue' },
+      popupContent: { color: 'blue' },
+      popupItem: { color: 'yellow' },
+    };
+    const defaultValue = moment('2019-11-28 01:02:03');
+    const { container } = render(
+      <Picker
+        classNames={testClassNames}
+        styles={testStyles}
+        prefix="prefix"
+        suffixIcon="suffix"
+        defaultValue={defaultValue}
+        picker="time"
+        locale={zhCN}
+        disabledTime={(now) => ({
+          disabledHours: () => [now.hours()],
+        })}
+        generateConfig={momentGenerateConfig}
+      />,
+    );
+    const input = container.querySelectorAll('.rc-picker-input')[0];
+    const prefix = container.querySelector('.rc-picker-prefix');
+    const suffix = container.querySelector('.rc-picker-suffix');
+    expect(input).toHaveClass(testClassNames.input);
+    expect(input).toHaveStyle(testStyles.input);
+    expect(prefix).toHaveClass(testClassNames.prefix);
+    expect(prefix).toHaveStyle(testStyles.prefix);
+    expect(suffix).toHaveClass(testClassNames.suffix);
+    expect(suffix).toHaveStyle(testStyles.suffix);
+    const { container: panel } = render(
+      <PickerPanel
+        classNames={testClassNames}
+        styles={testStyles}
+        picker="time"
+        locale={enUS}
+        generateConfig={momentGenerateConfig}
+      />,
+    );
+    const content = panel.querySelector('.rc-picker-content');
+    const item = panel.querySelector('.rc-picker-time-panel-cell');
+    expect(content).toHaveClass(testClassNames.popupContent);
+    expect(content).toHaveStyle(testStyles.popupContent);
+    expect(item).toHaveClass(testClassNames.popupItem);
+    expect(item).toHaveStyle(testStyles.popupItem);
+  });
   it('showTime config should have format', () => {
     render(
       <DayPicker
