diff --git a/src/platform/web/ui/general/TemplateView.ts b/src/platform/web/ui/general/TemplateView.ts index 93dc8172..ce593f75 100644 --- a/src/platform/web/ui/general/TemplateView.ts +++ b/src/platform/web/ui/general/TemplateView.ts @@ -29,7 +29,6 @@ function objHasFns(obj: ClassNames): obj is { [className: string]: bool return false; } - export type RenderFn = (t: Builder, vm: T) => ViewNode; type EventHandler = ((event: Event) => void); type AttributeStaticValue = string | boolean; @@ -52,20 +51,13 @@ export type Builder = TemplateBuilder & { [tagName in typeof TAG_NAMES[str - add subviews inside the template */ // TODO: should we rename this to BoundView or something? As opposed to StaticView ... -export class TemplateView extends BaseUpdateView { - private _render?: RenderFn; +export abstract class TemplateView extends BaseUpdateView { private _eventListeners?: { node: Element, name: string, fn: EventHandler, useCapture: boolean }[] = undefined; private _bindings?: (() => void)[] = undefined; private _root?: ViewNode = undefined; // public because used by TemplateBuilder _subViews?: IView[] = undefined; - constructor(value: T, render?: RenderFn) { - super(value); - // TODO: can avoid this if we have a separate class for inline templates vs class template views - this._render = render; - } - _attach(): void { if (this._eventListeners) { for (let {node, name, fn, useCapture} of this._eventListeners) { @@ -82,16 +74,12 @@ export class TemplateView extends BaseUpdateView } } + abstract render(t: Builder, value: T): ViewNode; + mount(options?: IMountArgs): ViewNode { const builder = new TemplateBuilder(this) as Builder; try { - if (this._render) { - this._root = this._render(builder, this._value); - } else if (this["render"]) { // overriden in subclass - this._root = this["render"](builder, this._value); - } else { - throw new Error("no render function passed in, or overriden in subclass"); - } + this._root = this.render(builder, this._value); } finally { builder.close(); } @@ -344,7 +332,7 @@ export class TemplateBuilder { // on mappedValue, use `if` or `mapView` map(mapFn: (value: T) => R, renderFn: (mapped: R, t: Builder, vm: T) => ViewNode): ViewNode { return this.mapView(mapFn, mappedValue => { - return new TemplateView(this._value, (t, vm) => { + return new InlineTemplateView(this._value, (t, vm) => { const rootNode = renderFn(mappedValue, t, vm); if (!rootNode) { // TODO: this will confuse mapView which assumes that @@ -366,7 +354,7 @@ export class TemplateBuilder { // creates a conditional subtemplate // use mapView if you need to map to a different view class if(predicate: (value: T) => boolean, renderFn: (t: Builder, vm: T) => ViewNode) { - return this.ifView(predicate, vm => new TemplateView(vm, renderFn)); + return this.ifView(predicate, vm => new InlineTemplateView(vm, renderFn)); } /** You probably are looking for something else, like map or mapView. @@ -398,3 +386,16 @@ for (const [ns, tags] of Object.entries(TAG_NAMES)) { }; } } + +export class InlineTemplateView extends TemplateView { + private _render: RenderFn; + + constructor(value: T, render: RenderFn) { + super(value); + this._render = render; + } + + override render(t: Builder, value: T): ViewNode { + return this._render(t, value); + } +} diff --git a/src/platform/web/ui/session/settings/SessionBackupSettingsView.js b/src/platform/web/ui/session/settings/SessionBackupSettingsView.js index e989f8ea..b8206c55 100644 --- a/src/platform/web/ui/session/settings/SessionBackupSettingsView.js +++ b/src/platform/web/ui/session/settings/SessionBackupSettingsView.js @@ -14,16 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {TemplateView} from "../../general/TemplateView"; +import {TemplateView, InlineTemplateView} from "../../general/TemplateView"; import {StaticView} from "../../general/StaticView.js"; export class SessionBackupSettingsView extends TemplateView { render(t, vm) { return t.mapView(vm => vm.status, status => { switch (status) { - case "Enabled": return new TemplateView(vm, renderEnabled) - case "SetupKey": return new TemplateView(vm, renderEnableFromKey) - case "SetupPhrase": return new TemplateView(vm, renderEnableFromPhrase) + case "Enabled": return new InlineTemplateView(vm, renderEnabled) + case "SetupKey": return new InlineTemplateView(vm, renderEnableFromKey) + case "SetupPhrase": return new InlineTemplateView(vm, renderEnableFromPhrase) case "Pending": return new StaticView(vm, t => t.p(vm.i18n`Waiting to go onlineā€¦`)) } });