feat(components): showMore component customization

I'm trying to render a custom component for the `show more` button. I
know there are a few recommended ways to do this through the `onShowMore`
callback and the `messages.showMore` prop as suggested in jquense#1147.

But that doesn't cover all use cases. For example, I want to access the
events that are being hidden by the `show more` button. I also want to
render a custom popup right next to the `show more` button.

Resolves jquense#2391

src/Calendar.js

@@ -750,6 +750,7 @@ class Calendar extends React.Component {
      *   timeGutterHeader: MyTimeGutterWrapper,
      *   timeGutterWrapper: MyTimeGutterWrapper,
      *   resourceHeader: MyResourceHeader,
+     *   showMore: MyShowMoreEvent,
      *   toolbar: MyToolbar,
      *   agenda: {
      *   	 event: MyAgendaEvent, // with the agenda view use a different component to render events
@@ -783,6 +784,7 @@ class Calendar extends React.Component {
       timeGutterHeader: PropTypes.elementType,
       timeGutterWrapper: PropTypes.elementType,
       resourceHeader: PropTypes.elementType,
+      showMore: PropTypes.elementType,
 
       toolbar: PropTypes.elementType,
 

src/EventEndingRow.js

@@ -75,10 +75,28 @@ class EventEndingRow extends React.Component {
   }
 
   renderShowMore(segments, slot) {
-    let { localizer, slotMetrics } = this.props
+    let { localizer, slotMetrics, components } = this.props
     const events = slotMetrics.getEventsForSlot(slot)
     const remainingEvents = eventsInSlot(segments, slot)
     const count = remainingEvents.length
+
+    if (components && components.showMore) {
+      const ShowMore = components.showMore
+
+      return count ? (
+        <ShowMore
+          localizer={localizer}
+          slotDate={slotMetrics.getDateForSlot(slot - 1)}
+          slot={slot}
+          count={count}
+          events={events}
+          remainingEvents={remainingEvents}
+        />
+      ) : (
+        false
+      )
+    }
+
     return count ? (
       <button
         type="button"

stories/Calendar.stories.js

@@ -129,3 +129,13 @@ CustomDayColumnWrapper.parameters = {
     },
   },
 }
+
+export const CustomShowMore = Template.bind({})
+CustomShowMore.storyName = 'add custom showMore'
+CustomShowMore.args = {
+  defaultView: Views.MONTH,
+  events,
+  components: {
+    showMore: customComponents.showMore,
+  },
+}

stories/resources/customComponents.js

@@ -81,6 +81,25 @@ const customComponents = {
       </div>
     )
   },
+  showMore: (showMoreProps) => {
+    return (
+      <button
+        id="my-custom-show-more"
+        style={{ border: '4px solid red', cursor: 'pointer' }}
+        onClick={() => {
+          action(
+            `custom showMore component clicked with props: ${JSON.stringify(
+              showMoreProps,
+              null,
+              2
+            )}`
+          )
+        }}
+      >
+        {showMoreProps.count} more!
+      </button>
+    )
+  },
 }
 
 export default customComponents