feat: showMore message add event info (jquense#2496)

* feat: showMore message add event info

* feat: add remaining events and all events in day

---------

authored-by: mutao.zht <mutao.zht@alibaba-inc.com>

src/EventEndingRow.js

@@ -7,7 +7,7 @@ import range from 'lodash/range'
 
 let isSegmentInSlot = (seg, slot) => seg.left <= slot && seg.right >= slot
 let eventsInSlot = (segments, slot) =>
-  segments.filter((seg) => isSegmentInSlot(seg, slot)).length
+  segments.filter((seg) => isSegmentInSlot(seg, slot)).map((seg) => seg.event)
 
 class EventEndingRow extends React.Component {
   render() {
@@ -68,24 +68,25 @@ class EventEndingRow extends React.Component {
     let { segments } = this.props
 
     return range(slot, slot + span).every((s) => {
-      let count = eventsInSlot(segments, s)
+      const count = eventsInSlot(segments, s).length
 
       return count === 1
     })
   }
 
   renderShowMore(segments, slot) {
-    let { localizer } = this.props
-    let count = eventsInSlot(segments, slot)
-
+    let { localizer, slotMetrics } = this.props
+    const events = slotMetrics.getEventsForSlot(slot)
+    const remainingEvents = eventsInSlot(segments, slot)
+    const count = remainingEvents.length
     return count ? (
       <button
         type="button"
         key={'sm_' + slot}
         className={clsx('rbc-button-link', 'rbc-show-more')}
         onClick={(e) => this.showMore(slot, e)}
       >
-        {localizer.messages.showMore(count)}
+        {localizer.messages.showMore(count, remainingEvents, events)}
       </button>
     ) : (
       false

stories/props/messages.mdx

@@ -27,8 +27,12 @@ defualts
   agenda: 'Agenda',
 
   noEventsInRange: 'There are no events in this range.',
-
-  showMore: total => `+${total} more`,
+  /**
+   * params {total} count of remaining events 
+   * params {remainingEvents} remaining events 
+   * params {events} all events in day
+   */
+  showMore: (total, remainingEvents, events) => `+${total} más`,
 }
 ```