CalendarRoot

packages/common/src/CalendarContent.tsx

@@ -12,8 +12,6 @@ import { __assign } from 'tslib'
 import { createElement, createRef, Component, VUIEvent, Fragment } from './vdom'
 import { buildDelegationHandler } from './util/dom-event'
 import { ViewContainer } from './ViewContainer'
-import { CssDimValue } from './scrollgrid/util'
-import { getCanVGrowWithinCell } from './util/table-styling'
 import { Interaction, InteractionSettingsInput, InteractionClass, parseInteractionSettings, interactionSettingsStore } from './interactions/interaction'
 import { DateComponent } from './component/DateComponent'
 import { EventClicking } from './interactions/EventClicking'
@@ -23,16 +21,13 @@ import { CalendarInteraction } from './calendar-utils'
 import { DelayedRunner } from './util/runner'
 
 
-export type CalendarContentProps = CalendarData
-
-interface CalendarContentState {
+export interface CalendarContentProps extends CalendarData {
   forPrint: boolean
+  isHeightAuto: boolean
 }
 
-const FORCE_PRINT = false // temporary
-
 
-export class CalendarContent extends Component<CalendarContentProps, CalendarContentState> {
+export class CalendarContent extends Component<CalendarContentProps> {
 
   context: never
 
@@ -45,10 +40,6 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
   private interactionsStore: { [componentUid: string]: Interaction[] } = {}
   private calendarInteractions: CalendarInteraction[]
 
-  state = {
-    forPrint: FORCE_PRINT
-  }
-
 
   /*
   renders INSIDE of an outer div
@@ -70,7 +61,7 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
     let viewHeight: string | number = ''
     let viewAspectRatio: number | undefined
 
-    if (isHeightAuto(options)) {
+    if (props.isHeightAuto) {
       viewHeight = ''
 
     } else if (options.height != null) {
@@ -132,9 +123,6 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
 
 
   componentDidMount() {
-    window.addEventListener('beforeprint', this.handleBeforePrint)
-    window.addEventListener('afterprint', this.handleAfterPrint)
-
     let { props } = this
     this.calendarInteractions = props.pluginHooks.calendarInteractions
       .map((calendarInteractionClass) => {
@@ -157,9 +145,6 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
 
 
   componentWillUnmount() {
-    window.removeEventListener('beforeprint', this.handleBeforePrint)
-    window.removeEventListener('afterprint', this.handleAfterPrint)
-
     window.removeEventListener('resize', this.handleWindowResize)
     this.resizeRunner.clear()
 
@@ -169,15 +154,6 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
   }
 
 
-  handleBeforePrint = () => {
-    this.setState({ forPrint: true })
-  }
-
-  handleAfterPrint = () => {
-    this.setState({ forPrint: false })
-  }
-
-
   _handleNavLinkClick(ev: VUIEvent, anchorEl: HTMLElement) {
     let { dateEnv, options, calendarApi } = this.props
 
@@ -228,8 +204,8 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
       eventSelection: props.eventSelection,
       eventDrag: props.eventDrag,
       eventResize: props.eventResize,
-      isHeightAuto: this.state.forPrint || isHeightAuto(options),
-      forPrint: this.state.forPrint
+      isHeightAuto: props.isHeightAuto,
+      forPrint: props.forPrint
     }
 
     let transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers)
@@ -329,44 +305,6 @@ function buildToolbarProps(
 }
 
 
-function isHeightAuto(options) {
-  return options.height === 'auto' || options.contentHeight === 'auto'
-}
-
-
-// Outer Div Rendering
-// -----------------------------------------------------------------------------------------------------------------
-
-
-export function computeCalendarClassNames(props: CalendarData) {
-  let classNames: string[] = [
-    'fc',
-    FORCE_PRINT ? 'fc-media-print' : 'fc-media-screen',
-    'fc-direction-' + props.options.direction,
-    props.theme.getClass('root')
-  ]
-
-  if (!getCanVGrowWithinCell()) {
-    classNames.push('fc-liquid-hack')
-  }
-
-  return classNames
-}
-
-
-// NOTE: consult view-height-computation in render()
-export function computeCalendarHeight(props: CalendarData): CssDimValue {
-  let { options } = props
-
-  if (!isHeightAuto(options) && options.height != null) {
-    return options.height
-  }
-
-  return ''
-}
-
-
-
 // Plugin
 // -----------------------------------------------------------------------------------------------------------------
 

packages/common/src/CalendarRoot.tsx

@@ -0,0 +1,71 @@
+import { ComponentChildren } from './vdom'
+import { BaseComponent } from './vdom-util'
+import { CssDimValue } from './scrollgrid/util'
+import { CalendarOptions } from './options'
+import { Theme } from './theme/Theme'
+import { getCanVGrowWithinCell } from './util/table-styling'
+
+
+export interface CalendarRootProps {
+  options: CalendarOptions
+  theme: Theme
+  children: (classNames: string[], height: CssDimValue, isHeightAuto: boolean, forPrint: boolean) => ComponentChildren
+}
+
+interface CalendarRootState {
+  forPrint: boolean
+}
+
+
+export class CalendarRoot extends BaseComponent<CalendarRootProps, CalendarRootState> {
+
+  state = {
+    forPrint: false
+  }
+
+
+  render() {
+    let { props } = this
+    let { options } = props
+    let { forPrint } = this.state
+
+    let isHeightAuto = !forPrint && options.height === 'auto' || options.contentHeight === 'auto'
+    let height = (!isHeightAuto && options.height != null) ? options.height : ''
+
+    let classNames: string[] = [
+      'fc',
+      forPrint ? 'fc-media-print' : 'fc-media-screen',
+      'fc-direction-' + options.direction,
+      props.theme.getClass('root')
+    ]
+
+    if (!getCanVGrowWithinCell()) {
+      classNames.push('fc-liquid-hack')
+    }
+
+    return props.children(classNames, height, isHeightAuto, forPrint)
+  }
+
+
+  componentDidMount() {
+    window.addEventListener('beforeprint', this.handleBeforePrint)
+    window.addEventListener('afterprint', this.handleAfterPrint)
+  }
+
+
+  componentWillUnmount() {
+    window.removeEventListener('beforeprint', this.handleBeforePrint)
+    window.removeEventListener('afterprint', this.handleAfterPrint)
+  }
+
+
+  handleBeforePrint = () => {
+    this.setState({ forPrint: true })
+  }
+
+
+  handleAfterPrint = () => {
+    this.setState({ forPrint: false })
+  }
+
+}

packages/common/src/main.ts

@@ -164,7 +164,8 @@ export { PluginDef, PluginDefInput, ViewPropsTransformer, ViewContainerAppend }
 export { createPlugin } from './plugin-system'
 export { Action } from './reducers/Action'
 export { CalendarContext } from './CalendarContext'
-export { CalendarContentProps, CalendarContent, computeCalendarClassNames, computeCalendarHeight } from './CalendarContent'
+export { CalendarContentProps, CalendarContent } from './CalendarContent'
+export { CalendarRoot } from './CalendarRoot'
 
 export { DayHeader } from './common/DayHeader'
 export { computeFallbackHeaderFormat } from './common/table-utils'

packages/core/src/Calendar.tsx

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib'
 import {
   CalendarOptions, Action, CalendarContent, render, createElement, DelayedRunner, CssDimValue, applyStyleProp,
-  CalendarApi, computeCalendarClassNames, computeCalendarHeight, isArraysEqual, CalendarDataManager, CalendarData,
+  CalendarApi, CalendarRoot, isArraysEqual, CalendarDataManager, CalendarData,
   CustomContentRenderContext
  } from '@fullcalendar/common'
 import { flushToDom } from './vdom'
@@ -57,15 +57,25 @@ export class Calendar extends CalendarApi {
 
     if (this.isRendering) {
       this.isRendered = true
-
       let { currentData } = this
-      this.setClassNames(computeCalendarClassNames(currentData))
-      this.setHeight(computeCalendarHeight(currentData))
 
       render(
-        <CustomContentRenderContext.Provider value={this.customContentRenderId}>
-          <CalendarContent {...currentData} />
-        </CustomContentRenderContext.Provider>,
+        <CalendarRoot options={currentData.calendarOptions} theme={currentData.theme}>
+          {(classNames, height, isHeightAuto, forPrint) => {
+            this.setClassNames(classNames)
+            this.setHeight(height)
+
+            return (
+              <CustomContentRenderContext.Provider value={this.customContentRenderId}>
+                <CalendarContent
+                  isHeightAuto={isHeightAuto}
+                  forPrint={forPrint}
+                  {...currentData}
+                />
+              </CustomContentRenderContext.Provider>
+            )
+          }}
+        </CalendarRoot>,
         this.el
       )