feat：add maxTagPlaceholder api

docs/examples/multiple.tsx

@@ -23,17 +23,37 @@ const sharedLocale = {
   style: { width: 300 },
 };
 
+const maxTagPlaceholder = (value) => {
+  return (
+    <ul>
+      {value?.map((item, index) => {
+        return <li key={index}>{item?.format('YYYY-MM-DD')}</li>;
+      })}
+    </ul>
+  );
+};
+
 export default () => {
   const singleRef = React.useRef<PickerRef>(null);
 
   return (
     <div>
       <SinglePicker {...sharedLocale} multiple ref={singleRef} onOpenChange={console.error} />
       <SinglePicker {...sharedLocale} multiple ref={singleRef} needConfirm />
-      <SinglePicker {...sharedLocale} multiple picker="week" defaultValue={[
-        dayjs('2021-01-01'),
-        dayjs('2021-01-08'),
-      ]} />
+      <SinglePicker
+        {...sharedLocale}
+        multiple
+        picker="week"
+        defaultValue={[dayjs('2021-01-01'), dayjs('2021-01-08')]}
+      />
+      <SinglePicker
+        maxTagCount={10}
+        {...sharedLocale}
+        multiple
+        ref={singleRef}
+        maxTagPlaceholder={maxTagPlaceholder}
+        defaultValue={[dayjs('2021-01-01'), dayjs('2021-01-08')]}
+      />
     </div>
   );
 };

src/PickerInput/Selector/SingleSelector/MultipleDates.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import type { PickerProps } from '../../SinglePicker';
 
 export interface MultipleDatesProps<DateType extends object = any>
-  extends Pick<PickerProps, 'maxTagCount'> {
+  extends Pick<PickerProps, 'maxTagCount' | 'maxTagPlaceholder'> {
   prefixCls: string;
   value: DateType[];
   onRemove: (value: DateType) => void;
@@ -25,6 +25,7 @@ export default function MultipleDates<DateType extends object = any>(
     formatDate,
     disabled,
     maxTagCount,
+    maxTagPlaceholder,
     placeholder,
   } = props;
 
@@ -68,8 +69,10 @@ export default function MultipleDates<DateType extends object = any>(
 
   // ========================= Rest =========================
   function renderRest(omittedValues: DateType[]) {
-    const content = `+ ${omittedValues.length} ...`;
-
+    const content =
+      typeof maxTagPlaceholder === 'function'
+        ? maxTagPlaceholder(omittedValues)
+        : maxTagPlaceholder;
     return renderSelector(content);
   }
 

src/PickerInput/Selector/SingleSelector/index.tsx

@@ -12,7 +12,7 @@ import MultipleDates from './MultipleDates';
 
 export interface SingleSelectorProps<DateType extends object = any>
   extends SelectorProps<DateType>,
-    Pick<PickerProps, 'multiple' | 'maxTagCount'> {
+    Pick<PickerProps, 'multiple' | 'maxTagCount' | 'maxTagPlaceholder'> {
   id?: string;
 
   value?: DateType[];
@@ -75,6 +75,7 @@ function SingleSelector<DateType extends object = any>(
     onInputChange,
     multiple,
     maxTagCount,
+    maxTagPlaceholder = (omittedValues: DateType[]) => `+ ${omittedValues.length} ...`,
 
     // Valid
     format,
@@ -170,6 +171,7 @@ function SingleSelector<DateType extends object = any>(
         onRemove={onMultipleRemove}
         formatDate={getText}
         maxTagCount={maxTagCount}
+        maxTagPlaceholder={maxTagPlaceholder}
         disabled={disabled}
         removeIcon={removeIcon}
         placeholder={placeholder}

src/PickerInput/SinglePicker.tsx

@@ -46,6 +46,7 @@ export interface BasePickerProps<DateType extends object = any>
   removeIcon?: React.ReactNode;
   /** Only work when `multiple` is in used */
   maxTagCount?: number | 'responsive';
+  maxTagPlaceholder?: React.ReactNode | ((omittedValues: DateType[]) => React.ReactNode);
 
   // Value
   value?: DateType | DateType[] | null;

tests/multiple.spec.tsx

@@ -155,6 +155,115 @@ describe('Picker.Multiple', () => {
       ).toBeFalsy();
     });
   });
+  describe('maxTagPlaceholder', () => {
+    it('should not show maxTagPlaceholder when items count is within maxTagCount', () => {
+      const maxTagPlaceholder = (omittedValues: any[]) => (
+        <span className="custom-max-tag-placeholder">+{omittedValues.length} more</span>
+      );
+
+      const { container } = render(
+        <DayPicker
+          multiple
+          maxTagCount={3}
+          maxTagPlaceholder={maxTagPlaceholder}
+          defaultValue={[getDay('2000-01-01'), getDay('2000-01-02')]}
+        />,
+      );
+
+      // Should show all items, no placeholder
+      expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(2);
+      expect(container.querySelector('.custom-max-tag-placeholder')).toBeFalsy();
+    });
+
+    it('should show maxTagPlaceholder when items count exceeds maxTagCount', () => {
+      const maxTagPlaceholder = (omittedValues: any[]) => (
+        <span className="custom-max-tag-placeholder">+{omittedValues.length} items</span>
+      );
+
+      const { container } = render(
+        <DayPicker
+          multiple
+          maxTagCount={2}
+          maxTagPlaceholder={maxTagPlaceholder}
+          defaultValue={[
+            getDay('2000-01-01'),
+            getDay('2000-01-02'),
+            getDay('2000-01-03'),
+            getDay('2000-01-04'),
+          ]}
+        />,
+      );
+
+      // Should show maxTagCount items + placeholder
+      expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(3);
+      expect(container.querySelector('.custom-max-tag-placeholder').textContent).toBe('+2 items');
+    });
+
+    it('should work with custom maxTagPlaceholder component', () => {
+      const CustomPlaceholder = ({ omittedValues }: { omittedValues: any[] }) => (
+        <div className="custom-placeholder-wrapper">
+          <span className="omitted-count">{omittedValues.length}</span>
+          <span className="omitted-text">hidden dates</span>
+        </div>
+      );
+
+      const { container } = render(
+        <DayPicker
+          multiple
+          maxTagCount={1}
+          maxTagPlaceholder={(omittedValues) => <CustomPlaceholder omittedValues={omittedValues} />}
+          defaultValue={[getDay('2000-01-01'), getDay('2000-01-02'), getDay('2000-01-03')]}
+        />,
+      );
+
+      expect(container.querySelector('.custom-placeholder-wrapper')).toBeTruthy();
+      expect(container.querySelector('.omitted-count').textContent).toBe('2');
+      expect(container.querySelector('.omitted-text').textContent).toBe('hidden dates');
+    });
+
+    it('should handle maxTagCount edge cases1', () => {
+      const maxTagPlaceholder = (omittedValues: any[]) => (
+        <span className="edge-case-placeholder">+{omittedValues.length}</span>
+      );
+
+      // Test maxTagCount = 0
+      const { container } = render(
+        <DayPicker
+          multiple
+          maxTagCount={0}
+          maxTagPlaceholder={maxTagPlaceholder}
+          defaultValue={[getDay('2000-01-01')]}
+        />,
+      );
+      expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(1);
+      expect(container.querySelector('.edge-case-placeholder')).toBeTruthy();
+      expect(container.querySelector('.edge-case-placeholder').textContent).toBe('+1');
+    });
+
+    it('should pass correct omittedValues to maxTagPlaceholder', () => {
+      const maxTagPlaceholder = jest.fn((omittedValues) => (
+        <span className="test-placeholder">+{omittedValues.length}</span>
+      ));
+
+      const values = [
+        getDay('2000-01-01'),
+        getDay('2000-01-02'),
+        getDay('2000-01-03'),
+        getDay('2000-01-04'),
+      ];
+
+      render(
+        <DayPicker
+          multiple
+          maxTagCount={2}
+          maxTagPlaceholder={maxTagPlaceholder}
+          defaultValue={values}
+        />,
+      );
+
+      expect(maxTagPlaceholder).toHaveBeenCalledWith([values[2], values[3]]);
+    });
+  });
 
   it('click year panel should not select', () => {
     const onChange = jest.fn();