feat: RangePicker dateRender support additional info (#74)

* add test case

* update test case

Author: zombieJ

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
   ...base,
   rules: {
     ...base.rules,
+    'arrow-parens': 0,
     'no-template-curly-in-string': 0,
     'prefer-promise-reject-errors': 0,
     'react/no-array-index-key': 0,
@@ -13,9 +14,6 @@ module.exports = {
     'no-confusing-arrow': 0,
     'jsx-a11y/no-autofocus': 0,
     'jsx-a11y/heading-has-content': 0,
-    'import/no-extraneous-dependencies': [
-      'error',
-      { devDependencies: ['**/tests/**'] },
-    ],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: ['**/tests/**'] }],
   },
 };

src/RangePicker.tsx

@@ -21,6 +21,7 @@ import useRangeDisabled from './hooks/useRangeDisabled';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import useRangeViewDates from './hooks/useRangeViewDates';
+import { DateRender } from './panels/DatePanel/DateBody';
 
 function reorderValues<DateType>(
   values: RangeValue<DateType>,
@@ -54,6 +55,14 @@ function canValueTrigger<DateType>(
   return false;
 }
 
+export type RangeDateRender<DateType> = (
+  currentDate: DateType,
+  today: DateType,
+  info: {
+    range: 'start' | 'end';
+  },
+) => React.ReactNode;
+
 export interface RangePickerSharedProps<DateType> {
   id?: string;
   value?: RangeValue<DateType>;
@@ -79,6 +88,7 @@ export interface RangePickerSharedProps<DateType> {
   autoComplete?: string;
   /** @private Internal control of active picker. Do not use since it's private usage */
   activePickerIndex?: 0 | 1;
+  dateRender?: RangeDateRender<DateType>;
 }
 
 type OmitPickerProps<Props> = Omit<
@@ -98,6 +108,7 @@ type OmitPickerProps<Props> = Omit<
   | 'pickerValue'
   | 'onPickerValueChange'
   | 'onOk'
+  | 'dateRender'
 >;
 
 type RangeShowTimeObject<DateType> = Omit<SharedTimeProps<DateType>, 'defaultValue'> & {
@@ -162,6 +173,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     defaultOpen,
     disabledDate,
     disabledTime,
+    dateRender,
     ranges,
     allowEmpty,
     allowClear,
@@ -623,6 +635,14 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       };
     }
 
+    let panelDateRender: DateRender<DateType> | null = null;
+    if (dateRender) {
+      panelDateRender = (date, today) =>
+        dateRender(date, today, {
+          range: mergedActivePickerIndex ? 'end' : 'start',
+        });
+    }
+
     return (
       <RangeContext.Provider
         value={{
@@ -635,6 +655,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         <PickerPanel<DateType>
           {...(props as any)}
           {...panelProps}
+          dateRender={panelDateRender}
           showTime={panelShowTime}
           mode={mergedModes[mergedActivePickerIndex]}
           generateConfig={generateConfig}

tests/picker.spec.tsx

@@ -630,4 +630,14 @@ describe('Picker.Basic', () => {
     const wrapper = mount(<MomentPicker id="light" />);
     expect(wrapper.find('input').props().id).toEqual('light');
   });
+
+  it('dateRender', () => {
+    const wrapper = mount(<MomentPicker open dateRender={date => date.format('YYYY-MM-DD')} />);
+    expect(
+      wrapper
+        .find('tbody td')
+        .last()
+        .text(),
+    ).toEqual('1990-10-06');
+  });
 });

tests/range.spec.tsx

@@ -1063,4 +1063,27 @@ describe('Picker.Range', () => {
         .props().id,
     ).toEqual('bamboo');
   });
+
+  it('dateRender', () => {
+    let range = 'start';
+
+    const wrapper = mount(
+      <MomentRangePicker
+        open
+        dateRender={(date, _, info) => {
+          expect(info.range).toEqual(range);
+          return date.format('YYYY-MM-DD');
+        }}
+      />,
+    );
+    expect(
+      wrapper
+        .find('tbody td')
+        .last()
+        .text(),
+    ).toEqual('1990-11-10');
+
+    range = 'end';
+    wrapper.openPicker(1);
+  });
 });