mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
copy Daniel's conversion of BaseUpdateView to TypeScript from microui
This commit is contained in:
parent
69672dd99c
commit
65f69a121b
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {BaseUpdateView} from "./general/BaseUpdateView.js";
|
import {BaseUpdateView} from "./general/BaseUpdateView";
|
||||||
import {renderStaticAvatar, renderImg} from "./avatar.js";
|
import {renderStaticAvatar, renderImg} from "./avatar.js";
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -66,7 +66,7 @@ export class AvatarView extends BaseUpdateView {
|
|||||||
this._avatarTitleChanged();
|
this._avatarTitleChanged();
|
||||||
this._root = renderStaticAvatar(this.value, this._size);
|
this._root = renderStaticAvatar(this.value, this._size);
|
||||||
// takes care of update being called when needed
|
// takes care of update being called when needed
|
||||||
super.mount(options);
|
this.subscribeOnMount(options);
|
||||||
return this._root;
|
return this._root;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||||
|
Copyright 2021 Daniel Fedorin <danila.fedorin@gmail.com>
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
@ -14,40 +15,54 @@ See the License for the specific language governing permissions and
|
|||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export class BaseUpdateView {
|
import {IMountArgs, ViewNode, UIView} from "./types";
|
||||||
constructor(value) {
|
|
||||||
|
export interface IObservableValue {
|
||||||
|
on?(event: "change", handler: (props?: string[]) => void): void;
|
||||||
|
off?(event: "change", handler: (props?: string[]) => void): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export abstract class BaseUpdateView<T extends IObservableValue> implements UIView {
|
||||||
|
protected _value: T
|
||||||
|
protected _boundUpdateFromValue: ((props?: string[]) => void) | null
|
||||||
|
|
||||||
|
abstract mount(args?: IMountArgs): ViewNode;
|
||||||
|
abstract root(): ViewNode | undefined;
|
||||||
|
abstract update(...any);
|
||||||
|
|
||||||
|
constructor(value :T) {
|
||||||
this._value = value;
|
this._value = value;
|
||||||
// TODO: can avoid this if we adopt the handleEvent pattern in our EventListener
|
// TODO: can avoid this if we adopt the handleEvent pattern in our EventListener
|
||||||
this._boundUpdateFromValue = null;
|
this._boundUpdateFromValue = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
mount(options) {
|
subscribeOnMount(options?: IMountArgs): void {
|
||||||
const parentProvidesUpdates = options && options.parentProvidesUpdates;
|
const parentProvidesUpdates = options && options.parentProvidesUpdates;
|
||||||
if (!parentProvidesUpdates) {
|
if (!parentProvidesUpdates) {
|
||||||
this._subscribe();
|
this._subscribe();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount(): void {
|
||||||
this._unsubscribe();
|
this._unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
get value() {
|
get value(): T {
|
||||||
return this._value;
|
return this._value;
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateFromValue(changedProps) {
|
_updateFromValue(changedProps?: string[]) {
|
||||||
this.update(this._value, changedProps);
|
this.update(this._value, changedProps);
|
||||||
}
|
}
|
||||||
|
|
||||||
_subscribe() {
|
_subscribe(): void {
|
||||||
if (typeof this._value?.on === "function") {
|
if (typeof this._value?.on === "function") {
|
||||||
this._boundUpdateFromValue = this._updateFromValue.bind(this);
|
this._boundUpdateFromValue = this._updateFromValue.bind(this) as (props?: string[]) => void;
|
||||||
this._value.on("change", this._boundUpdateFromValue);
|
this._value.on("change", this._boundUpdateFromValue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_unsubscribe() {
|
_unsubscribe(): void {
|
||||||
if (this._boundUpdateFromValue) {
|
if (this._boundUpdateFromValue) {
|
||||||
if (typeof this._value.off === "function") {
|
if (typeof this._value.off === "function") {
|
||||||
this._value.off("change", this._boundUpdateFromValue);
|
this._value.off("change", this._boundUpdateFromValue);
|
@ -35,7 +35,7 @@ export class ListView<T, V extends UIView> implements UIView {
|
|||||||
private _list: ObservableList<T>;
|
private _list: ObservableList<T>;
|
||||||
private _className?: string;
|
private _className?: string;
|
||||||
private _tagName: string;
|
private _tagName: string;
|
||||||
private _root?: HTMLElement;
|
private _root?: Element;
|
||||||
private _subscription?: SubscriptionHandle;
|
private _subscription?: SubscriptionHandle;
|
||||||
private _childCreator: (value: T) => V;
|
private _childCreator: (value: T) => V;
|
||||||
private _childInstances?: V[];
|
private _childInstances?: V[];
|
||||||
@ -56,9 +56,9 @@ export class ListView<T, V extends UIView> implements UIView {
|
|||||||
this._mountArgs = {parentProvidesUpdates};
|
this._mountArgs = {parentProvidesUpdates};
|
||||||
}
|
}
|
||||||
|
|
||||||
root(): HTMLElement {
|
root(): Element | undefined {
|
||||||
// won't be undefined when called between mount and unmount
|
// won't be undefined when called between mount and unmount
|
||||||
return this._root!;
|
return this._root;
|
||||||
}
|
}
|
||||||
|
|
||||||
update(attributes: IOptions<T, V>) {
|
update(attributes: IOptions<T, V>) {
|
||||||
@ -74,12 +74,12 @@ export class ListView<T, V extends UIView> implements UIView {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mount(): HTMLElement {
|
mount(): Element {
|
||||||
const attr: {[name: string]: any} = {};
|
const attr: {[name: string]: any} = {};
|
||||||
if (this._className) {
|
if (this._className) {
|
||||||
attr.className = this._className;
|
attr.className = this._className;
|
||||||
}
|
}
|
||||||
this._root = el(this._tagName, attr) as HTMLElement;
|
this._root = el(this._tagName, attr);
|
||||||
this.loadList();
|
this.loadList();
|
||||||
if (this._onItemClick) {
|
if (this._onItemClick) {
|
||||||
this._root!.addEventListener("click", this);
|
this._root!.addEventListener("click", this);
|
||||||
@ -145,15 +145,15 @@ export class ListView<T, V extends UIView> implements UIView {
|
|||||||
|
|
||||||
protected onRemove(idx: number, value: T) {
|
protected onRemove(idx: number, value: T) {
|
||||||
const [child] = this._childInstances!.splice(idx, 1);
|
const [child] = this._childInstances!.splice(idx, 1);
|
||||||
child.root().remove();
|
child.root()!.remove();
|
||||||
child.unmount();
|
child.unmount();
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onMove(fromIdx: number, toIdx: number, value: T) {
|
protected onMove(fromIdx: number, toIdx: number, value: T) {
|
||||||
const [child] = this._childInstances!.splice(fromIdx, 1);
|
const [child] = this._childInstances!.splice(fromIdx, 1);
|
||||||
this._childInstances!.splice(toIdx, 0, child);
|
this._childInstances!.splice(toIdx, 0, child);
|
||||||
child.root().remove();
|
child.root()!.remove();
|
||||||
insertAt(this._root!, toIdx, child.root());
|
insertAt(this._root!, toIdx, child.root()! as Element);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onUpdate(i: number, value: T, params: any) {
|
protected onUpdate(i: number, value: T, params: any) {
|
||||||
@ -170,7 +170,7 @@ export class ListView<T, V extends UIView> implements UIView {
|
|||||||
this.onRemove(index, value);
|
this.onRemove(index, value);
|
||||||
} else {
|
} else {
|
||||||
const [oldChild] = this._childInstances!.splice(index, 1, child);
|
const [oldChild] = this._childInstances!.splice(index, 1, child);
|
||||||
this._root!.replaceChild(child.mount(this._mountArgs), oldChild.root());
|
this._root!.replaceChild(child.mount(this._mountArgs), oldChild.root()!);
|
||||||
oldChild.unmount();
|
oldChild.unmount();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html";
|
import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html";
|
||||||
import {mountView} from "./utils";
|
import {mountView} from "./utils";
|
||||||
import {BaseUpdateView} from "./BaseUpdateView.js";
|
import {BaseUpdateView} from "./BaseUpdateView";
|
||||||
|
|
||||||
function objHasFns(obj) {
|
function objHasFns(obj) {
|
||||||
for(const value of Object.values(obj)) {
|
for(const value of Object.values(obj)) {
|
||||||
@ -80,7 +80,7 @@ export class TemplateView extends BaseUpdateView {
|
|||||||
builder.close();
|
builder.close();
|
||||||
}
|
}
|
||||||
// takes care of update being called when needed
|
// takes care of update being called when needed
|
||||||
super.mount(options);
|
this.subscribeOnMount(options);
|
||||||
this._attach();
|
this._attach();
|
||||||
return this._root;
|
return this._root;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||||
|
Copyright 2021 Daniel Fedorin <danila.fedorin@gmail.com>
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
@ -15,12 +16,15 @@ limitations under the License.
|
|||||||
*/
|
*/
|
||||||
export interface IMountArgs {
|
export interface IMountArgs {
|
||||||
// if true, the parent will call update() rather than the view updating itself by binding to a data source.
|
// if true, the parent will call update() rather than the view updating itself by binding to a data source.
|
||||||
parentProvidesUpdates: boolean
|
parentProvidesUpdates?: boolean
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Comment nodes can be used as temporary placeholders for Elements, like TemplateView does.
|
||||||
|
export type ViewNode = Element | Comment;
|
||||||
|
|
||||||
export interface UIView {
|
export interface UIView {
|
||||||
mount(args?: IMountArgs): HTMLElement;
|
mount(args?: IMountArgs): ViewNode;
|
||||||
root(): HTMLElement; // should only be called between mount() and unmount()
|
root(): ViewNode | undefined; // should only be called between mount() and unmount()
|
||||||
unmount(): void;
|
unmount(): void;
|
||||||
update(...any); // this isn't really standarized yet
|
update(...any); // this isn't really standarized yet
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,7 @@ export function errorToDOM(error: Error): HTMLElement {
|
|||||||
]) as HTMLElement;
|
]) as HTMLElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function insertAt(parentNode: HTMLElement, idx: number, childNode: HTMLElement): void {
|
export function insertAt(parentNode: Element, idx: number, childNode: Element): void {
|
||||||
const isLast = idx === parentNode.childElementCount;
|
const isLast = idx === parentNode.childElementCount;
|
||||||
if (isLast) {
|
if (isLast) {
|
||||||
parentNode.appendChild(childNode);
|
parentNode.appendChild(childNode);
|
||||||
|
Loading…
Reference in New Issue
Block a user