Flarum (v2.0.0-beta.4)
    Preparing search index...

    The Component class defines a user interface 'building block'. A component generates a virtual DOM to be rendered on each redraw.

    Essentially, this is a wrapper for Mithril's components that adds several useful features:

    • In the oninit and onbeforeupdate lifecycle hooks, we store vnode attrs in `this.attrs. This allows us to use attrs across components without having to pass the vnode to every single method.
    • The static initAttrs method allows a convenient way to provide defaults (or to otherwise modify) the attrs that have been passed into a component.
    • When the component is created in the DOM, we store its DOM element under this.element; this lets us use jQuery to modify child DOM state from internal methods via the this.$() method.
    • A convenience component method, which serves as an alternative to hyperscript and JSX.

    As with other Mithril components, components extending Component can be initialized and nested using JSX, hyperscript, or a combination of both. The component method can also be used.

    return m('div', <MyComponent foo="bar"><p>Hello World</p></MyComponent>);
    
    return m('div', MyComponent.component({foo: 'bar'), m('p', 'Hello World!'));
    

    Hierarchy (View Summary)

    Index

    Constructors

    Properties

    chart: any
    chartEntity?: string
    chartPeriod?: string
    customPeriod: IDateSelection | null = null
    customPeriodData: Record<string, undefined | any> = {}
    entities: string[] = ...
    lifetimeData: any
    loadingCustom: Record<string, "unloaded" | "loading" | "loaded" | "fail"> = ...
    loadingLifetime: boolean = true
    loadingTimed: Record<string, "unloaded" | "loading" | "loaded" | "fail"> = ...
    noData: boolean = false
    periods: Record<string, IPeriodDeclaration> | undefined
    selectedEntity: string = 'users'
    selectedPeriod: string | undefined
    timedData: Record<string, undefined | any> = {}

    Methods

    • Parameters

      • thisPeriod: { end: number; start: number }

      Returns { end: number; start: number }

    • Parameters

      • entity: string
      • period: { end: number; start: number }

      Returns number