|
|
import { Constructor } from "@implab/core-amd/interfaces";
|
|
|
import { HtmlRendition } from "./tsx/HtmlRendition";
|
|
|
import { WidgetRendition } from "./tsx/WidgetRendition";
|
|
|
import { 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";
|
|
|
import { WatchRendition } from "./tsx/WatchRendition";
|
|
|
import { observe } from "./observable";
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 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
|
|
|
* @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
|
|
|
): 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
|
|
|
* @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
|
|
|
): Rendition;
|
|
|
export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
|
|
|
target: T,
|
|
|
prop: K,
|
|
|
render: (model: StatefulProps<T>[K]) => any
|
|
|
) {
|
|
|
|
|
|
return new WatchRendition(
|
|
|
render,
|
|
|
observe(({next}) => {
|
|
|
const h = target.watch(
|
|
|
prop,
|
|
|
(_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
|
|
|
);
|
|
|
next(target.get(prop));
|
|
|
return () => h.remove();
|
|
|
})
|
|
|
)
|
|
|
}
|
|
|
|
|
|
/** 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;
|
|
|
};
|
|
|
|
