feat: semantic support content、body (#922)

* feat: semantic support content、body

* update name

Author: thinkasany

src/PickerInput/RangePicker.tsx

@@ -693,8 +693,10 @@ function RangePicker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
+      styles,
+      classNames,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input],
+    [prefixCls, locale, generateConfig, components.button, components.input, classNames, styles],
   );
 
   // ======================== Effect ========================

src/PickerInput/SinglePicker.tsx

@@ -577,8 +577,10 @@ function Picker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
+      styles,
+      classNames,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input],
+    [prefixCls, locale, generateConfig, components.button, components.input, styles, classNames],
   );
 
   // ======================== Effect ========================

src/PickerInput/context.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { GenerateConfig } from '../generate';
-import type { Components, Locale } from '../interface';
+import type { Components, Locale, SemanticStructure } from '../interface';
 
 export interface PickerContextProps<DateType = any> {
   prefixCls: string;
@@ -9,7 +9,8 @@ export interface PickerContextProps<DateType = any> {
   /** Customize button component */
   button?: Components['button'];
   input?: Components['input'];
-
+  styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticStructure, string>>;
 }
 
 const PickerContext = React.createContext<PickerContextProps>(null!);

src/PickerPanel/PanelBody.tsx

@@ -63,7 +63,11 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
   const cellPrefixCls = `${prefixCls}-cell`;
 
   // ============================= Context ==============================
-  const { onCellDblClick } = React.useContext(PickerHackContext);
+  const {
+    onCellDblClick,
+    classNames: pickerClassNames,
+    styles,
+  } = React.useContext(PickerHackContext);
 
   // ============================== Value ===============================
   const matchValues = (date: DateType) =>
@@ -181,8 +185,14 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
 
   // ============================== Render ==============================
   return (
-    <div className={`${prefixCls}-body`}>
-      <table className={`${prefixCls}-content`}>
+    <div
+      className={classNames(`${prefixCls}-body`, pickerClassNames?.popupBody)}
+      style={styles?.popupBody}
+    >
+      <table
+        className={classNames(`${prefixCls}-content`, pickerClassNames?.popupContent)}
+        style={styles?.popupContent}
+      >
         {headerCells && (
           <thead>
             <tr>{headerCells}</tr>

src/PickerPanel/context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PanelMode, SharedPanelProps } from '../interface';
+import type { PanelMode, SemanticStructure, SharedPanelProps } from '../interface';
 
 export interface PanelContextProps<DateType extends object = any>
   extends Pick<
@@ -106,6 +106,8 @@ export interface PickerHackContextProps {
   hideNext?: boolean;
   hideHeader?: boolean;
   onCellDblClick?: () => void;
+  styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticStructure, string>>;
 }
 
 /**

src/PickerPanel/index.tsx

@@ -183,7 +183,15 @@ function PickerPanel<DateType extends object = any>(
     hideHeader,
   } = props;
 
-  const mergedPrefixCls = React.useContext(PickerContext)?.prefixCls || prefixCls || 'rc-picker';
+  // ======================== Context ========================
+  const {
+    prefixCls: contextPrefixCls,
+    classNames: pickerClassNames,
+    styles,
+  } = React.useContext(PickerContext) || {};
+
+  // ======================== prefixCls ========================
+  const mergedPrefixCls = contextPrefixCls || prefixCls || 'rc-picker';
 
   // ========================== Refs ==========================
   const rootRef = React.useRef<HTMLDivElement>();
@@ -366,8 +374,8 @@ function PickerPanel<DateType extends object = any>(
   // ======================== Context =========================
   const parentHackContext = React.useContext(PickerHackContext);
   const pickerPanelContext = React.useMemo(
-    () => ({ ...parentHackContext, hideHeader }),
-    [parentHackContext, hideHeader],
+    () => ({ ...parentHackContext, hideHeader, classNames: pickerClassNames, styles }),
+    [parentHackContext, hideHeader, pickerClassNames, styles],
   );
 
   // ======================== Warnings ========================

src/interface.tsx

@@ -281,7 +281,7 @@ export type Components<DateType extends object = any> = Partial<
 >;
 
 // ========================= Picker =========================
-export type SemanticStructure = 'popup';
+export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent';
 
 export type CustomFormat<DateType> = (value: DateType) => string;
 

tests/picker.spec.tsx

@@ -1349,17 +1349,27 @@ describe('Picker.Basic', () => {
     );
   });
 
-  it('classNames.popup', () => {
-    render(
-      <DayPicker
-        classNames={{
-          popup: 'bamboo',
-        }}
-        open
-      />,
-    );
-
-    expect(document.querySelector('.rc-picker-dropdown')).toHaveClass('bamboo');
+  it('support classNames and styles', () => {
+    const customClassNames = {
+      popup: 'custom-popup',
+      popupBody: 'custom-body',
+      popupContent: 'custom-content',
+    };
+    const customStyles = {
+      popup: { color: 'red' },
+      popupBody: { color: 'green' },
+      popupContent: { color: 'blue' },
+    };
+    render(<DayPicker classNames={customClassNames} styles={customStyles} open />);
+
+    expect(document.querySelector('.rc-picker-dropdown')).toHaveClass(customClassNames.popup);
+    expect(document.querySelector('.rc-picker-dropdown')).toHaveStyle(customStyles.popup);
+    const content = document.querySelector('.rc-picker-content');
+    const body = document.querySelector('.rc-picker-body');
+    expect(content).toHaveClass(customClassNames.popupContent);
+    expect(content).toHaveStyle(customStyles.popupContent);
+    expect(body).toHaveClass(customClassNames.popupBody);
+    expect(body).toHaveStyle(customStyles.popupBody);
   });
 
   it('showTime config should have format', () => {