About Docs GitHub
arrow_upward Back to top
Docs (4.0.0)
arrow_upward Back to top
class ViewComposite method

withPreset

Creates a reusable view composite class.

static

static withPreset<TDefaults extends {}, TContent extends ViewClass[] = ViewClass[], TDeclaredEvents extends string = never, TPreset = {
    [k in keyof TDefaults]?: BindingOrValue<TDefaults[k]>;
} & {
    [e in `on${TDeclaredEvents}`]?: string;
}, TView extends View = View>(defaults: TDefaults, ViewBody?: ViewClass<TView> | ((...content: TContent) => ViewClass<TView>)): ViewComposite.WithPreset<TPreset, TContent, TView, TDefaults>

Summary

This method can be used to define a reusable view, containing built-in UI components or other views. The resulting class can be used directly in a view.

Common use cases for view composites include complex field inputs such as date and time pickers, containers such as cards, accordions, tabs, and split views, and application layout templates.

Parameters

  • defaults — A set of default property values, bindings, and event handlers that will be applied to each instance of the view composite; also determines the preset object type and JSX tag attributes
  • ViewBody — A view class, or a function that returns a view class; an instance of this view will be encapsulated by each view composite object — moreover, if a function is provided, it is also used to define rest parameters for the preset method

Return value

A new class that extends ViewComposite

Description

This method creates a new class that extends ViewComposite, which encapsulates and renders a view object. The constructor of the resulting class takes a single object argument, a preset object, which is applied to the instance using View.applyViewPreset() — setting properties, applying bindings, and adding event handlers. The preset object type follows from the type parameters and/or the provided defaults object.

The resulting class can be used as a JSX tag on its own, with attributes corresponding to the properties of the (default) preset object. Note that the JSX tag does’t create an instance, but a class that further extends the view composite class. Outside of JSX code, the static preset() method can be used for the same purpose.

Note
Note that while view composites and view activities are very similar, as a rule, view composites should not include any business logic (in event handlers or other methods). Hence, use this function only to define groups of UI components and determine their look and feel. Where more code is required, consider either view activities, or view models that can be passed around in your code.

Related