tsx.ts
196 lines
| 6.9 KiB
| video/mp2t
|
TypeScriptLexer
cin
|
r96 | import { Constructor } from "@implab/core-amd/interfaces"; | ||
|
cin
|
r65 | import { HtmlRendition } from "./tsx/HtmlRendition"; | ||
| import { WidgetRendition } from "./tsx/WidgetRendition"; | ||||
|
cin
|
r102 | import { isElementNode, isWidget, isWidgetConstructor, Rendition } from "./tsx/traits"; | ||
|
cin
|
r65 | import { FunctionRendition } from "./tsx/FunctionRendition"; | ||
|
cin
|
r89 | import Stateful = require("dojo/Stateful"); | ||
| import _WidgetBase = require("dijit/_WidgetBase"); | ||||
| import { DjxWidgetBase } from "./tsx/DjxWidgetBase"; | ||||
|
cin
|
r96 | import { WatchRendition } from "./tsx/WatchRendition"; | ||
|
cin
|
r116 | import { Observable, observe, Subscribable } from "./observable"; | ||
|
cin
|
r102 | import djAttr = require("dojo/dom-attr"); | ||
| import djClass = require("dojo/dom-class"); | ||||
|
cin
|
r107 | import { AnimationAttrs, WatchForRendition } from "./tsx/WatchForRendition"; | ||
|
cin
|
r116 | import { OrderedUpdate } from "./store"; | ||
|
cin
|
r65 | |||
|
cin
|
r109 | export function createElement<T extends Constructor | string | ((props: object) => Element)>(elementType: T, ...args: unknown[]): Rendition { | ||
|
cin
|
r65 | 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") { | ||||
|
cin
|
r109 | const ctx = new FunctionRendition(elementType as (props: unknown) => Element); | ||
|
cin
|
r65 | if (args) | ||
| args.forEach(x => ctx.visitNext(x)); | ||||
| return ctx; | ||||
| } else { | ||||
|
cin
|
r109 | throw new Error(`The element type '${String(elementType)}' is unsupported`); | ||
|
cin
|
r65 | } | ||
| } | ||||
|
cin
|
r109 | export interface EventDetails<T = unknown> { | ||
|
cin
|
r65 | detail: T; | ||
| } | ||||
| export interface EventSelector { | ||||
| selectorTarget: HTMLElement; | ||||
| target: HTMLElement; | ||||
| } | ||||
|
cin
|
r109 | export type DojoMouseEvent<T = unknown> = MouseEvent & EventSelector & EventDetails<T>; | ||
|
cin
|
r89 | |||
|
cin
|
r102 | type StatefulProps<T> = T extends Stateful<infer A> ? A : | ||
| T extends _WidgetBase ? T : never; | ||||
|
cin
|
r89 | |||
| /** | ||||
| * 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, | ||||
|
cin
|
r109 | render: (model: W[K]) => unknown | ||
|
cin
|
r89 | ): 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, | ||||
|
cin
|
r109 | render: (model: StatefulProps<T>[K]) => unknown | ||
|
cin
|
r89 | ): Rendition; | ||
|
cin
|
r102 | export function watch<V>(subj: Subscribable<V>, render: (model: V) => unknown): Rendition; | ||
| export function watch( | ||||
| ...args: [Stateful, string, (model: unknown) => unknown] | | ||||
| [Subscribable<unknown>, (model: unknown) => unknown] | ||||
|
cin
|
r89 | ) { | ||
|
cin
|
r102 | if (args.length === 3) { | ||
| const [target, prop, render] = args; | ||||
| return new WatchRendition( | ||||
| render, | ||||
| observe(({next}) => { | ||||
|
cin
|
r109 | const h = target.watch( | ||
|
cin
|
r102 | prop, | ||
| (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue) | ||||
| ); | ||||
| next(target.get(prop)); | ||||
| return () => h.remove(); | ||||
| }) | ||||
| ); | ||||
| } else { | ||||
| const [subj, render] = args; | ||||
| return new WatchRendition(render, subj); | ||||
| } | ||||
| } | ||||
|
cin
|
r118 | export const watchFor = <T>(source: T[] | Subscribable<OrderedUpdate<T>> | null | undefined, render: (item: T, index: number) => unknown, opts: AnimationAttrs = {}) => { | ||
|
cin
|
r107 | return new WatchForRendition({ | ||
| ...opts, | ||||
| subject: source, | ||||
| component: render | ||||
| }); | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r107 | |||
|
cin
|
r102 | export const prop: { | ||
| <T extends Stateful, K extends string & keyof StatefulProps<T>>(target: T, name: K): Observable<StatefulProps<T>[K]>; | ||||
| <T extends _WidgetBase, K extends keyof T>(target: T, name: K): Observable<T[K]>; | ||||
| } = (target: Stateful, name: string) => { | ||||
| return observe(({next}) => { | ||||
| const h = target.watch( | ||||
| name, | ||||
| (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue) | ||||
| ); | ||||
| next(target.get(name)); | ||||
| return () => h.remove(); | ||||
|
cin
|
r109 | }); | ||
|
cin
|
r102 | }; | ||
|
cin
|
r101 | |||
|
cin
|
r102 | export const attach = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v); | ||
| export const bind = <K extends string, T>(attr: K, subj: Subscribable<T>) => { | ||||
| let h = { unsubscribe() { } }; | ||||
|
cin
|
r134 | return (el: Element | { set(name: K, value: T, priority?: boolean): void; } | undefined) => { | ||
|
cin
|
r102 | if (el) { | ||
| if (isElementNode(el)) { | ||||
| h = subj.subscribe({ | ||||
| next: value => djAttr.set(el, attr, value) | ||||
| }); | ||||
| } else { | ||||
| h = subj.subscribe({ | ||||
|
cin
|
r134 | next: value => el.set(attr, value, false) | ||
|
cin
|
r102 | }); | ||
| } | ||||
| } else { | ||||
| h.unsubscribe(); | ||||
| } | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r102 | }; | ||
|
cin
|
r120 | /** Creates refHook to toggle the specified css class on the target element | ||
| * | ||||
| * @param className | ||||
| * @param subj a boolean observable value. When the value is false the className | ||||
| * is removed, when the value is true, the className is added to the target element | ||||
| * @returns refHook | ||||
| */ | ||||
|
cin
|
r102 | export const toggleClass = (className: string, subj: Subscribable<boolean>) => { | ||
| let h = { unsubscribe() { } }; | ||||
| return (elOrWidget: HTMLElement | _WidgetBase | undefined) => { | ||||
| const el = isWidget(elOrWidget) ? elOrWidget.domNode : elOrWidget; | ||||
| if (el) { | ||||
| h = subj.subscribe({ | ||||
|
cin
|
r120 | next: v => djClass.toggle(el, className, v || false) | ||
|
cin
|
r102 | }); | ||
| } else { | ||||
| h.unsubscribe(); | ||||
| } | ||||
|
cin
|
r109 | }; | ||
| }; | ||||
|
cin
|
r89 | |||
|
cin
|
r120 | /** Combines multiple hooks to the single one */ | ||
|
cin
|
r102 | export const all = <T, A extends JSX.Ref<T>[]>(...cbs: A): JSX.Ref<T> => (arg: T | undefined) => cbs.forEach(cb => cb(arg)); | ||
|
cin
|
r89 | /** 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, | ||||
|
cin
|
r109 | T extends DjxWidgetBase<object, { [p in E]: EV }>, | ||
|
cin
|
r89 | EV extends Event | ||
| >( | ||||
| target: T, | ||||
| key: K, | ||||
|
cin
|
r109 | // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
|
cin
|
r89 | _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void> | ||
|
cin
|
r109 | ) => { | ||
|
cin
|
r93 | const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key })); | ||
|
cin
|
r89 | target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers; | ||
| }; | ||||