feat: support footer

Author: zombieJ

src/PickerInput/Popup/Footer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
 import useTimeInfo from '../../hooks/useTimeInfo';
@@ -42,7 +42,13 @@ export default function Footer(props: FooterProps) {
     disabledDate,
   } = props;
 
-  const { prefixCls, locale, button: Button = 'button' } = React.useContext(PickerContext);
+  const {
+    prefixCls,
+    locale,
+    button: Button = 'button',
+    classNames,
+    styles,
+  } = React.useContext(PickerContext);
 
   // >>> Now
   const now = generateConfig.getNow();
@@ -70,7 +76,7 @@ export default function Footer(props: FooterProps) {
   const presetNode = showNow && (
     <li className={nowPrefixCls}>
       <a
-        className={classNames(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
+        className={cls(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
         aria-disabled={nowDisabled}
         onClick={onInternalNow}
       >
@@ -101,7 +107,10 @@ export default function Footer(props: FooterProps) {
   }
 
   return (
-    <div className={`${prefixCls}-footer`}>
+    <div
+      className={cls(`${prefixCls}-footer`, classNames.popup.footer)}
+      style={styles.popup.footer}
+    >
       {extraNode && <div className={`${prefixCls}-footer-extra`}>{extraNode}</div>}
       {rangeNode}
     </div>

tests/picker.spec.tsx

@@ -1357,13 +1357,15 @@ describe('Picker.Basic', () => {
       body: 'custom-body',
       content: 'custom-content',
       item: 'custom-item',
+      footer: 'custom-footer',
     };
     const popupStyles = {
       root: { color: 'red' },
       header: { color: 'purple' },
       body: { color: 'green' },
       content: { color: 'blue' },
       item: { color: 'yellow' },
+      footer: { color: 'orange' },
     };
     render(
       <DayPicker
@@ -1384,6 +1386,7 @@ describe('Picker.Basic', () => {
     const body = document.querySelector('.rc-picker-body');
     const content = document.querySelector('.rc-picker-content');
     const item = document.querySelector('.rc-picker-cell');
+    const footer = document.querySelector('.rc-picker-footer');
 
     expect(header).toHaveClass(popupClassNames.header);
     expect(header).toHaveStyle(popupStyles.header);
@@ -1393,6 +1396,8 @@ describe('Picker.Basic', () => {
     expect(content).toHaveStyle(popupStyles.content);
     expect(item).toHaveClass(popupClassNames.item);
     expect(item).toHaveStyle(popupStyles.item);
+    expect(footer).toHaveClass(popupClassNames.footer);
+    expect(footer).toHaveStyle(popupStyles.footer);
   });
 
   it('support classNames and styles for panel', () => {