fix some bugs

packages-premium

@@ -1 +1 @@
-Subproject commit 921e31ed966ce210b57bf7ed654b894ffb5641b2
+Subproject commit c85fd5e977f5c941d580b8b60f11ddf5c7c2b920

packages/core/src/ViewContainer.tsx

@@ -12,25 +12,28 @@ export interface ViewContainerProps {
 }
 
 
-// TODO: shouldn't the the fc-view be the inner container???
 // TODO: do function component?
-// TODO: use classnames instead of css props
 export default class ViewContainer extends BaseComponent<ViewContainerProps> {
 
   render(props: ViewContainerProps) {
+    let classNames = [ 'fc-view-container' ]
+    let height: CssDimValue = ''
+    let paddingBottom: CssDimValue = ''
+
     if (props.height) { // TODO: better test
-      return (
-        <div class='fc-view-container' style={{ height: props.height }} ref={props.elRef} onClick={props.onClick}>
-          {props.children}
-        </div>
-      )
+      height = props.height
     } else {
-      return (
-        <div class='fc-view-container fc-view-container--aspectratio' style={{ paddingBottom: ((1 / props.aspectRatio) * 100 + '%') }} >
-          {props.children}
-        </div>
-      )
+      classNames.push('fc-view-container--aspectratio')
+      paddingBottom = (1 / props.aspectRatio) * 100 + '%'
     }
+
+    return (
+      <div
+        ref={props.elRef}
+        onClick={props.onClick}
+        class={classNames.join(' ')} style={{ height, paddingBottom }}
+      >{props.children}</div>
+    )
   }
 
 }

packages/daygrid/src/DayBgCell.tsx

@@ -34,7 +34,8 @@ export default class DayBgCell extends BaseComponent<DayBgCellProps> {
     return (
       <td
         ref={this.handleEl}
-        key={dateStr /* fresh rerender for new date, mostly because of dayRender */}
+        key={dateStr /* fresh rerender for new date, mostly because of dayRender
+          TODO: only do if there are dayRender triggers!!! */}
         class={classes.join(' ')}
         { ...dataAttrs }
         { ...otherAttrs }

packages/daygrid/src/DayTable.tsx

@@ -52,7 +52,7 @@ export default class DayTable extends DateComponent<DayTableProps, ComponentCont
     return (
       <Table
         ref={this.tableRef}
-        rootElRef={this.handleRootEl}
+        elRef={this.handleRootEl}
         { ...this.slicer.sliceProps(props, dateProfile, props.nextDayThreshold, context.calendar, dayTableModel) }
         dateProfile={dateProfile}
         cells={dayTableModel.cells}

packages/daygrid/src/Table.tsx

@@ -1,5 +1,5 @@
 import {
-  h, Ref, Fragment, createRef,
+  h, Fragment, createRef,
   insertAfterElement,
   findDirectChildren,
   removeElement,
@@ -12,7 +12,6 @@ import {
   BaseComponent,
   ComponentContext,
   subrenderer,
-  setRef,
   createFormatter,
   VNode
 } from '@fullcalendar/core'
@@ -35,7 +34,6 @@ export interface TableProps extends TableSkeletonProps {
   eventSelection: string
   eventDrag: EventSegUiInteractionState | null
   eventResize: EventSegUiInteractionState | null
-  rootElRef?: Ref<HTMLDivElement>
   colGroupNode: VNode
   eventLimit: boolean | number
   vGrow: boolean
@@ -92,6 +90,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
           colWeekNumbersVisible={props.colWeekNumbersVisible}
           cellWeekNumbersVisible={props.cellWeekNumbersVisible}
           colGroupNode={props.colGroupNode}
+          elRef={props.elRef}
           onReceiveEls={this.handleSkeletonEls}
           vGrow={props.vGrow}
         />
@@ -156,8 +155,6 @@ export default class Table extends BaseComponent<TableProps, TableState> {
       this.cellEls = cellEls
       this.isCellSizesDirty = true
     }
-
-    setRef(this.props.rootElRef, rootEl)
   }
 
 

packages/daygrid/src/TableMirrorEvents.tsx

@@ -15,6 +15,7 @@ export default class TableMirrorEvents extends TableEvents {
 function attachSegs({ segs, rowEls, colCnt, colGroupNode, renderIntro, interactingSeg }: TableEventsProps, context: ComponentContext) {
 
   let rowStructs = renderSegRows(segs, rowEls.length, colCnt, renderIntro, context)
+  let skeletonEls: HTMLElement[] = []
 
   // inject each new event skeleton into each associated row
   rowEls.forEach(function(rowNode, row) {
@@ -47,15 +48,13 @@ function attachSegs({ segs, rowEls, colCnt, colGroupNode, renderIntro, interacti
     skeletonEl.querySelector('table').appendChild(rowStructs[row].tbodyEl)
 
     rowNode.appendChild(skeletonEl)
+    skeletonEls.push(skeletonEl)
   })
 
-
-  return rowStructs
+  return skeletonEls
 }
 
 
-function detachSegs(rowStructs) {
-  for (let rowStruct of rowStructs) {
-    removeElement(rowStruct.tbodyEl)
-  }
+function detachSegs(skeletonEls: HTMLElement[]) {
+  skeletonEls.forEach(removeElement)
 }

packages/daygrid/src/TableSkeleton.tsx

@@ -3,13 +3,15 @@ import {
   DateProfile,
   DateMarker,
   BaseComponent,
-  RefMap
+  RefMap,
+  Ref
 } from '@fullcalendar/core'
 import DayBgRow from './DayBgRow'
 import TableSkeletonDayCell from './TableSkeletonDayCell'
 
 
 export interface TableSkeletonProps {
+  elRef?: Ref<HTMLDivElement>
   onReceiveEls?: (rowEls: HTMLElement[] | null, cellEls: HTMLElement[][] | null) => void
   dateProfile: DateProfile
   cells: CellModel[][] // cells-BY-ROW
@@ -48,7 +50,7 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
     }
 
     return (
-      <div class={'fc-day-grid' + (props.vGrow ? ' vgrow' : '')}>
+      <div class={'fc-day-grid' + (props.vGrow ? ' vgrow' : '')} ref={props.elRef}>
         {rowNodes}
       </div>
     )

packages/timegrid/src/TimeColsView.tsx

@@ -177,12 +177,14 @@ export default abstract class TimeColsView extends View {
       weekText = dateEnv.format(range.start, WEEK_HEADER_FORMAT)
 
       return [
-        <th class={'fc-axis fc-week-number' + theme.getClass('tableCellHeader')} style={this.getAxisStyles()}>
-          <GotoAnchor
-            navLinks={options.navLinks}
-            gotoOptions={{ date: range.start, type: 'week', forceOff: dayCnt > 1 }}
-            extraAttrs={{ className: 'shrink' }}
-          >{weekText}</GotoAnchor>
+        <th class={'fc-axis shrink fc-week-number' + theme.getClass('tableCellHeader')} style={this.getAxisStyles()}>
+          <div data-fc-width-all={1}>
+            <GotoAnchor
+              navLinks={options.navLinks}
+              gotoOptions={{ date: range.start, type: 'week', forceOff: dayCnt > 1 }}
+              extraAttrs={{ 'data-fc-width-content': 1 }}
+            >{weekText}</GotoAnchor>
+          </div>
         </th>
       ]
     }