diff --git a/src/ui/views/AccountSetupView.ts b/src/ui/views/AccountSetupView.ts index 967a96a459f9d79b7cda37ced2aa93286150e27b..4b76ccb56dcf838dcc168926d06d358b81b6079f 100644 --- a/src/ui/views/AccountSetupView.ts +++ b/src/ui/views/AccountSetupView.ts @@ -1,9 +1,12 @@ import { TemplateView, LoadingView } from "hydrogen-view-sdk"; -import { Builder } from "hydrogen-view-sdk/types/platform/web/ui/general/TemplateView"; import { AccountSetupViewModel } from "../../viewmodels/AccountSetupViewModel"; export class AccountSetupView extends TemplateView<AccountSetupViewModel> { - render(t: Builder<AccountSetupViewModel>, vm: AccountSetupViewModel) { + constructor(value) { + super(value); + } + + render(t, vm: AccountSetupViewModel) { return t.div( { className: "AccountSetupView" }, t.mapView( (vm) => vm.privacyPolicyLink, (link) => link ? new PolicyAgreementView(vm) : new LoadingView()) @@ -12,7 +15,11 @@ export class AccountSetupView extends TemplateView<AccountSetupViewModel> { } class PolicyAgreementView extends TemplateView<AccountSetupViewModel> { - render(t: Builder<AccountSetupViewModel>, vm: AccountSetupViewModel) { + constructor(value) { + super(value); + } + + render(t, vm: AccountSetupViewModel) { return t.div({ className: "PolicyAgreementView" }, [ t.div({ className: "PolicyAgreementView-text"}, [ diff --git a/src/ui/views/ChatterboxView.ts b/src/ui/views/ChatterboxView.ts index 9d400969fd1eb494f6a8ae7cd2d831a42e8f522b..584b09e6e085ab6426aeb402d602b45b082fdb17 100644 --- a/src/ui/views/ChatterboxView.ts +++ b/src/ui/views/ChatterboxView.ts @@ -1,21 +1,40 @@ -import { TemplateView, TimelineView, LoadingView, AvatarView, RoomViewModel } from "hydrogen-view-sdk"; -import { Builder } from "hydrogen-view-sdk/types/platform/web/ui/general/TemplateView"; +import { TemplateView, TimelineView, LoadingView, AvatarView } from "hydrogen-view-sdk"; import { MessageComposer } from "hydrogen-view-sdk"; import { ChatterboxViewModel } from "../../viewmodels/ChatterboxViewModel"; export class ChatterboxView extends TemplateView<ChatterboxViewModel> { - render(t: Builder<ChatterboxViewModel>) { - return t.div({className: "ChatterboxView"}, [ - t.mapView(vm => vm.roomViewModel? vm: null, vm => vm ? new RoomHeaderView(vm) : null), - t.mapView(vm => vm.timelineViewModel, vm => vm ? new TimelineView(vm) : new LoadingView()), - t.mapView(vm => vm.messageComposerViewModel, vm => vm ? new MessageComposer(vm) : null), - t.div({className: "ChatterboxView_footer"}, ["Powered by", t.img({src:"./src/ui/res/matrix-logo.svg"})]), + constructor(value) { + super(value); + } + + render(t) { + return t.div({ className: "ChatterboxView" }, [ + t.mapView( + (vm) => (vm.roomViewModel ? vm : null), + (vm) => (vm ? new RoomHeaderView(vm) : null) + ), + t.mapView( + (vm) => vm.timelineViewModel, + (vm) => (vm ? new TimelineView(vm) : new LoadingView()) + ), + t.mapView( + (vm) => vm.messageComposerViewModel, + (vm) => (vm ? new MessageComposer(vm) : null) + ), + t.div({ className: "ChatterboxView_footer" }, [ + "Powered by", + t.img({ src: "./src/ui/res/matrix-logo.svg" }), + ]), ]); } } class RoomHeaderView extends TemplateView<ChatterboxViewModel> { - render(t: Builder<ChatterboxViewModel>, vm) { + constructor(value) { + super(value); + } + + render(t, vm: ChatterboxViewModel) { return t.div({ className: "RoomHeaderView" }, [ t.view(new AvatarView(vm.roomViewModel, 30)), t.div({ className: "RoomHeaderView_name" }, vm => vm.roomViewModel.name), diff --git a/src/ui/views/RootView.ts b/src/ui/views/RootView.ts index 8e5bb52c2f64f3549a700ceecf23ae562f2c0ca5..e9e097e76dad77afcd24e15d9d601a180c89a23f 100644 --- a/src/ui/views/RootView.ts +++ b/src/ui/views/RootView.ts @@ -1,11 +1,14 @@ import { TemplateView } from "hydrogen-view-sdk"; -import { Builder } from "hydrogen-view-sdk/types/platform/web/ui/general/TemplateView"; import { RootViewModel } from "../../viewmodels/RootViewModel"; import { AccountSetupView } from "./AccountSetupView"; import { ChatterboxView } from "./ChatterboxView"; export class RootView extends TemplateView<RootViewModel> { - render(t: Builder<RootViewModel>, vm: RootViewModel) { + constructor(value) { + super(value); + } + + render(t, vm: RootViewModel) { return t.mapView(vm => vm.activeSection, section => { switch(section) { case "start": @@ -22,7 +25,7 @@ export class RootView extends TemplateView<RootViewModel> { class StartView extends TemplateView<RootViewModel> { - render(t: Builder<RootViewModel>, vm: RootViewModel) { + render(t, vm: RootViewModel) { return t.button({ className: "StartChat", onClick: () => vm.start() }); } } diff --git a/src/viewmodels/AccountSetupViewModel.ts b/src/viewmodels/AccountSetupViewModel.ts index 8ad243db207a8ae5327a85f1fbab3a6f002bc056..3e2bc30cdf6afbbf3cb70b2ee93266f68fb130fb 100644 --- a/src/viewmodels/AccountSetupViewModel.ts +++ b/src/viewmodels/AccountSetupViewModel.ts @@ -6,7 +6,7 @@ import "hydrogen-view-sdk/style.css"; export class AccountSetupViewModel extends ViewModel { private _config: IChatterboxConfig; - private _client: Client; + private _client: typeof Client; private _termsStage?: any; private _password: string; diff --git a/src/viewmodels/ChatterboxViewModel.ts b/src/viewmodels/ChatterboxViewModel.ts index 6e4e5ba27dd6e87b113e776221d33d997821fc65..0241eb29738cd39f3a1aa84e55e2c91ade57b042 100644 --- a/src/viewmodels/ChatterboxViewModel.ts +++ b/src/viewmodels/ChatterboxViewModel.ts @@ -1,8 +1,8 @@ import { RoomViewModel, ViewModel, ComposerViewModel} from "hydrogen-view-sdk"; export class ChatterboxViewModel extends ViewModel { - private _messageComposerViewModel?: ComposerViewModel; - private _roomViewModel?: RoomViewModel; + private _messageComposerViewModel?: typeof ComposerViewModel; + private _roomViewModel?: typeof RoomViewModel; private _loginPromise: Promise<void>; constructor(options) { diff --git a/src/viewmodels/RootViewModel.ts b/src/viewmodels/RootViewModel.ts index d696f5617acc2913209e6a1b9ce192f18ce70601..5f63909b50423adf9570782b3dc64cfd921fd5ac 100644 --- a/src/viewmodels/RootViewModel.ts +++ b/src/viewmodels/RootViewModel.ts @@ -1,14 +1,14 @@ -import { ViewModel, Client, Navigation, createRouter, Platform } from "hydrogen-view-sdk"; +import { ViewModel, Client, Navigation, createRouter, Platform } from "hydrogen-view-sdk"; import { IChatterboxConfig } from "../types/IChatterboxConfig"; import { ChatterboxViewModel } from "./ChatterboxViewModel"; import "hydrogen-view-sdk/style.css"; import { AccountSetupViewModel } from "./AccountSetupViewModel"; -type Options = { platform: Platform, navigation: ReturnType<Navigation>, urlCreator: ReturnType<createRouter> }; +type Options = { platform: typeof Platform, navigation: typeof Navigation, urlCreator: ReturnType<typeof createRouter> }; export class RootViewModel extends ViewModel { private _config: IChatterboxConfig; - private _client: Client; + private _client: typeof Client; private _chatterBoxViewModel?: ChatterboxViewModel; private _accountSetupViewModel?: AccountSetupViewModel; private _activeSection: string = "start";