register/unregister via calendarcomponent

packages-premium

@@ -1 +1 @@
-Subproject commit c21b2c3e8a206bfa2794b3c8823f62bb3be0936f
+Subproject commit feda16ea9a71c2ccb6b8d3555063bc6b83a0d8d8

packages/core/src/Calendar.tsx

@@ -15,11 +15,7 @@ import { eventTupleToStore } from './structs/event-store'
 import { ViewSpec } from './structs/view-spec'
 import { CalendarComponent } from './CalendarComponent'
 import { __assign } from 'tslib'
-import { DateComponent } from './component/DateComponent'
 import { PointerDragEvent } from './interactions/pointer'
-import { InteractionSettingsInput, parseInteractionSettings, Interaction, interactionSettingsStore, InteractionClass } from './interactions/interaction'
-import { EventClicking } from './interactions/EventClicking'
-import { EventHovering } from './interactions/EventHovering'
 import { render, h, createRef, flushToDom } from './vdom'
 import { TaskRunner, DelayedRunner } from './util/runner'
 import { ViewApi } from './ViewApi'
@@ -67,8 +63,7 @@ export class Calendar {
   componentRef = createRef<CalendarComponent>()
 
   // interaction
-  calendarInteractions: CalendarInteraction[]
-  interactionsStore: { [componentUid: string]: Interaction[] } = {}
+  calendarInteractions: CalendarInteraction[] // this tooooo
 
   get view() { return this.state.viewApi } // for public API
 
@@ -387,7 +382,7 @@ export class Calendar {
 
   // Given a duration singular unit, like "week" or "day", finds a matching view spec.
   // Preference is given to views that have corresponding buttons.
-  getUnitViewSpec(unit: string): ViewSpec | null {
+  private getUnitViewSpec(unit: string): ViewSpec | null {
     let { viewSpecs, toolbarConfig } = this.state
     let viewTypes = [].concat(toolbarConfig.viewsWithButtons)
     let i
@@ -545,39 +540,6 @@ export class Calendar {
   }
 
 
-  // Component Registration
-  // -----------------------------------------------------------------------------------------------------------------
-
-
-  registerInteractiveComponent(component: DateComponent<any>, settingsInput: InteractionSettingsInput) {
-    let settings = parseInteractionSettings(component, settingsInput)
-    let DEFAULT_INTERACTIONS: InteractionClass[] = [
-      EventClicking,
-      EventHovering
-    ]
-    let interactionClasses: InteractionClass[] = DEFAULT_INTERACTIONS.concat(
-      this.state.pluginHooks.componentInteractions
-    )
-    let interactions = interactionClasses.map((interactionClass) => {
-      return new interactionClass(settings)
-    })
-
-    this.interactionsStore[component.uid] = interactions
-    interactionSettingsStore[component.uid] = settings
-  }
-
-
-  unregisterInteractiveComponent(component: DateComponent<any>) {
-
-    for (let listener of this.interactionsStore[component.uid]) {
-      listener.destroy()
-    }
-
-    delete this.interactionsStore[component.uid]
-    delete interactionSettingsStore[component.uid]
-  }
-
-
   // Date Selection / Event Selection / DayClick
   // -----------------------------------------------------------------------------------------------------------------
 

packages/core/src/CalendarComponent.tsx

@@ -17,6 +17,10 @@ import { CssDimValue } from './scrollgrid/util'
 import { Theme } from './theme/Theme'
 import { getCanVGrowWithinCell } from './util/table-styling'
 import { ViewComponent } from './structs/view-config'
+import { Interaction, InteractionSettingsInput, InteractionClass, parseInteractionSettings, interactionSettingsStore } from './interactions/interaction'
+import { DateComponent } from './component/DateComponent'
+import { EventClicking } from './interactions/EventClicking'
+import { EventHovering } from './interactions/EventHovering'
 
 
 export interface CalendarComponentProps extends CalendarState {
@@ -42,6 +46,7 @@ export class CalendarComponent extends Component<CalendarComponentProps, Calenda
   private headerRef = createRef<Toolbar>()
   private footerRef = createRef<Toolbar>()
   private viewRef = createRef<ViewComponent>()
+  private interactionsStore: { [componentUid: string]: Interaction[] } = {}
 
   state = {
     forPrint: false
@@ -99,7 +104,9 @@ export class CalendarComponent extends Component<CalendarComponentProps, Calenda
       props.dispatch,
       props.getCurrentState,
       props.emitter,
-      props.calendar
+      props.calendar,
+      this.registerInteractiveComponent,
+      this.unregisterInteractiveComponent
     )
 
     return (
@@ -243,6 +250,38 @@ export class CalendarComponent extends Component<CalendarComponentProps, Calenda
   }
 
 
+  // Component Registration
+  // -----------------------------------------------------------------------------------------------------------------
+
+
+  registerInteractiveComponent = (component: DateComponent<any>, settingsInput: InteractionSettingsInput) => {
+    let settings = parseInteractionSettings(component, settingsInput)
+    let DEFAULT_INTERACTIONS: InteractionClass[] = [
+      EventClicking,
+      EventHovering
+    ]
+    let interactionClasses: InteractionClass[] = DEFAULT_INTERACTIONS.concat(
+      this.props.pluginHooks.componentInteractions
+    )
+    let interactions = interactionClasses.map((interactionClass) => {
+      return new interactionClass(settings)
+    })
+
+    this.interactionsStore[component.uid] = interactions
+    interactionSettingsStore[component.uid] = settings
+  }
+
+
+  unregisterInteractiveComponent = (component: DateComponent<any>) => {
+
+    for (let listener of this.interactionsStore[component.uid]) {
+      listener.destroy()
+    }
+
+    delete this.interactionsStore[component.uid]
+    delete interactionSettingsStore[component.uid]
+  }
+
 }
 
 

packages/core/src/component/ComponentContext.ts

@@ -11,6 +11,8 @@ import { ReducerContext } from '../reducers/ReducerContext'
 import { Action } from '../reducers/types'
 import { Emitter } from '../common/Emitter'
 import { CalendarState } from '../reducers/types'
+import { InteractionSettingsInput } from '../interactions/interaction'
+import { DateComponent } from './DateComponent'
 
 export const ComponentContextType = createContext<ComponentContext>({} as any) // for Components
 export type ResizeHandler = (force: boolean) => void
@@ -27,6 +29,8 @@ export interface ComponentContext extends ReducerContext {
   addResizeHandler: (handler: ResizeHandler) => void
   removeResizeHandler: (handler: ResizeHandler) => void
   createScrollResponder: (execFunc: ScrollRequestHandler) => ScrollResponder
+  registerInteractiveComponent: (component: DateComponent<any>, settingsInput: InteractionSettingsInput) => void
+  unregisterInteractiveComponent: (component: DateComponent<any>) => void
 }
 
 export function buildViewContext(
@@ -41,7 +45,9 @@ export function buildViewContext(
   dispatch: (action: Action) => void,
   getCurrentState: () => CalendarState,
   emitter: Emitter,
-  calendar: Calendar
+  calendar: Calendar,
+  registerInteractiveComponent: (component: DateComponent<any>, settingsInput: InteractionSettingsInput) => void,
+  unregisterInteractiveComponent: (component: DateComponent<any>) => void
 ): ComponentContext {
   let reducerContext: ReducerContext = {
     dateEnv,
@@ -69,6 +75,8 @@ export function buildViewContext(
     },
     createScrollResponder(execFunc: ScrollRequestHandler) {
       return new ScrollResponder(execFunc, reducerContext)
-    }
+    },
+    registerInteractiveComponent,
+    unregisterInteractiveComponent
   }
 }

packages/daygrid/src/DayTable.tsx

@@ -74,12 +74,10 @@ export class DayTable extends DateComponent<DayTableProps, ComponentContext> {
 
 
   handleRootEl = (rootEl: HTMLDivElement | null) => {
-    let { calendar } = this.context
-
     if (rootEl) {
-      calendar.registerInteractiveComponent(this, { el: rootEl })
+      this.context.registerInteractiveComponent(this, { el: rootEl })
     } else {
-      calendar.unregisterInteractiveComponent(this)
+      this.context.unregisterInteractiveComponent(this)
     }
   }
 

packages/daygrid/src/MorePopover.tsx

@@ -91,12 +91,12 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
     this.popoverEl = popoverEl
 
     if (popoverEl) {
-      this.context.calendar.registerInteractiveComponent(this, {
+      this.context.registerInteractiveComponent(this, {
         el: popoverEl,
         useEventCenter: false
       })
     } else {
-      this.context.calendar.unregisterInteractiveComponent(this)
+      this.context.unregisterInteractiveComponent(this)
     }
   }
 

packages/list/src/ListView.tsx

@@ -69,11 +69,11 @@ export class ListView extends DateComponent<ViewProps> {
 
   setRootEl = (rootEl: HTMLDivElement | null) => {
     if (rootEl) {
-      this.context.calendar.registerInteractiveComponent(this, { // TODO: make aware that it doesn't do Hits
+      this.context.registerInteractiveComponent(this, { // TODO: make aware that it doesn't do Hits
         el: rootEl
       })
     } else {
-      this.context.calendar.unregisterInteractiveComponent(this)
+      this.context.unregisterInteractiveComponent(this)
     }
   }
 

packages/timegrid/src/DayTimeCols.tsx

@@ -90,12 +90,10 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
 
 
   handleRootEl = (rootEl: HTMLDivElement | null) => {
-    let { calendar } = this.context
-
     if (rootEl) {
-      calendar.registerInteractiveComponent(this, { el: rootEl })
+      this.context.registerInteractiveComponent(this, { el: rootEl })
     } else {
-      calendar.unregisterInteractiveComponent(this)
+      this.context.unregisterInteractiveComponent(this)
     }
   }