better key generation

fullcalendar · Jun 10, 2020 · d125039 · d125039
1 parent 54ec099
commit d125039
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 32 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/common/src/component/event-rendering.ts b/packages/common/src/component/event-rendering.ts
@@ -349,3 +349,11 @@ export function getEventClassNames(props: EventMeta) { // weird that we use this
 
   return classNames
 }
+
+
+export function buildEventRangeKey(eventRange: EventRenderRange) {
+  return eventRange.instance
+    ? eventRange.instance.instanceId
+    : eventRange.def.defId + ':' + eventRange.range.start.toISOString()
+      // inverse-background events don't have specific instances. TODO: better solution
+}
diff --git a/packages/common/src/main.ts b/packages/common/src/main.ts
@@ -179,7 +179,7 @@ export {
   computeSegDraggable, computeSegStartResizable, computeSegEndResizable,
   getEventClassNames, buildSegTimeText,
   buildSegCompareObj, sortEventSegs,
-  getSegMeta, EventMeta
+  getSegMeta, EventMeta, buildEventRangeKey
 } from './component/event-rendering'
 
 export { DayTableModel, DayTableSeg, DayTableCell } from './common/DayTableModel'

diff --git a/packages/daygrid/src/TableRow.tsx b/packages/daygrid/src/TableRow.tsx
@@ -14,7 +14,8 @@ import {
   BgEvent,
   renderFill,
   isPropsEqual,
-  createRef
+  createRef,
+  buildEventRangeKey
 } from '@fullcalendar/common'
 import { TableSeg, splitSegsByFirstCol } from './TableSeg'
 import { TableCell, TableCellModel, MoreLinkArg } from './TableCell'
@@ -309,19 +310,14 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
           right: framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol],
         }
 
-        // inverse-background events don't have specific instances
-        // TODO: might be a key collision. better solution
-        let { eventRange } = seg
-        let key = eventRange.instance ? eventRange.instance.instanceId : eventRange.def.defId
-
         nodes.push(
-          <div className='fc-daygrid-bg-harness' style={leftRightCss}>
+          <div
+            key={buildEventRangeKey(seg.eventRange)}
+            className='fc-daygrid-bg-harness'
+            style={leftRightCss}
+          >
             {fillType === 'bg-event' ?
-              <BgEvent
-                key={key}
-                seg={seg}
-                {...getSegMeta(seg, todayRange)}
-              /> :
+              <BgEvent seg={seg} {...getSegMeta(seg, todayRange)} /> :
               renderFill(fillType)
             }
           </div>

diff --git a/packages/timegrid/src/TimeCol.tsx b/packages/timegrid/src/TimeCol.tsx
@@ -1,6 +1,6 @@
 import {
   Ref, DateMarker, BaseComponent, createElement, EventSegUiInteractionState, Seg, getSegMeta, DateRange, Fragment, DayCellRoot, NowIndicatorRoot,
-  DayCellContent, BgEvent, renderFill, DateProfile, config
+  DayCellContent, BgEvent, renderFill, DateProfile, config, buildEventRangeKey
 } from '@fullcalendar/common'
 import { TimeColsSeg } from './TimeColsSeg'
 import { TimeColsSlatsCoords } from './TimeColsSlatsCoords'
@@ -192,23 +192,14 @@ export class TimeCol extends BaseComponent<TimeColProps> {
     // BAD: assigns TO THE SEGS THEMSELVES
     computeSegVerticals(segs, props.date, props.slatCoords, context.options.eventMinHeight)
 
-    let children = segs.map((seg) => {
-
-      let { eventRange } = seg
-      let key = eventRange.instance
-        ? eventRange.instance.instanceId
-        : eventRange.def.defId + ':' + eventRange.range.start.toISOString()
-          // inverse-background events don't have specific instances. TODO: better solution
-
-      return (
-        <div key={key} className='fc-timegrid-bg-harness' style={this.computeSegTopBottomCss(seg)}>
-          {fillType === 'bg-event' ?
-            <BgEvent seg={seg} {...getSegMeta(seg, props.todayRange, props.nowDate)} /> :
-            renderFill(fillType)
-          }
-        </div>
-      )
-    })
+    let children = segs.map((seg) => (
+      <div key={buildEventRangeKey(seg.eventRange)} className='fc-timegrid-bg-harness' style={this.computeSegTopBottomCss(seg)}>
+        {fillType === 'bg-event' ?
+          <BgEvent seg={seg} {...getSegMeta(seg, props.todayRange, props.nowDate)} /> :
+          renderFill(fillType)
+        }
+      </div>
+    ))
 
     return <Fragment>{children}</Fragment>
   }