class ViewComponent

extends AppComponent implements UIRenderable

Represents an application component that encapsulates a view as a bound component. Bindings in nested view components are bound to the ViewComponent instance itself.

Note: This class is similar in functionality to ViewActivity, but ViewComponent views are created immediately, whereas view activities need to be activated first before their views are created. View components also propagate (re-emit) events of type UIComponentEvent for user interactions such as ‘Click’, ‘FocusIn’, etc.

Example

class MyView extends ViewComponent.with({
  // view declaration goes here, JSX is allowed too:
  view: UICell.with(
    UIRow.with(UIButton.withLabel("Click me", "+ButtonClicked")),
    // include content like so:
    UIViewRenderer.withBoundContent()
  ),

  // optional list of properties that can be preset, and default values:
  defaults: {
    foo: "bar",
  },

  // optional list of properties that will contain preset content
  // in the order in which they can be preset (default is 'content')
  content: ["content"],

  // optional event handler (useful if not using a class)
  event(e) {
    // ... handle events here
  },
}) {
  onButtonClicked(e: UIComponentEvent<UIButton>) {
    // ... or handle events individually here
  }

  // any other class methods, constructor etc. can go here ...
}

// use the above class as follows (or use JSX syntax) --
const view = UICell.with(
  // ...
  MyView.with({ foo: "xyz" }, UIRow.with(/* ... */))
);

Constructor

(): ViewComponent

.with() static

[1]. <T extends typeof ViewComponent, PresetT = object, ContentPropertiesT extends string = "content">(this: T, options?: { defaults?: PresetT | (() => PresetT); content?: ContentPropertiesT[]; view: typeof Component | ComponentConstructor<...>; }): PresetType<...>
[2]. <T extends typeof ViewComponent>(this: T, presets: PresetArgType<T>): T
[3]. <T extends typeof ViewComponent>(this: T, presets: PresetArgType<T>, content_0: UIRenderableConstructor, ...content_1: UIRenderableConstructor[]): T
[4]. <T extends typeof ViewComponent>(this: T, content_0: UIRenderableConstructor, ...content_1: UIRenderableConstructor[]): T

[1] Declare a view component class with given properties and view

[2] Declare a view component class with given preset properties

[3] Declare a view component class with given preset properties and content

[4] Declare a view component class with given view or content.

Note: The ViewComponent class overrides the standard Component.with method to be able to return a type that is compatible with JSX syntax, while remaining compatible with the original type. Common usage is more straightforward than the type definition suggests – refer to the example above.

.presetChildView() static

<TViewComponent>(this: (new (...args: never[]) => TViewComponent) & typeof ViewComponent, propertyName: keyof TViewComponent, View: UIRenderableConstructor, boundProperties?: true | (keyof TViewComponent)[]): void

• propertyName — The property that will be set. This property must already be a managed child property, decorated using @component and optionally @delegateEvents for event handling.

• View — The (preset) constructor for the child view. This constructor will be used to create a child component for each ViewComponent instance.

• boundProperties — A list of properties for which bindings (on the child component) should be bound to the ViewComponent instance, instead of the original parent. Alternatively, set this to true to bind all bindings on the ViewComponent instance.

Create a child view of given type automatically for each instance of the view component. Bindings for given properties are bound to the ViewComponent instance, others are ignored so that their values will be taken from the containing bound parent instead of the ViewComponent itself.

.view

UIRenderable

The root component that makes up the content for this view, as a managed child reference.

.delegateEvent() protected

(e: ManagedEvent, propertyName: string): true

Override event delegation, to also propagate events of type UIComponentEvent.

.render()

(callback?: RenderCallback<Output<UIRenderable, any>>): void

Render the encapsulated view for this component. This method should not be called directly; it is called automatically based on changes to the application render context.

.beforeRender() protected

(): void

Method that is called immediately before the view is rendered; can be overridden.

.removeViewAsync()

(deactivate?: boolean): Promise<void>

Remove the current view output, if any.

This method is called automatically after the root view component or render context is removed, and should not be called directly.

.requestFocus()

(): void

Request input focus on the view component, if any.

.renderContext

UIRenderContext

Inherited from AppComponent.renderContext.

.viewportContext

any

Inherited from AppComponent.viewportContext.

.activationContext

AppActivationContext

Inherited from AppComponent.activationContext.

.isPresetComponent() protected

(): boolean

Inherited from Component.isPresetComponent.

.getParentComponent()

<TParent extends Component = Component>(ParentClass?: ComponentConstructor<TParent>): TParent

Inherited from Component.getParentComponent.

.getBoundParentComponent()

<TParent extends Component>(ParentClass?: ComponentConstructor<TParent>): TParent

Inherited from Component.getBoundParentComponent.

.emitAction()

(name: string, inner?: ManagedEvent, context?: ManagedObject): void

Inherited from Component.emitAction.

.propagateComponentEvent() deprecated

(name: string, inner?: ManagedEvent): void

Inherited from Component.propagateComponentEvent.

.managedId

number

Inherited from ManagedObject.managedId.

.managedState

ManagedState

Inherited from ManagedObject.managedState.

.getReferenceCount() protected

(): number

Inherited from ManagedObject.getReferenceCount.

.getManagedReferrers() protected

(): ManagedObject[]

Inherited from ManagedObject.getManagedReferrers.

.getManagedParent() protected

<TParent extends ManagedObject = ManagedObject>(ParentClass?: ManagedObjectConstructor<TParent>): TParent

Inherited from ManagedObject.getManagedParent.

.emit()

<TEvent extends ManagedEvent = ManagedEvent, TConstructorArgs extends any[] = any[]>(e: string | TEvent | (new (...args: TConstructorArgs) => TEvent), ...constructorArgs: TConstructorArgs): this

Inherited from ManagedObject.emit.

.emitChange()

(name?: string): void

Inherited from ManagedObject.emitChange.

.propagateChildEvents() protected deprecated

(...types: ((new (...args: any[]) => ManagedEvent) | ((e: ManagedEvent) => any))[]): this

Inherited from ManagedObject.propagateChildEvents.

.activateManagedAsync() protected

(): Promise<any>

Inherited from ManagedObject.activateManagedAsync.

.deactivateManagedAsync() protected

(): Promise<void>

Inherited from ManagedObject.deactivateManagedAsync.

.destroyManagedAsync() protected

(): Promise<void>

Inherited from ManagedObject.destroyManagedAsync.

.onManagedStateActivatingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateActivatingAsync.

.onManagedStateActiveAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateActiveAsync.

.onManagedStateDeactivatingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateDeactivatingAsync.

.onManagedStateInactiveAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateInactiveAsync.

.onManagedStateDestroyingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateDestroyingAsync.

---

ViewComponent.PresetViewComponentConstructor

The result of ViewComponent.with(…), used like any other preset component constructor.

.with()

(presets: { [P in keyof PresetT]?: Type | PresetT[P]; } | { [eventName: string]: string; }, ...content: UIRenderableConstructor[]): PresetType<PresetT, ContentPropertiesT>

Declare a view component class with given preset properties and content.

---

ViewComponent.PresetType

type PresetType<PresetT, ContentPropertiesT extends string> = {
[P in keyof typeof ViewComponent]: typeof ViewComponent[P];
} & PresetViewComponentConstructor<PresetT, ContentPropertiesT>;

The result of ViewComponent.with(…), used like any other preset component constructor.