get some types in order

src/Calendar.ts

@@ -23,6 +23,8 @@ import { CalendarState, reduce } from './reducers/main'
 import { parseSelection, SelectionInput } from './reducers/selection'
 import reselector from './util/reselector'
 import { assignTo } from './util/object'
+import { RenderForceFlags } from './component/Component'
+
 
 export default class Calendar {
 
@@ -141,11 +143,7 @@ export default class Calendar {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  _render(forces?) {
-    if (!forces) {
-      forces = {}
-    }
-
+  _render(forces: RenderForceFlags = {}) {
     this.applyElClassNames()
 
     if (!this.isSkeletonRendered) {
@@ -487,8 +485,8 @@ export default class Calendar {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  renderView(forces) {
-    let view = this.view
+  renderView(forces: RenderForceFlags) {
+    let { state, view } = this
 
     if (view !== this.latestView) {
       if (view) {
@@ -509,7 +507,14 @@ export default class Calendar {
       view.addScroll(view.queryScroll())
     }
 
-    view.render(this.state, forces)
+    view.render({
+      dateProfile: state.dateProfile,
+      eventStore: state.eventStore,
+      selection: state.selection,
+      dragState: state.dragState,
+      eventResizeState: state.eventResizeState,
+      businessHoursDef: view.opt('businessHours')
+    }, forces)
 
     if (this.updateViewSize()) { // success? // TODO: respect isSizeDirty
       view.popScroll()
@@ -784,7 +789,7 @@ export default class Calendar {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  renderToolbars(forces) {
+  renderToolbars(forces: RenderForceFlags) {
     let headerLayout = this.opt('header')
     let footerLayout = this.opt('footer')
     let now = this.getNow()

src/Toolbar.ts

@@ -1,11 +1,20 @@
 import { htmlEscape } from './util/html'
-import { htmlToElement, appendToElement, removeElement, findElements, createElement } from './util/dom-manip'
-
+import { htmlToElement, appendToElement, findElements, createElement } from './util/dom-manip'
+import { default as Component, RenderForceFlags } from './component/Component'
 
 /* Toolbar with buttons and title
 ----------------------------------------------------------------------------------------------------------------------*/
 
-export default class Toolbar {
+export interface ToolbarRenderProps {
+  layout: any
+  title: string
+  activeButton: string
+  isTodayEnabled: boolean
+  isPrevEnabled: boolean
+  isNextEnabled: boolean
+}
+
+export default class Toolbar extends Component {
 
   calendar: any
   el: HTMLElement = null
@@ -21,22 +30,15 @@ export default class Toolbar {
 
 
   constructor(calendar, extraClassName) {
+    super()
     this.calendar = calendar
-    this.el = createElement('div', { className: 'fc-toolbar ' + extraClassName })
+    this.setElement(
+      createElement('div', { className: 'fc-toolbar ' + extraClassName })
+    )
   }
 
 
-  /*
-    renderProps: {
-      layout
-      title
-      activeButton
-      isTodayEnabled
-      isPrevEnabled
-      isNextEnabled
-    }
-  */
-  render(renderProps, forces) {
+  render(renderProps: ToolbarRenderProps, forces: RenderForceFlags) {
 
     if (renderProps.layout !== this.layout || forces === true) {
       if (this.isLayoutRendered) {
@@ -109,15 +111,14 @@ export default class Toolbar {
   removeElement() {
     this.unrenderLayout()
     this.isLayoutRendered = false
-
-    removeElement(this.el)
-
     this.layout = null
     this.title = null
     this.activeButton = null
     this.isTodayEnabled = null
     this.isPrevEnabled = null
     this.isNextEnabled = null
+
+    super.removeElement()
   }
 
 

src/agenda/AgendaView.ts

@@ -14,9 +14,9 @@ import DayGrid from '../basic/DayGrid'
 import { createDuration } from '../datelib/duration'
 import { createFormatter } from '../datelib/formatting'
 import { EventStore } from '../reducers/event-store'
-import { DateComponentRenderState } from '../reducers/main'
-import { DragState } from '../reducers/drag'
-import { EventResizeState } from '../reducers/event-resize'
+import { RenderForceFlags } from '../component/Component'
+import { DateComponentRenderState } from '../component/DateComponent'
+import { EventInteractionState } from '../reducers/event-interaction'
 import reselector from '../util/reselector'
 
 const AGENDA_ALL_DAY_EVENT_LIMIT = 5
@@ -45,7 +45,7 @@ export default class AgendaView extends View {
   usesMinMaxTime: boolean = true // indicates that minTime/maxTime affects rendering
 
   splitEventStore: any
-  splitUiState: any
+  splitInteractionState: any
 
 
   constructor(calendar, viewSpec) {
@@ -65,7 +65,7 @@ export default class AgendaView extends View {
     })
 
     this.splitEventStore = reselector(splitEventStore)
-    this.splitUiState = reselector(splitUiState)
+    this.splitInteractionState = reselector(splitInteractionState)
   }
 
 
@@ -171,12 +171,12 @@ export default class AgendaView extends View {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  renderChildren(renderState: DateComponentRenderState, forces: any) {
+  renderChildren(renderState: DateComponentRenderState, forces: RenderForceFlags) {
     let allDaySeletion = null
     let timedSelection = null
     let eventStoreGroups = this.splitEventStore(renderState.eventStore)
-    let dragStateGroups = this.splitUiState(renderState.dragState)
-    let eventResizeStateGroups = this.splitUiState(renderState.eventResizeState)
+    let dragStateGroups = this.splitInteractionState(renderState.dragState)
+    let eventResizeStateGroups = this.splitInteractionState(renderState.eventResizeState)
 
     if (renderState.selection) {
       if (renderState.selection.isAllDay) {
@@ -443,7 +443,7 @@ function splitEventStore(eventStore: EventStore) {
 }
 
 
-function splitUiState(state: DragState | EventResizeState) {
+function splitInteractionState(state: EventInteractionState) {
   let allDay = null
   let timed = null
 

src/component/Component.ts

@@ -1,7 +1,10 @@
 import { removeElement } from '../util/dom-manip'
 
 
-export default class Component {
+export type RenderForceFlags = true | { [entity: string]: boolean }
+
+
+export default abstract class Component {
 
   el: HTMLElement
 
@@ -18,4 +21,7 @@ export default class Component {
     //  so we shouldn't kill this.el either.
   }
 
+
+  abstract render(state: any, forces: RenderForceFlags)
+
 }

src/component/DateComponent.ts

@@ -1,5 +1,5 @@
 import { attrsToStr, htmlEscape } from '../util/html'
-import Component from './Component'
+import { default as Component, RenderForceFlags } from './Component'
 import Calendar from '../Calendar'
 import View from '../View'
 import { DateProfile } from '../DateProfileGenerator'
@@ -13,12 +13,20 @@ import { EventStore } from '../reducers/event-store'
 import { BusinessHourDef, buildBusinessHourEventStore } from '../reducers/business-hours'
 import { DateEnv } from '../datelib/env'
 import Theme from '../theme/Theme'
-import { DragState } from '../reducers/drag'
-import { EventResizeState } from '../reducers/event-resize'
-import { DateComponentRenderState } from '../reducers/main'
+import { EventInteractionState } from '../reducers/event-interaction'
 import { assignTo } from '../util/object'
 
 
+export interface DateComponentRenderState {
+  dateProfile: DateProfile
+  eventStore: EventStore
+  selection: Selection | null
+  dragState: EventInteractionState | null
+  eventResizeState: EventInteractionState | null
+  businessHoursDef: BusinessHourDef
+}
+
+
 export default abstract class DateComponent extends Component {
 
   static guid: number = 0 // TODO: better system for this?
@@ -53,8 +61,8 @@ export default abstract class DateComponent extends Component {
   businessHoursDef: BusinessHourDef
   selection: Selection
   eventStore: EventStore
-  dragState: DragState
-  eventResizeState: EventResizeState
+  dragState: EventInteractionState
+  eventResizeState: EventInteractionState
 
 
   constructor(_view, _options?) {
@@ -146,10 +154,7 @@ export default abstract class DateComponent extends Component {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  render(renderState: DateComponentRenderState, forces: any) {
-    if (!forces) {
-      forces = {}
-    }
+  render(renderState: DateComponentRenderState, forces: RenderForceFlags) {
 
     let isSkeletonDirty = forces === true
     let isDatesDirty = forces === true ||
@@ -253,7 +258,7 @@ export default abstract class DateComponent extends Component {
   }
 
 
-  renderChildren(renderState: DateComponentRenderState, forces: any) {
+  renderChildren(renderState: DateComponentRenderState, forces: RenderForceFlags) {
     this.callChildren('render', arguments)
   }
 

src/reducers/drag.ts

@@ -1,7 +0,0 @@
-import { EventStore } from './event-store'
-
-export interface DragState {
-  eventStore: EventStore
-  origSeg: any
-  isTouch: boolean
-}

src/reducers/event-resize.ts

@@ -1,7 +0,0 @@
-import { EventStore } from './event-store'
-
-export interface EventResizeState {
-  eventStore: EventStore
-  origSeg: any
-  isTouch: boolean
-}

src/reducers/main.ts

@@ -1,22 +1,9 @@
 import Calendar from '../Calendar'
-import { DateProfile } from '../DateProfileGenerator'
+import { DateComponentRenderState } from '../component/DateComponent'
 import { EventSourceHash, reduceEventSourceHash } from './event-sources'
-import { EventStore, reduceEventStore } from './event-store'
-import { Selection } from './selection'
-import { BusinessHourDef } from './business-hours'
-import { DragState } from './drag'
-import { EventResizeState } from './event-resize'
+import { reduceEventStore } from './event-store'
 import { DateMarker } from '../datelib/marker'
 
-export interface DateComponentRenderState {
-  dateProfile: DateProfile
-  eventStore: EventStore
-  selection: Selection | null
-  dragState: DragState | null
-  eventResizeState: EventResizeState | null
-  businessHoursDef: BusinessHourDef
-}
-
 export interface CalendarState extends DateComponentRenderState {
   loadingLevel: number
   eventSources: EventSourceHash
@@ -48,7 +35,6 @@ export function reduce(state: CalendarState, action: any, calendar: Calendar): C
             action.dateMarker || state.currentDate
           )
         })
-        newState.businessHoursDef = calendar.view.opt('businessHours') // hack
       }
       break