feat: add extraFooterRender for picker and mark renderExtraFooter…

… as `deprecated`

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 |

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}
           />
 

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>

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' }}>

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}
           />
 

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, {

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 {

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" />}
       />,
     );
 

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,
       );
     }

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');