|
|
import { Constructor, IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
|
|
|
import { HtmlRendition } from "./tsx/HtmlRendition";
|
|
|
import { WidgetRendition } from "./tsx/WidgetRendition";
|
|
|
import { destroy, isWidgetConstructor, Rendition } from "./tsx/traits";
|
|
|
import { FunctionRendition } from "./tsx/FunctionRendition";
|
|
|
import Stateful = require("dojo/Stateful");
|
|
|
import _WidgetBase = require("dijit/_WidgetBase");
|
|
|
import { DjxWidgetBase } from "./tsx/DjxWidgetBase";
|
|
|
|
|
|
export function createElement<T extends Constructor | string | ((props: any) => Element)>(elementType: T, ...args: any[]): Rendition {
|
|
|
if (typeof elementType === "string") {
|
|
|
const ctx = new HtmlRendition(elementType);
|
|
|
if (args)
|
|
|
args.forEach(x => ctx.visitNext(x));
|
|
|
|
|
|
return ctx;
|
|
|
} else if (isWidgetConstructor(elementType)) {
|
|
|
const ctx = new WidgetRendition(elementType);
|
|
|
if (args)
|
|
|
args.forEach(x => ctx.visitNext(x));
|
|
|
|
|
|
return ctx;
|
|
|
} else if (typeof elementType === "function") {
|
|
|
const ctx = new FunctionRendition(elementType as (props: any) => Element);
|
|
|
if (args)
|
|
|
args.forEach(x => ctx.visitNext(x));
|
|
|
|
|
|
return ctx;
|
|
|
} else {
|
|
|
throw new Error(`The element type '${elementType}' is unsupported`);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export interface EventDetails<T = any> {
|
|
|
detail: T;
|
|
|
}
|
|
|
|
|
|
export interface EventSelector {
|
|
|
selectorTarget: HTMLElement;
|
|
|
target: HTMLElement;
|
|
|
}
|
|
|
|
|
|
export type DojoMouseEvent<T = any> = MouseEvent & EventSelector & EventDetails<T>;
|
|
|
|
|
|
type StatefulProps<T> = T extends Stateful<infer A> ? A : never;
|
|
|
|
|
|
type CleanFn = (instance: IRemovable | IDestroyable) => void;
|
|
|
|
|
|
/**
|
|
|
* Observers the property and calls render callback each change.
|
|
|
*
|
|
|
* @param target The target object which property will be observed.
|
|
|
* @param prop The name of the property.
|
|
|
* @param render The callback which will be called every time the value is changed
|
|
|
* @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
|
|
|
* @returns Rendition which is created instantly
|
|
|
*/
|
|
|
export function watch<W extends _WidgetBase, K extends keyof W>(
|
|
|
target: W,
|
|
|
prop: K,
|
|
|
render: (model: W[K]) => any,
|
|
|
cleanupOrOwner?: { own: CleanFn } | CleanFn
|
|
|
): Rendition;
|
|
|
/**
|
|
|
* Observers the property and calls render callback each change.
|
|
|
*
|
|
|
* @param target The target object which property will be observed.
|
|
|
* @param prop The name of the property.
|
|
|
* @param render The callback which will be called every time the value is changed
|
|
|
* @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
|
|
|
* @returns Rendition which is created instantly
|
|
|
*/
|
|
|
export function watch<T extends Stateful, K extends keyof StatefulProps<T>>(
|
|
|
target: T,
|
|
|
prop: K,
|
|
|
render: (model: StatefulProps<T>[K]) => any,
|
|
|
cleanupOrOwner?: { own: CleanFn } | CleanFn
|
|
|
): Rendition;
|
|
|
export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
|
|
|
target: T,
|
|
|
prop: K,
|
|
|
render: (model: StatefulProps<T>[K]) => any,
|
|
|
cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
|
|
|
) {
|
|
|
let rendition = new FunctionRendition(() => render(target.get(prop)));
|
|
|
const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x);
|
|
|
_own(target.watch(prop, (_name, oldValue, newValue) => {
|
|
|
if (oldValue !== newValue) {
|
|
|
const newRendition = new FunctionRendition(() => render(newValue));
|
|
|
newRendition.placeAt(rendition.getDomNode(), "replace");
|
|
|
destroy(rendition.getDomNode());
|
|
|
rendition = newRendition;
|
|
|
}
|
|
|
}));
|
|
|
return rendition;
|
|
|
}
|
|
|
|
|
|
/** Decorates the method which will be registered as the handle for the specified event.
|
|
|
* This decorator can be applied to DjxWidgetBase subclass methods.
|
|
|
*
|
|
|
* ```
|
|
|
* @on("click")
|
|
|
* _onClick(eventObj: MouseEvent) {
|
|
|
* // ...
|
|
|
* }
|
|
|
* ```
|
|
|
*/
|
|
|
export const on = <E extends string>(...eventNames: E[]) =>
|
|
|
<K extends string,
|
|
|
T extends DjxWidgetBase<any, { [p in E]: EV }>,
|
|
|
EV extends Event
|
|
|
>(
|
|
|
target: T,
|
|
|
key: K,
|
|
|
_descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>
|
|
|
): any => {
|
|
|
const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
|
|
|
target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
|
|
|
};
|
|
|
|
