Merge pull request #14 from mikeyyyzhao/kenny/vim-2468-investigate-rb…

…c-bug-with-event-keys

VIM-2468 Add keyAccessor for events

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rbc-fork-react-big-calendar",
-  "version": "0.33.51",
+  "version": "0.33.52",
   "description": "Calendar! with events",
   "author": {
     "name": "Jason Quense",

src/Calendar.js

@@ -259,6 +259,17 @@ class Calendar extends React.Component {
      */
     resourceTitleAccessor: accessor,
 
+    /**
+     * Provides a unique key for an event.
+     *
+     * ```js
+     * string | (resource: Object) => any
+     * ```
+     *
+     * @type {(func|string)}
+     */
+    keyAccessor: accessor,
+
     /**
      * Determines the current date/time which is highlighted in the views.
      *
@@ -858,6 +869,7 @@ class Calendar extends React.Component {
     startAccessor: 'start',
     endAccessor: 'end',
     resourceAccessor: 'resourceId',
+    keyAccessor: () => null,
 
     resourceIdAccessor: 'id',
     resourceTitleAccessor: 'title',
@@ -891,6 +903,7 @@ class Calendar extends React.Component {
     resourceAccessor,
     resourceIdAccessor,
     resourceTitleAccessor,
+    keyAccessor,
     eventPropGetter,
     backgroundEventPropGetter,
     slotPropGetter,
@@ -938,6 +951,7 @@ class Calendar extends React.Component {
         resource: wrapAccessor(resourceAccessor),
         resourceId: wrapAccessor(resourceIdAccessor),
         resourceTitle: wrapAccessor(resourceTitleAccessor),
+        key: wrapAccessor(keyAccessor),
       },
     }
   }

src/DayColumn.js

@@ -240,7 +240,8 @@ class DayColumn extends React.Component {
           style={style}
           event={event}
           label={label}
-          key={'evt_' + idx}
+          // Make the key unique and constant.
+          key={accessors.key(event) ?? 'evt_' + idx}
           getters={getters}
           rtl={rtl}
           components={components}

src/EventRow.js

@@ -6,6 +6,7 @@ import EventRowMixin from './EventRowMixin'
 class EventRow extends React.Component {
   render() {
     let {
+      accessors,
       segments,
       slotMetrics: { slots },
       className,
@@ -16,7 +17,7 @@ class EventRow extends React.Component {
     return (
       <div className={clsx(className, 'rbc-row')}>
         {segments.reduce((row, { event, left, right, span }, li) => {
-          let key = '_lvl_' + li
+          let key = accessors.key(event) ?? '_lvl_' + li
           let gap = left - lastEnd
 
           let content = EventRowMixin.renderEvent(this.props, event)

src/Popup.js

@@ -65,7 +65,7 @@ class Popup extends React.Component {
         </div>
         {events.map((event, idx) => (
           <EventCell
-            key={idx}
+            key={accessors.key(event) ?? idx}
             type="popup"
             localizer={localizer}
             event={event}