fix timegrid bugs

packages-premium

@@ -1 +1 @@
-Subproject commit bb6d0f1231b6b0619b660b369c8f98e57ab637bf
+Subproject commit 694e4682279cb7d9e2a1d7992d4f6f9dd89ec333

packages/timegrid/src/TimeColsContent.tsx

@@ -1,18 +1,18 @@
 import {
   h, VNode,
   BaseComponent,
-  findElements,
   subrenderer,
-  removeElement,
   EventSegUiInteractionState,
   CssDimValue,
   DateMarker,
+  RefMap
 } from '@fullcalendar/core'
 import TimeColsMirrorEvents from './TimeColsMirrorEvents'
 import TimeColsEvents from './TimeColsEvents'
 import TimeColsFills from './TimeColsFills'
 import { TimeColsSeg } from './TimeCols'
 import TimeColsSlatsCoords from './TimeColsSlatsCoords'
+import TimeColsNowIndicator from './TimeColsNowIndicator'
 
 
 export interface TimeColsContentProps extends TimeColsContentBaseProps {
@@ -92,14 +92,14 @@ export class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps>
   private renderBgEvents = subrenderer(TimeColsFills)
   private renderBusinessHours = subrenderer(TimeColsFills)
   private renderDateSelection = subrenderer(TimeColsFills)
-  private renderNowIndicator = subrenderer(this._renderNowIndicator, this._unrenderNowIndicator)
+  private renderNowIndicator = subrenderer(TimeColsNowIndicator)
 
-  private colContainerEls: HTMLElement[]
-  private mirrorContainerEls: HTMLElement[]
-  private fgContainerEls: HTMLElement[]
-  private bgContainerEls: HTMLElement[]
-  private highlightContainerEls: HTMLElement[]
-  private businessContainerEls: HTMLElement[]
+  private colContainerRefs = new RefMap<HTMLElement>()
+  private mirrorContainerRefs = new RefMap<HTMLElement>()
+  private fgContainerRefs = new RefMap<HTMLElement>()
+  private bgContainerRefs = new RefMap<HTMLElement>()
+  private highlightContainerRefs = new RefMap<HTMLElement>()
+  private businessContainerRefs = new RefMap<HTMLElement>()
 
 
   render(props: TimeColsContentBodyProps) {
@@ -108,37 +108,25 @@ export class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps>
     for (let i = 0; i < props.colCnt; i++) {
       cellNodes.push(
         <td>
-          <div class='fc-content-col'>
-            <div class='fc-event-container fc-mirror-container'></div>
-            <div class='fc-event-container'></div>
-            <div class='fc-highlight-container'></div>
-            <div class='fc-bgevent-container'></div>
-            <div class='fc-business-container'></div>
+          <div class='fc-content-col' ref={this.colContainerRefs.createRef(i)}>
+            <div class='fc-event-container fc-mirror-container' ref={this.mirrorContainerRefs.createRef(i)} />
+            <div class='fc-event-container' ref={this.fgContainerRefs.createRef(i)} />
+            <div class='fc-highlight-container' ref={this.highlightContainerRefs.createRef(i)} />
+            <div class='fc-bgevent-container' ref={this.bgContainerRefs.createRef(i)} />
+            <div class='fc-business-container' ref={this.businessContainerRefs.createRef(i)} />
           </div>
         </td>
       )
     }
 
     return (
-      <tbody ref={this.handleRootEl}>
+      <tbody>
         <tr>{cellNodes}</tr>
       </tbody>
     )
   }
 
 
-  handleRootEl = (rootEl: HTMLElement) => {
-    if (rootEl) {
-      this.colContainerEls = findElements(rootEl, '.fc-content-col')
-      this.mirrorContainerEls = findElements(rootEl, '.fc-mirror-container')
-      this.fgContainerEls = findElements(rootEl, '.fc-event-container:not(.fc-mirror-container)')
-      this.bgContainerEls = findElements(rootEl, '.fc-bgevent-container')
-      this.highlightContainerEls = findElements(rootEl, '.fc-highlight-container')
-      this.businessContainerEls = findElements(rootEl, '.fc-business-container')
-    }
-  }
-
-
   componentDidMount() {
     this.subrender()
   }
@@ -160,27 +148,27 @@ export class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps>
 
     this.renderBusinessHours({
       type: 'businessHours',
-      containerEls: this.businessContainerEls,
+      containerEls: this.businessContainerRefs.collect(),
       segs: props.businessHourSegs,
       coords: props.coords
     })
 
     this.renderDateSelection({
       type: 'highlight',
-      containerEls: this.highlightContainerEls,
+      containerEls: this.highlightContainerRefs.collect(),
       segs: options.selectMirror ? [] : props.dateSelectionSegs, // do highlight if NO mirror
       coords: props.coords
     })
 
     this.renderBgEvents({
       type: 'bgEvent',
-      containerEls: this.bgContainerEls,
+      containerEls: this.bgContainerRefs.collect(),
       segs: props.bgEventSegs,
       coords: props.coords
     })
 
     this.renderFgEvents({
-      containerEls: this.fgContainerEls,
+      containerEls: this.fgContainerRefs.collect(),
       segs: props.fgEventSegs,
       selectedInstanceId: props.eventSelection,
       hiddenInstances: // TODO: more convenient
@@ -193,12 +181,13 @@ export class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps>
       coords: props.coords
     })
 
-    this.subrenderMirror(this.mirrorContainerEls, options)
+    this.subrenderMirror(this.mirrorContainerRefs.collect(), options)
 
     this.renderNowIndicator({
+      colContainerEls: this.colContainerRefs.collect(),
       nowIndicatorTop: props.nowIndicatorTop,
       segs: props.nowIndicatorSegs
-    })
+    } as any) // WTF
   }
 
 
@@ -245,31 +234,4 @@ export class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps>
     }
   }
 
-
-  _renderNowIndicator({ nowIndicatorTop, segs }: { nowIndicatorTop: number | null, segs: TimeColsSeg[] }) {
-
-    if (nowIndicatorTop == null) {
-      return []
-    }
-
-    let nodes: HTMLElement[] = []
-    let i
-
-    // render lines within the columns
-    for (i = 0; i < segs.length; i++) {
-      let lineEl = document.createElement('div')
-      lineEl.className = 'fc-now-indicator fc-now-indicator-line'
-      lineEl.style.top = nowIndicatorTop + 'px'
-      this.colContainerEls[segs[i].col].appendChild(lineEl)
-      nodes.push(lineEl)
-    }
-
-    return nodes
-  }
-
-
-  _unrenderNowIndicator(nodes: HTMLElement[]) {
-    nodes.forEach(removeElement)
-  }
-
 }

packages/timegrid/src/TimeColsEvents.ts

@@ -4,7 +4,7 @@ import {
   createFormatter, DateFormatter,
   FgEventRenderer, buildSegCompareObj,
   Seg, isMultiDayRange, compareByFieldSpecs,
-  computeEventDraggable, computeEventStartResizable, computeEventEndResizable, ComponentContext, BaseFgEventRendererProps, subrenderer
+  computeEventDraggable, computeEventStartResizable, computeEventEndResizable, ComponentContext, BaseFgEventRendererProps, subrenderer, isArraysEqual
 } from '@fullcalendar/core'
 import { attachSegs, detachSegs } from './TimeCols'
 import TimeColsSlatsCoords from './TimeColsSlatsCoords'
@@ -243,6 +243,10 @@ export default class TimeColsEvents extends FgEventRenderer<TimeColsEventsProps>
 
 }
 
+TimeColsEvents.addPropsEquality({
+  containerEls: isArraysEqual
+})
+
 
 // Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each.
 // Assumed the segs are already ordered.

packages/timegrid/src/TimeColsFills.ts

@@ -1,4 +1,4 @@
-import { FillRenderer, subrenderer, BaseFillRendererProps } from '@fullcalendar/core'
+import { FillRenderer, subrenderer, BaseFillRendererProps, isArraysEqual } from '@fullcalendar/core'
 import { attachSegs, detachSegs } from './TimeCols'
 import TimeColsSlatsCoords from './TimeColsSlatsCoords'
 
@@ -32,3 +32,7 @@ export default class TimeColsFills extends FillRenderer<TimeColsFillsProps> {
   }
 
 }
+
+TimeColsFills.addPropsEquality({
+  containerEls: isArraysEqual
+})

packages/timegrid/src/TimeColsNowIndicator.ts

@@ -0,0 +1,47 @@
+import {
+  removeElement,
+  SubRenderer,
+  isArraysEqual
+} from '@fullcalendar/core'
+import { TimeColsSeg } from './TimeCols'
+
+
+export interface TimeColsNowIndicatorProps {
+  colContainerEls: HTMLElement
+  nowIndicatorTop: number | null
+  segs: TimeColsSeg[]
+}
+
+
+export default class TimeColsNowIndicator extends SubRenderer<TimeColsNowIndicatorProps, HTMLElement[]> {
+
+
+  render({ colContainerEls, nowIndicatorTop, segs }: TimeColsNowIndicatorProps) {
+
+    let nodes: HTMLElement[] = []
+
+    if (nowIndicatorTop != null) {
+
+      // render lines within the columns
+      for (let i = 0; i < segs.length; i++) {
+        let lineEl = document.createElement('div')
+        lineEl.className = 'fc-now-indicator fc-now-indicator-line'
+        lineEl.style.top = nowIndicatorTop + 'px'
+        colContainerEls[segs[i].col].appendChild(lineEl)
+        nodes.push(lineEl)
+      }
+    }
+
+    return nodes
+  }
+
+
+  unrender(nodes: HTMLElement[]) {
+    nodes.forEach(removeElement)
+  }
+
+}
+
+TimeColsNowIndicator.addPropsEquality({
+  colContainerEls: isArraysEqual
+})