feat: popup header

Author: zombieJ

src/PickerPanel/PanelHeader.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { isSameOrAfter } from '../utils/dateUtil';
 import { PickerHackContext, usePanelContext } from './context';
@@ -33,6 +33,8 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
 
   const {
     prefixCls,
+    classNames,
+    styles,
 
     // Icons
     prevIcon = '\u2039',
@@ -118,17 +120,14 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
   const superNextBtnCls = `${headerPrefixCls}-super-next-btn`;
 
   return (
-    <div className={headerPrefixCls}>
+    <div className={cls(headerPrefixCls, classNames.header)} style={styles.header}>
       {superOffset && (
         <button
           type="button"
           aria-label={locale.previousYear}
           onClick={() => onSuperOffset(-1)}
           tabIndex={-1}
-          className={classNames(
-            superPrevBtnCls,
-            disabledSuperOffsetPrev && `${superPrevBtnCls}-disabled`,
-          )}
+          className={cls(superPrevBtnCls, disabledSuperOffsetPrev && `${superPrevBtnCls}-disabled`)}
           disabled={disabledSuperOffsetPrev}
           style={hidePrev ? HIDDEN_STYLE : {}}
         >
@@ -141,7 +140,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           aria-label={locale.previousMonth}
           onClick={() => onOffset(-1)}
           tabIndex={-1}
-          className={classNames(prevBtnCls, disabledOffsetPrev && `${prevBtnCls}-disabled`)}
+          className={cls(prevBtnCls, disabledOffsetPrev && `${prevBtnCls}-disabled`)}
           disabled={disabledOffsetPrev}
           style={hidePrev ? HIDDEN_STYLE : {}}
         >
@@ -155,7 +154,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           aria-label={locale.nextMonth}
           onClick={() => onOffset(1)}
           tabIndex={-1}
-          className={classNames(nextBtnCls, disabledOffsetNext && `${nextBtnCls}-disabled`)}
+          className={cls(nextBtnCls, disabledOffsetNext && `${nextBtnCls}-disabled`)}
           disabled={disabledOffsetNext}
           style={hideNext ? HIDDEN_STYLE : {}}
         >
@@ -168,10 +167,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           aria-label={locale.nextYear}
           onClick={() => onSuperOffset(1)}
           tabIndex={-1}
-          className={classNames(
-            superNextBtnCls,
-            disabledSuperOffsetNext && `${superNextBtnCls}-disabled`,
-          )}
+          className={cls(superNextBtnCls, disabledSuperOffsetNext && `${superNextBtnCls}-disabled`)}
           disabled={disabledSuperOffsetNext}
           style={hideNext ? HIDDEN_STYLE : {}}
         >

tests/picker.spec.tsx

@@ -1353,12 +1353,14 @@ describe('Picker.Basic', () => {
   it('support classNames and styles', () => {
     const popupClassNames = {
       root: 'custom-popup',
+      header: 'custom-header',
       body: 'custom-body',
       content: 'custom-content',
       item: 'custom-item',
     };
     const popupStyles = {
       root: { color: 'red' },
+      header: { color: 'purple' },
       body: { color: 'green' },
       content: { color: 'blue' },
       item: { color: 'yellow' },
@@ -1377,13 +1379,18 @@ describe('Picker.Basic', () => {
 
     expect(document.querySelector('.rc-picker-dropdown')).toHaveClass(popupClassNames.root);
     expect(document.querySelector('.rc-picker-dropdown')).toHaveStyle(popupStyles.root);
-    const content = document.querySelector('.rc-picker-content');
+
+    const header = document.querySelector('.rc-picker-header');
     const body = document.querySelector('.rc-picker-body');
+    const content = document.querySelector('.rc-picker-content');
     const item = document.querySelector('.rc-picker-cell');
-    expect(content).toHaveClass(popupClassNames.content);
-    expect(content).toHaveStyle(popupStyles.content);
+
+    expect(header).toHaveClass(popupClassNames.header);
+    expect(header).toHaveStyle(popupStyles.header);
     expect(body).toHaveClass(popupClassNames.body);
     expect(body).toHaveStyle(popupStyles.body);
+    expect(content).toHaveClass(popupClassNames.content);
+    expect(content).toHaveStyle(popupStyles.content);
     expect(item).toHaveClass(popupClassNames.item);
     expect(item).toHaveStyle(popupStyles.item);
   });