fix more refmap collecting issues;

fullcalendar · Apr 8, 2020 · 2818afc · 2818afc
1 parent ccb2149
commit 2818afc
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 46 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/core/src/common/DayTableModel.ts b/packages/core/src/common/DayTableModel.ts
@@ -10,6 +10,7 @@ export interface DayTableSeg extends Seg {
 }
 
 export interface DayTableCell {
+  key: string // probably just the serialized date, but could be other metadata if this col is specific to another entity
   date: DateMarker
   extraHookProps?: object
   extraDataAttrs?: object
@@ -70,9 +71,11 @@ export default class DayTableModel {
     return rows
   }
 
-  private buildCell(row, col) {
+  private buildCell(row, col): DayTableCell {
+    let date = this.daySeries.dates[row * this.colCnt + col]
     return {
-      date: this.daySeries.dates[row * this.colCnt + col]
+      key: date.toISOString(),
+      date
     }
   }
 

diff --git a/packages/core/src/util/RefMap.ts b/packages/core/src/util/RefMap.ts
@@ -58,6 +58,7 @@ export default class RefMap<RefType> {
 
   // TODO: check callers that don't care about order. should use getAll instead
   // NOTE: this method has become less valuable now that we are encouraged to map order by some other index
+  // TODO: provide ONE array-export function, buildArray, which fails on non-numeric indexes. caller can manipulate and "collect"
   collect(
     startIndex?: number,
     endIndex?: number,

diff --git a/packages/daygrid/src/Table.tsx b/packages/daygrid/src/Table.tsx
@@ -222,14 +222,14 @@ export default class Table extends DateComponent<TableProps, TableState> {
   prepareHits() {
     this.rowPositions = new PositionCache(
       this.rootEl,
-      this.rowRefs.collect().map((rowObj) => rowObj.cellElRefs.currentMap[0]), // first cell el in each row
+      this.rowRefs.collect().map((rowObj) => rowObj.getCellEls()[0]), // first cell el in each row. TODO: not optimal
       false,
       true // vertical
     )
 
     this.colPositions = new PositionCache(
       this.rootEl,
-      this.rowRefs.currentMap[0].cellElRefs.collect(), // cell els in first row
+      this.rowRefs.currentMap[0].getCellEls(), // cell els in first row
       true, // horizontal
       false
     )
@@ -263,7 +263,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
 
 
   private getCellEl(row, col) {
-    return this.rowRefs.currentMap[row].cellElRefs.currentMap[col]
+    return this.rowRefs.currentMap[row].getCellEls()[col] // TODO: not optimal
   }
 
 

diff --git a/packages/daygrid/src/TableCell.tsx b/packages/daygrid/src/TableCell.tsx
@@ -22,7 +22,11 @@ import {
 import TableSeg from './TableSeg'
 
 
-export interface TableCellProps extends TableCellModel {
+export interface TableCellProps {
+  date: DateMarker
+  extraHookProps?: object
+  extraDataAttrs?: object
+  extraClassNames?: string[]
   elRef?: Ref<HTMLTableCellElement>
   innerElRef?: Ref<HTMLDivElement>
   bgContent: ComponentChildren
@@ -42,7 +46,8 @@ export interface TableCellProps extends TableCellModel {
   segIsHidden: { [instanceId: string]: boolean } // for more-popover. TODO: rename to be about selected instances
 }
 
-export interface TableCellModel { // combine with DayTableCell?
+export interface TableCellModel { // TODO: move somewhere else. combine with DayTableCell?
+  key: string
   date: DateMarker
   extraHookProps?: object
   extraDataAttrs?: object

diff --git a/packages/daygrid/src/TableRow.tsx b/packages/daygrid/src/TableRow.tsx
@@ -56,7 +56,7 @@ interface TableRowState {
 
 export default class TableRow extends DateComponent<TableRowProps, TableRowState> {
 
-  public cellElRefs = new RefMap<HTMLTableCellElement>()
+  private cellElRefs = new RefMap<HTMLTableCellElement>()
   private cellInnerElRefs = new RefMap<HTMLElement>()
   private cellContentElRefs = new RefMap<HTMLDivElement>()
   private segHarnessRefs = new RefMap<HTMLDivElement>()
@@ -121,8 +121,9 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
 
           return (
             <TableCell
-              elRef={this.cellElRefs.createRef(col)}
-              innerElRef={this.cellInnerElRefs.createRef(col) /* rename */}
+              key={cell.key}
+              elRef={this.cellElRefs.createRef(cell.key)}
+              innerElRef={this.cellInnerElRefs.createRef(cell.key) /* rename prop */}
               date={cell.date}
               showDayNumber={props.showDayNumbers || showWeekNumber /* for spacing, we need to force day-numbers if week numbers */}
               showWeekNumber={showWeekNumber}
@@ -139,7 +140,7 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
               allFgSegs={finalSegsByCol[col]}
               segIsHidden={segIsHidden}
               fgPaddingBottom={paddingBottoms[col]}
-              fgContentElRef={this.cellContentElRefs.createRef(col)}
+              fgContentElRef={this.cellContentElRefs.createRef(cell.key)}
               fgContent={[
                 <Fragment>{normalFgNodes}</Fragment>, // Fragment scopes the keys
                 <Fragment>{mirrorFgNodes}</Fragment>
@@ -327,11 +328,13 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
 
 
   updateSizing(isExternalSizingChange) {
-    if (this.props.clientWidth !== null) { // positioning ready?
+    let { props, cellInnerElRefs, cellContentElRefs } = this
+
+    if (props.clientWidth !== null) { // positioning ready?
 
       if (isExternalSizingChange) {
-        let cellInnerEls = this.cellInnerElRefs.collect()
-        let cellContentEls = this.cellContentElRefs.collect()
+        let cellInnerEls = props.cells.map((cell) => cellInnerElRefs.currentMap[cell.key])
+        let cellContentEls = props.cells.map((cell) => cellContentElRefs.currentMap[cell.key])
 
         if (cellContentEls.length) {
           let originEl = this.base as HTMLElement // BAD
@@ -353,7 +356,7 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
         }
       }
 
-      let limitByContentHeight = this.props.dayMaxEvents === true || this.props.dayMaxEventRows === true
+      let limitByContentHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true
 
       this.setState({
         segHeights: this.computeSegHeights(),
@@ -371,10 +374,17 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
 
 
   computeMaxContentHeight() {
-    let contentEl = this.cellContentElRefs.currentMap[0]
+    let contentEl = this.cellContentElRefs.currentMap[this.props.cells[0].key]
     return contentEl.getBoundingClientRect().height
   }
 
+
+  public getCellEls() {
+    let elMap = this.cellElRefs.currentMap
+
+    return this.props.cells.map((cell) => elMap[cell.key])
+  }
+
 }
 
 TableRow.addStateEquality({

diff --git a/packages/timegrid/src/TimeColsContent.tsx b/packages/timegrid/src/TimeColsContent.tsx
@@ -82,31 +82,28 @@ export default class TimeColsContent extends BaseComponent<TimeColsContentProps>
               {props.axis &&
                 <td class='fc-timegrid-axis' />
               }
-              {props.cells.map((cell, i) => {
-                let key = cell.date.toISOString()
-                return (
-                  <TimeCol
-                    key={key}
-                    elRef={this.cellElRefs.createRef(key)}
-                    date={cell.date}
-                    dateProfile={props.dateProfile}
-                    nowDate={props.nowDate}
-                    todayRange={props.todayRange}
-                    extraHookProps={cell.extraHookProps}
-                    extraDataAttrs={cell.extraDataAttrs}
-                    extraClassNames={cell.extraClassNames}
-                    fgEventSegs={fgEventSegsByRow[i]}
-                    bgEventSegs={bgEventSegsByRow[i]}
-                    businessHourSegs={businessHourSegsByRow[i]}
-                    nowIndicatorSegs={nowIndicatorSegsByRow[i]}
-                    dateSelectionSegs={dateSelectionSegsByRow[i]}
-                    eventDrag={eventDragByRow[i]}
-                    eventResize={eventResizeByRow[i]}
-                    slatCoords={props.slatCoords}
-                    eventSelection={props.eventSelection}
-                  />
-                )
-              })}
+              {props.cells.map((cell, i) => (
+                <TimeCol
+                  key={cell.key}
+                  elRef={this.cellElRefs.createRef(cell.key)}
+                  date={cell.date}
+                  dateProfile={props.dateProfile}
+                  nowDate={props.nowDate}
+                  todayRange={props.todayRange}
+                  extraHookProps={cell.extraHookProps}
+                  extraDataAttrs={cell.extraDataAttrs}
+                  extraClassNames={cell.extraClassNames}
+                  fgEventSegs={fgEventSegsByRow[i]}
+                  bgEventSegs={bgEventSegsByRow[i]}
+                  businessHourSegs={businessHourSegsByRow[i]}
+                  nowIndicatorSegs={nowIndicatorSegsByRow[i]}
+                  dateSelectionSegs={dateSelectionSegsByRow[i]}
+                  eventDrag={eventDragByRow[i]}
+                  eventResize={eventResizeByRow[i]}
+                  slatCoords={props.slatCoords}
+                  eventSelection={props.eventSelection}
+                />
+              ))}
             </tr>
           </tbody>
         </table>
@@ -155,8 +152,5 @@ export default class TimeColsContent extends BaseComponent<TimeColsContentProps>
 
 
 function collectCellEls(elMap: { [key: string]: HTMLElement }, cells: TableCellModel[]) {
-  return cells.map((cell) => {
-    let key = cell.date.toISOString() // store in the cell! bad to keep recomputing
-    return elMap[key]
-  })
+  return cells.map((cell) => elMap[cell.key])
 }