implab/implabjs-djx Commit - r59:bcdd096122ff

DjxFragment converted to functionl component...

cin -

r59:bcdd096122ff default

parent child

Context file:

r59:bcdd096122ff

Collapse all files

src/main/ts/tsx/BuildContextBase.ts +6 -2

             import { isNull, mixin } from "@implab/core-amd/safe";
-            import { isPlainObject, isNode, isBuildContext, DojoNodePosition, BuildContext, isInPage } from "./traits";
+            import { isPlainObject, isNode, isBuildContext, DojoNodePosition, BuildContext, isInPage, isWidget } from "./traits";
             import dom = require("dojo/dom-construct");
             import registry = require("dijit/registry");
             export abstract class BuildContextBase<TNode extends Node> implements BuildContext<TNode> {
                 private _attrs = {};
                 private _children = new Array();
                 private _created: boolean = false;
                 visitNext(v: any) {
                     if (this._created)
                         throw new Error("The Element is already created");
                     if (isNull(v) || typeof v === "boolean")
                         // skip null, undefined, booleans ( this will work:  {value && <span>{value}</span>} )
                         return;
                     if (isPlainObject(v)) {
                         mixin(this._attrs, v);
                     } else if (v instanceof Array) {
                         v.forEach(x => this.visitNext(x));
                     } else {
                         this._children.push(v);
                     }
                 }
-                getChildDom(v: any) {
+                protected getItemDom(v: any) {
                     const tv = typeof v;
                     if (tv === "string" || tv === "number" || v instanceof RegExp || v instanceof Date) {
                         return document.createTextNode(v.toString());
                     } else if (isNode(v)) {
                         return v;
                     } else if (isBuildContext(v)) {
                         return v.getDomNode();
+                    } else if(isWidget(v)) {
+                        return v.domNode;
+                    } else if(tv === "boolean" || v === null || v === undefined) {
+                        return document.createComment(`[${tv} ${String(v)}]`);
                     } else {
                         throw new Error("Invalid parameter");
                     }
                 }
                 ensureCreated() {
                     if (!this._created) {
                         this._create(this._attrs, this._children);
                         this._children = [];
                         this._attrs = {};
                         this._created = true;
                     }
                 }
                 /** @deprecated will be removed in 1.0.0, use getDomNode() */
                 getDomElement() {
                     return this.getDomNode();
                 }
                 /** Creates DOM node if not created. No additional actions are taken. */
                 getDomNode() {
                     this.ensureCreated();
                     return this._getDomNode();
                 }
                 /** Creates DOM node if not created, places it to the specified position
                  * and calls startup() method for all widgets contained by this node.
                  *
                  * @param {string | Node} refNode The reference node where the created
                  *   DOM should be placed.
                  * @param {DojoNodePosition} position Optional parameter, specifies the
                  *   position relative to refNode. Default is "last" (i.e. last child).
                  */
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
                     const domNode = this.getDomNode();
                     dom.place(domNode, refNode, position);
                     const parentWidget = domNode.parentNode ? registry.getEnclosingWidget(domNode.parentNode) : null;
                     if ((parentWidget && parentWidget._started) || isInPage(domNode))
                         this._startup();
                 }
                 _startup () {
                     registry.findWidgets(this._getDomNode()).forEach(w => w.startup());
                 }
                 abstract _create(attrs: object, children: any[]): void;
                 abstract _getDomNode(): TNode;
             }

src/main/ts/tsx/DjxFragment.ts +5 -17

@@ -1,18 +1,6
1	import { _Widget } from "./WidgetContext";	1	/** Special functional component used to create a document fragment */
2	import { MapOf } from "@implab/core-amd/interfaces";	2	export function DjxFragment({children}: {children: Node[]}){
3	import { prototype } from "../declare";	3	const fragment = document.createDocumentFragment();
4		4	if (children)
5	/** Special widget used to create a document fragment */	5	children.forEach(child => fragment.appendChild(child));
6	export class DjxFragment implements _Widget {
7
8	domNode: Node;
9
10	containerNode: Node;
11
12	constructor() {
13	this.domNode = this.containerNode = document.createDocumentFragment();
14	}
15	buildRendering() {
16	// this function marks this class as _Widget
17	}
18	} No newline at end of file	6	}

src/main/ts/tsx/FunctionComponentContext.ts +2 -2

             import dom = require("dojo/dom-construct");
             import attr = require("dojo/dom-attr");
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
             import registry = require("dijit/registry");
             export class FunctionComponentContext extends BuildContextBase<Node> {
                 private _component: (props: any) => any;
                 private _node: Node | undefined;
                 constructor(component: (props: any) => any) {
                     super();
                     argumentNotNull(component, "component");
                     this._component = component;
                 }
                 _create(attrs: object, children: any[]) {
                     const _attrs: any = attrs || {};
-                    _attrs.children = children.map(x => this.getChildDom(x));
+                    _attrs.children = children.map(x => this.getItemDom(x));
-                    this._node = this.getChildDom(this._component.call(null, _attrs));
+                    this._node = this.getItemDom(this._component.call(null, _attrs));
                 }
                 _getDomNode() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

src/main/ts/tsx/HtmlElementContext.ts +1 -1

             import dom = require("dojo/dom-construct");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
             export class HtmlElementContext extends BuildContextBase<HTMLElement> {
                 elementType: string;
                 _element: HTMLElement | undefined;
                 constructor(elementType: string) {
                     argumentNotEmptyString(elementType, "elementType");
                     super();
                     this.elementType = elementType;
                 }
                 _addChild(child: any): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
-                    dom.place(this.getChildDom(child), this._element);
+                    dom.place(this.getItemDom(child), this._element);
                 }
                 _create(attrs: object, children: any[]) {
                     this._element = dom.create(this.elementType, attrs);
                     if (children)
                         children.forEach(v => this._addChild(v));
                 }
                 _getDomNode() {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     return this._element;
                 }
             }

src/main/ts/tsx/WidgetContext.ts +3 -3

             import dom = require("dojo/dom-construct");
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
             import { DojoNodePosition, isInPage, isWidget } from "./traits";
             import registry = require("dijit/registry");
             import ContentPane = require("dijit/layout/ContentPane");
             // tslint:disable-next-line: class-name
             export interface _Widget {
                 domNode: Node;
                 containerNode?: Node;
                 placeAt?(refNode: string | Node, position?: DojoNodePosition): void;
                 startup?(): void;
                 addChild?(widget: any, index?: number): void;
             }
             export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
             export class WidgetContext extends BuildContextBase<Node> {
                 readonly widgetClass: _WidgetCtor;
                 _instance: _Widget | undefined;
                 constructor(widgetClass: _WidgetCtor) {
                     super();
                     argumentNotNull(widgetClass, "widgetClass");
                     this.widgetClass = widgetClass;
                 }
                 _addChild(child: any): void {
                     const instance = this._getInstance();
                     if (instance.addChild) {
                         if (child instanceof WidgetContext) {
                             // layout containers add custom logic to addChild methods
                             instance.addChild(child.getWidgetInstance());
                         } else if (isWidget(child)) {
                             instance.addChild(child);
                         } else {
                             if (!instance.containerNode)
                                 throw new Error("The widget doesn't have neither addChild nor containerNode");
                             // the current widget isn't started, it's children shouldn't start too
-                            dom.place(this.getChildDom(child), instance.containerNode);
+                            dom.place(this.getItemDom(child), instance.containerNode);
                         }
                     } else {
                         if (!instance.containerNode)
                             throw new Error("The widget doesn't have neither addChild nor containerNode");
                         // the current widget isn't started, it's children shouldn't start too
-                        dom.place(this.getChildDom(child), instance.containerNode);
+                        dom.place(this.getItemDom(child), instance.containerNode);
                     }
                 }
                 _create(attrs: any, children: any[]) {
                     if (this.widgetClass.prototype instanceof ContentPane) {
                         // a special case for the ContentPane this is for
                         // the compatibility with this heavy widget, all
                         // regular containers could be easily manipulated
                         // through `containerNode` property or `addChild` method.
                         // render children to the DocumentFragment
                         const content = document.createDocumentFragment();
-                        children.forEach(child => content.appendChild(this.getChildDom(child)));
+                        children.forEach(child => content.appendChild(this.getItemDom(child)));
                         // set the content property to the parameters of the widget
                         const _attrs = { ...attrs, content };
                         this._instance = new this.widgetClass(_attrs);
                     } else {
                         this._instance = new this.widgetClass(attrs);
                         children.forEach(x => this._addChild(x));
                     }
                 }
                 private _getInstance() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance;
                 }
                 _getDomNode() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance.domNode;
                 }
                 /** Overrides default placeAt implementation. Calls placeAt of the
                  * widget and then starts it.
                  *
                  * @param refNode A node or id of the node where the widget should be placed.
                  * @param position A position relative to refNode.
                  */
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
                     this.ensureCreated();
                     const instance = this._getInstance();
                     if (typeof instance.placeAt === "function") {
                         instance.placeAt(refNode, position);
                         // fix the dojo startup behavior when the widget is placed
                         // directly to the document and doesn't have any enclosing widgets
                         const parentWidget = instance.domNode.parentNode ?
                             registry.getEnclosingWidget(instance.domNode.parentNode) : null
                         if (!parentWidget && isInPage(instance.domNode))
                             this._startup();
                     } else {
                         // the widget doesn't have a placeAt method, strange but whatever
                         super.placeAt(refNode, position);
                     }
                 }
                 _startup() {
                     const instance = this._getInstance();
                     if (typeof instance.startup === "function")
                         instance.startup();
                 }
                 getWidgetInstance() {
                     this.ensureCreated();
                     return this._getInstance();
                 }
             }

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages