chore: all move to classNames

Author: zombieJ

src/PickerPanel/PanelBody.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import type { DisabledDate } from '../interface';
 import { formatValue, isInRange, isSame } from '../utils/dateUtil';
@@ -45,6 +45,8 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
 
   const {
     prefixCls,
+    classNames,
+    styles,
     panelType: type,
     now,
     disabledDate: contextDisabledDate,
@@ -63,11 +65,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
   const cellPrefixCls = `${prefixCls}-cell`;
 
   // ============================= Context ==============================
-  const {
-    onCellDblClick,
-    classNames: pickerClassNames,
-    styles,
-  } = React.useContext(PickerHackContext);
+  const { onCellDblClick } = React.useContext(PickerHackContext);
 
   // ============================== Value ===============================
   const matchValues = (date: DateType) =>
@@ -127,7 +125,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
         <td
           key={col}
           title={title}
-          className={classNames(cellPrefixCls, pickerClassNames?.popupItem, {
+          className={cls(cellPrefixCls, classNames.item, {
             [`${cellPrefixCls}-disabled`]: disabled,
             [`${cellPrefixCls}-hover`]: (hoverValue || []).some((date) =>
               isSame(generateConfig, locale, currentDate, date, type),
@@ -142,7 +140,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
               matchValues(currentDate),
             ...getCellClassName(currentDate),
           })}
-          style={styles?.popupItem}
+          style={styles.item}
           onClick={() => {
             if (!disabled) {
               onSelect(currentDate);
@@ -186,14 +184,8 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
 
   // ============================== Render ==============================
   return (
-    <div
-      className={classNames(`${prefixCls}-body`, pickerClassNames?.popupBody)}
-      style={styles?.popupBody}
-    >
-      <table
-        className={classNames(`${prefixCls}-content`, pickerClassNames?.popupContent)}
-        style={styles?.popupContent}
-      >
+    <div className={cls(`${prefixCls}-body`, classNames.body)} style={styles.body}>
+      <table className={cls(`${prefixCls}-content`, classNames.content)} style={styles.content}>
         {headerCells && (
           <thead>
             <tr>{headerCells}</tr>

src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
-import { PickerHackContext, usePanelContext } from '../../context';
+import { usePanelContext } from '../../context';
 import useScrollTo from './useScrollTo';
 
 const SCROLL_DELAY = 300;
@@ -32,8 +32,7 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
   const { units, value, optionalValue, type, onChange, onHover, onDblClick, changeOnScroll } =
     props;
 
-  const { prefixCls, cellRender, now, locale } = usePanelContext<DateType>();
-  const { classNames: pickerClassNames, styles } = React.useContext(PickerHackContext);
+  const { prefixCls, cellRender, now, locale, classNames, styles } = usePanelContext<DateType>();
 
   const panelPrefixCls = `${prefixCls}-time-panel`;
   const cellPrefixCls = `${prefixCls}-time-panel-cell`;
@@ -104,8 +103,8 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
         return (
           <li
             key={unitValue}
-            style={styles?.popupItem}
-            className={classNames(cellPrefixCls, pickerClassNames?.popupItem, {
+            style={styles.item}
+            className={cls(cellPrefixCls, classNames.item, {
               [`${cellPrefixCls}-selected`]: value === unitValue,
               [`${cellPrefixCls}-disabled`]: disabled,
             })}

src/PickerPanel/TimePanel/TimePanelBody/index.tsx

@@ -4,7 +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';
+import cls from 'classnames';
 
 function isAM(hour: number) {
   return hour < 12;
@@ -29,6 +29,8 @@ export default function TimePanelBody<DateType extends object = any>(
 
   const {
     prefixCls,
+    classNames,
+    styles,
     values,
     generateConfig,
     locale,
@@ -39,11 +41,7 @@ export default function TimePanelBody<DateType extends object = any>(
 
   const value = values?.[0] || null;
 
-  const {
-    onCellDblClick,
-    classNames: pickerClassNames,
-    styles,
-  } = React.useContext(PickerHackContext);
+  const { onCellDblClick } = React.useContext(PickerHackContext);
 
   // ========================== Info ==========================
   const [getValidTime, rowHourUnits, getMinuteUnits, getSecondUnits, getMillisecondUnits] =
@@ -273,10 +271,7 @@ export default function TimePanelBody<DateType extends object = any>(
   };
 
   return (
-    <div
-      className={classNames(`${prefixCls}-content`, pickerClassNames?.popupContent)}
-      style={styles?.popupContent}
-    >
+    <div className={cls(`${prefixCls}-content`, classNames.content)} style={styles.content}>
       {showHour && (
         <TimeColumn
           units={hourUnits}

src/PickerPanel/index.tsx

@@ -378,17 +378,15 @@ function PickerPanel<DateType extends object = any>(
     DatePanel) as typeof DatePanel;
 
   // ======================== Context =========================
-  const mergedStyles = pickerStyles ?? panelStyles;
-  const mergedClassNames = pickerClassNames ?? panelClassNames;
   const parentHackContext = React.useContext(PickerHackContext);
   const pickerPanelContext = React.useMemo(
     () => ({
       ...parentHackContext,
       hideHeader,
-      classNames: mergedClassNames,
-      styles: mergedStyles,
+      classNames: pickerClassNames ?? panelClassNames ?? {},
+      styles: pickerStyles ?? panelStyles ?? {},
     }),
-    [parentHackContext, hideHeader, mergedClassNames, mergedStyles],
+    [parentHackContext, hideHeader, pickerClassNames, panelClassNames, pickerStyles, panelStyles],
   );
 
   // ======================== Warnings ========================