From d2d11a831ec023c0024b3d8c86fa3fda1df6ac0c 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 ++++++++++
 types/react-big-calendar/package.json                |  2 +-
 .../react-big-calendar/react-big-calendar-tests.tsx  | 12 ++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

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/package.json b/types/react-big-calendar/package.json
index a278023289a4d65..ad29c36d304ae2c 100644
--- a/types/react-big-calendar/package.json
+++ b/types/react-big-calendar/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@types/react-big-calendar",
-    "version": "1.8.9999",
+    "version": "1.15.0",
     "projects": [
         "https://github.com/jquense/react-big-calendar"
     ],
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;