From f836309e7fbd65dc511def0ba009221f86acf858 Mon Sep 17 00:00:00 2001
From: AlanQtten <735814735@qq.com>
Date: Tue, 30 Jan 2024 13:18:16 +0800
Subject: [PATCH] feat: add `extraFooterRender` for picker and mark
 `renderExtraFooter` as `deprecated`

---
 README.md                        | 3 ++-
 docs/examples/basic.tsx          | 4 ++--
 docs/examples/customize.tsx      | 6 +++---
 docs/examples/range.tsx          | 2 +-
 docs/examples/rtl.tsx            | 2 +-
 src/PickerInput/Popup/Footer.tsx | 5 ++++-
 src/interface.tsx                | 2 ++
 tests/new-range.spec.tsx         | 4 ++--
 tests/picker.spec.tsx            | 8 ++++----
 tests/range.spec.tsx             | 2 +-
 10 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index c3a271adc..b3caf842c 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,8 @@ render(<Picker />, mountNode);
 | disabledDate | Function(date:moment) => boolean |  | whether to disable select of current date |
 | dateRender | Function(currentDate:moment, today:moment) => React.Node |  | custom rendering function for date cells |
 | monthCellRender | Function(currentDate:moment, locale:Locale) => React.Node |  | Custom month cell render method |
-| renderExtraFooter | (mode) => React.Node |  | extra footer |
+| renderExtraFooter | (mode) => React.Node |  | deprecated, use `extraFooterRender` instead |
+| extraFooterRender | (mode) => React.Node |  | extra footer |
 | onSelect | Function(date: moment) |  | a callback function, can be executed when the selected time |
 | onPanelChange | Function(value: moment, mode) |  | callback when picker panel mode is changed |
 | onMouseDown | (event:React.MouseEvent\<HTMLInputElement>) => void |  | callback when executed onMouseDown event |
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index c641b2775..99bcef04a 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -61,7 +61,7 @@ export default () => {
             locale={zhCN}
             allowClear
             showToday
-            renderExtraFooter={() => 'extra'}
+            extraFooterRender={() => 'extra'}
           />
         </div>
         <div style={{ margin: '0 8px' }}>
@@ -102,7 +102,7 @@ export default () => {
             locale={zhCN}
             allowClear
             picker="week"
-            renderExtraFooter={() => 'I am footer!!!'}
+            extraFooterRender={() => 'I am footer!!!'}
             ref={weekRef}
           />
 
diff --git a/docs/examples/customize.tsx b/docs/examples/customize.tsx
index b6a702255..0e5432e6e 100644
--- a/docs/examples/customize.tsx
+++ b/docs/examples/customize.tsx
@@ -142,7 +142,7 @@ class Customize extends React.Component<{}, DateRangeState> {
             <div ref={this.poupContainerRef} />
           </div>
           <div>
-            <h3>renderExtraFooter</h3>
+            <h3>extraFooterRender</h3>
             <PickerPanel
               generateConfig={momentGenerateConfig}
               locale={zhCN}
@@ -151,7 +151,7 @@ class Customize extends React.Component<{}, DateRangeState> {
               onSelect={this.handleSelect}
               value={initValue}
               onPanelChange={changePanelCallBack}
-              renderExtraFooter={(mode: PanelMode) => <div>{mode} extra footer</div>}
+              extraFooterRender={(mode: PanelMode) => <div>{mode} extra footer</div>}
             />
           </div>
           <div>
@@ -162,7 +162,7 @@ class Customize extends React.Component<{}, DateRangeState> {
               picker="month"
               defaultValue={now}
               onSelect={this.handleSelectMonth}
-              renderExtraFooter={() => <div>extra footer</div>}
+              extraFooterRender={() => <div>extra footer</div>}
             />
           </div>
           <div>
diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
index 1b137c8b0..3f3ddcc21 100644
--- a/docs/examples/range.tsx
+++ b/docs/examples/range.tsx
@@ -180,7 +180,7 @@ export default () => {
             placeholder={['start...', 'end...']}
             disabled={[false, true]}
             allowEmpty={[false, true]}
-            renderExtraFooter={() => <div>extra footer</div>}
+            extraFooterRender={() => <div>extra footer</div>}
           />
         </div>
         <div style={{ margin: '0 8px' }}>
diff --git a/docs/examples/rtl.tsx b/docs/examples/rtl.tsx
index 70dd0e854..80226f8f1 100644
--- a/docs/examples/rtl.tsx
+++ b/docs/examples/rtl.tsx
@@ -147,7 +147,7 @@ export default () => {
             format="gggg-Wo"
             allowClear
             picker="week"
-            renderExtraFooter={() => 'I am footer!!!'}
+            extraFooterRender={() => 'I am footer!!!'}
             ref={weekRef}
           />
 
diff --git a/src/PickerInput/Popup/Footer.tsx b/src/PickerInput/Popup/Footer.tsx
index 4cd197480..329703906 100644
--- a/src/PickerInput/Popup/Footer.tsx
+++ b/src/PickerInput/Popup/Footer.tsx
@@ -15,6 +15,7 @@ export interface FooterProps<DateType extends object = any> {
   mode: PanelMode;
   internalMode: InternalMode;
   renderExtraFooter?: SharedPickerProps['renderExtraFooter'];
+  extraFooterRender?: SharedPickerProps['extraFooterRender'];
   showNow: boolean;
   generateConfig: GenerateConfig<DateType>;
   disabledDate: DisabledDate<DateType>;
@@ -37,6 +38,7 @@ export default function Footer(props: FooterProps) {
     mode,
     internalMode,
     renderExtraFooter,
+    extraFooterRender: customizeExtraFooterRender,
     showNow,
     showTime,
     onSubmit,
@@ -55,7 +57,8 @@ export default function Footer(props: FooterProps) {
   const [getValidTime] = useTimeInfo(generateConfig, showTime, now);
 
   // ======================== Extra =========================
-  const extraNode = renderExtraFooter?.(mode);
+  const extraFooterRender = customizeExtraFooterRender ?? renderExtraFooter
+  const extraNode = extraFooterRender?.(mode);
 
   // ======================== Ranges ========================
   const nowDisabled = disabledDate(now, {
diff --git a/src/interface.tsx b/src/interface.tsx
index d8396dbd8..58bcb93fe 100644
--- a/src/interface.tsx
+++ b/src/interface.tsx
@@ -425,7 +425,9 @@ export interface SharedPickerProps<DateType extends object = any>
   /** @deprecated Please use `showNow` instead */
   showToday?: boolean;
   panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
+  /** @deprecated Please use `extraFooterRender` instead */
   renderExtraFooter?: (mode: PanelMode) => React.ReactNode;
+  extraFooterRender?: (mode: PanelMode) => React.ReactNode;
 }
 
 export interface PickerRef {
diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx
index 4855267e4..bea23967c 100644
--- a/tests/new-range.spec.tsx
+++ b/tests/new-range.spec.tsx
@@ -1000,12 +1000,12 @@ describe('NewPicker.Range', () => {
     expect(container.querySelectorAll('input')[1]).toBeRequired();
   });
 
-  it('renderExtraFooter not close', () => {
+  it('extraFooterRender not close', () => {
     const onOpenChange = jest.fn();
     const { container } = render(
       <DayRangePicker
         onOpenChange={onOpenChange}
-        renderExtraFooter={() => <input className="bamboo" />}
+        extraFooterRender={() => <input className="bamboo" />}
       />,
     );
 
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index ddf8edcc4..d2564b683 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -492,15 +492,15 @@ describe('Picker.Basic', () => {
     });
   });
 
-  it('renderExtraFooter', () => {
-    const renderExtraFooter = jest.fn((mode) => <div>{mode}</div>);
+  it('extraFooterRender', () => {
+    const extraFooterRender = jest.fn((mode) => <div>{mode}</div>);
     const { container } = render(
-      <DayPicker showNow={false} renderExtraFooter={renderExtraFooter} />,
+      <DayPicker showNow={false} extraFooterRender={extraFooterRender} />,
     );
 
     function matchFooter(mode: string) {
       expect(document.querySelector('.rc-picker-footer-extra').textContent).toEqual(mode);
-      expect(renderExtraFooter.mock.calls[renderExtraFooter.mock.calls.length - 1][0]).toEqual(
+      expect(extraFooterRender.mock.calls[extraFooterRender.mock.calls.length - 1][0]).toEqual(
         mode,
       );
     }
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 94712c3fb..911283c0a 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -141,7 +141,7 @@ describe('Picker.Range', () => {
 
     it('year with footer', () => {
       const { container } = render(
-        <DayRangePicker renderExtraFooter={() => <p>footer</p>} picker="year" />,
+        <DayRangePicker extraFooterRender={() => <p>footer</p>} picker="year" />,
       );
       openPicker(container);
       expect(document.querySelector('.rc-picker-footer-extra').textContent).toEqual('footer');