From a94f6819b51d320393ae96abf45f63c71878e859 Mon Sep 17 00:00:00 2001
From: David Mejorado <david.mejorado@gmail.com>
Date: Tue, 8 Oct 2024 17:29:44 -0700
Subject: [PATCH] feat(react-big-calendar): showMore component

The library now accepts a `showMore` custom component to provide access
to the events overflowing the available cell space.

See: https://github.com/jquense/react-big-calendar/pull/2537
---
 types/react-big-calendar/index.d.ts                  | 10 ++++++++++
 .../react-big-calendar/react-big-calendar-tests.tsx  | 12 ++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts
index a8007bec75ee27d..400ed644e5218e1 100644
--- a/types/react-big-calendar/index.d.ts
+++ b/types/react-big-calendar/index.d.ts
@@ -188,6 +188,15 @@ export interface DateCellWrapperProps {
     children: React.JSX.Element;
 }
 
+export interface ShowMoreProps<TEvent extends object = Event> {
+    localizer: DateLocalizer;
+    slot: number;
+    slotDate: Date;
+    count: number;
+    events: TEvent[];
+    remainingEvents: TEvent[];
+}
+
 export interface Components<TEvent extends object = Event, TResource extends object = object> {
     event?: React.ComponentType<EventProps<TEvent>> | undefined;
     eventWrapper?: React.ComponentType<EventWrapperProps<TEvent>> | undefined;
@@ -235,6 +244,7 @@ export interface Components<TEvent extends object = Event, TResource extends obj
      */
     header?: React.ComponentType<HeaderProps> | undefined;
     resourceHeader?: React.ComponentType<ResourceHeaderProps<TResource>> | undefined;
+    showMore?: React.ComponentType<ShowMoreProps<TEvent>>;
 }
 
 export interface ToolbarProps<TEvent extends object = Event, TResource extends object = object> {
diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx
index ae641c4b50eef2e..92c02f84b0980f8 100644
--- a/types/react-big-calendar/react-big-calendar-tests.tsx
+++ b/types/react-big-calendar/react-big-calendar-tests.tsx
@@ -19,6 +19,7 @@ import {
     Navigate,
     NavigateAction,
     ResourceHeaderProps,
+    ShowMoreProps,
     stringOrDate,
     TimeGrid,
     ToolbarProps,
@@ -368,6 +369,7 @@ class CalendarResource {
                         eventWrapper: EventWrapper,
                         header: CustomHeader,
                         resourceHeader: ResourceHeader,
+                        showMore: ShowMoreButton,
                     }}
                     dayPropGetter={customDayPropGetter}
                     slotPropGetter={customSlotPropGetter}
@@ -533,6 +535,16 @@ function ResourceHeader(props: ResourceHeaderProps<CalendarResource>) {
     );
 }
 
+function ShowMoreButton(props: ShowMoreProps<CalendarEvent>) {
+    return (
+        <div>
+            <div>Show more</div>
+            <p>All events: {props.events.length}</p>
+            <p>Remaining: {props.remainingEvents.length}</p>
+        </div>
+    );
+}
+
 class Toolbar extends React.Component<ToolbarProps<CalendarEvent, CalendarResource>> {
     render() {
         const { date, label, view } = this.props;