implab/implabjs-djx Files · djx/src/main/ts/tsx/WidgetRendition.ts

added whenRendered() method to wait for pending oprations to complete

cin - - Load All Authors

File last commit:

r109:4a375b9c654a default


                r118:e07418577cbc

v1.6.1 default

Download file

             WidgetRendition.ts
        
                    130 lines
            
             | 4.8 KiB
            
                | video/mp2t
            
             |
                TypeScriptLexer
            
             / djx / src / main / ts / tsx / WidgetRendition.ts
          
                    History
                
                 |
                  Source
                 | Raw
                 |Copy content
                 |Copy permalink

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      import { argumentNotNull } from "@implab/core-amd/safe";

        cin
    
Added playground project

              r97
            
      import { RenditionBase } from "./RenditionBase";

        cin
    
refactoring, adding scope to rendering methods

              r96
            
      import { DojoNodePosition, isElementNode, isInPage, isWidget, placeAt } from "./traits";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      import registry = require("dijit/registry");

      import ContentPane = require("dijit/layout/ContentPane");

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      import { getItemDom, refHook } from "./render";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      // tslint:disable-next-line: class-name

      export interface _Widget {

          domNode: Node;

          containerNode?: Node;

          placeAt?(refNode: string | Node, position?: DojoNodePosition): void;

          startup?(): void;

        cin
    
Testing nested watch, release candidate

              r101
            
          addChild?(widget: unknown, index?: number): void;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      }

        cin
    
linting

              r109
            
      export type _WidgetCtor = new (attrs: object, srcNode?: string | Node) => _Widget;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      export class WidgetRendition extends RenditionBase<Node> {

          readonly widgetClass: _WidgetCtor;

          _instance: _Widget | undefined;

          constructor(widgetClass: _WidgetCtor) {

              super();

              argumentNotNull(widgetClass, "widgetClass");

              this.widgetClass = widgetClass;

          }

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          _addChild(child: unknown): void {

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              const instance = this._getInstance();

              if (instance.addChild) {

                  if (child instanceof WidgetRendition) {

                      // layout containers add custom logic to addChild methods

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
                      instance.addChild(child.getWidgetInstance());

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
                  } else if (isWidget(child)) {

                      instance.addChild(child);

                  } else {

        cin
    
Testing nested watch, release candidate

              r101
            
                      const childDom = getItemDom(child);

        cin
    
Corrected _addChild behavior for WidgetRendition when the content is FunctionRendition which returns a widget instance

              r91
            
                      const w = isElementNode(childDom) ? registry.byNode(childDom) : undefined;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
        cin
    
Corrected _addChild behavior for WidgetRendition when the content is FunctionRendition which returns a widget instance

              r91
            
                      if (w) {

                          instance.addChild(w);

                      } else {

                          if (!instance.containerNode)

                              throw new Error("Failed to add DOM content. The widget doesn't have a containerNode");

                          // the current widget isn't started, it's children shouldn't start too

        cin
    
Testing nested watch, release candidate

              r101
            
                          placeAt(getItemDom(child), instance.containerNode, "last");

        cin
    
Corrected _addChild behavior for WidgetRendition when the content is FunctionRendition which returns a widget instance

              r91
            
                      }

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
                  }

              } 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

        cin
    
Testing nested watch, release candidate

              r101
            
                  placeAt(getItemDom(child), instance.containerNode, "last");

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              }

          }

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[]) {

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              if (this.widgetClass.prototype instanceof ContentPane) {

                  // a special case for the ContentPane this is for

        cin
    
Testing nested watch, release candidate

              r101
            
                  // compatibility with that heavy widget, all

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
                  // regular containers could be easily manipulated

                  // through `containerNode` property or `addChild` method.

                  // render children to the DocumentFragment

                  const content = document.createDocumentFragment();

        cin
    
Testing nested watch, release candidate

              r101
            
                  children.forEach(child => content.appendChild(getItemDom(child)));

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
                  // 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);

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
                  children.forEach(x => this._addChild(x));

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              }

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
              if (ref)

                  refHook(this._instance, ref);

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          }

          private _getInstance() {

              if (!this._instance)

                  throw new Error("The instance of the widget isn't created");

              return this._instance;

          }

          protected _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) {

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
              this.ensureCreated();

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              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 ?

        cin
    
fixed tslint errors, added support for private methods to @on() decorator

              r79
            
                      registry.getEnclosingWidget(instance.domNode.parentNode) : null;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
                  if (!parentWidget && isInPage(instance.domNode) && typeof instance.startup === "function")

                      instance.startup();

              } else {

                  // the widget doesn't have a placeAt method, strange but whatever

                  super.placeAt(refNode, position);

              }

          }

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          getWidgetInstance() {

              this.ensureCreated();

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              return this._getInstance();

          }

      }

	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

cin Converted to subproject djx, removed dojo-typings	r65	import { argumentNotNull } from "@implab/core-amd/safe";
cin Added playground project	r97	import { RenditionBase } from "./RenditionBase";
cin refactoring, adding scope to rendering methods	r96	import { DojoNodePosition, isElementNode, isInPage, isWidget, placeAt } from "./traits";
cin Converted to subproject djx, removed dojo-typings	r65	import registry = require("dijit/registry");
		import ContentPane = require("dijit/layout/ContentPane");
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	import { getItemDom, refHook } from "./render";
cin Converted to subproject djx, removed dojo-typings	r65
		// tslint:disable-next-line: class-name
		export interface _Widget {
		domNode: Node;

		containerNode?: Node;

		placeAt?(refNode: string \| Node, position?: DojoNodePosition): void;
		startup?(): void;

cin Testing nested watch, release candidate	r101	addChild?(widget: unknown, index?: number): void;
cin Converted to subproject djx, removed dojo-typings	r65	}

cin linting	r109	export type _WidgetCtor = new (attrs: object, srcNode?: string \| Node) => _Widget;
cin Converted to subproject djx, removed dojo-typings	r65
		export class WidgetRendition extends RenditionBase<Node> {
		readonly widgetClass: _WidgetCtor;

		_instance: _Widget \| undefined;

		constructor(widgetClass: _WidgetCtor) {
		super();
		argumentNotNull(widgetClass, "widgetClass");

		this.widgetClass = widgetClass;
		}

cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	_addChild(child: unknown): void {
cin Converted to subproject djx, removed dojo-typings	r65	const instance = this._getInstance();

		if (instance.addChild) {
		if (child instanceof WidgetRendition) {
		// layout containers add custom logic to addChild methods
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	instance.addChild(child.getWidgetInstance());
cin Converted to subproject djx, removed dojo-typings	r65	} else if (isWidget(child)) {
		instance.addChild(child);
		} else {
cin Testing nested watch, release candidate	r101	const childDom = getItemDom(child);
cin Corrected _addChild behavior for WidgetRendition when the content is FunctionRendition which returns a widget instance	r91	const w = isElementNode(childDom) ? registry.byNode(childDom) : undefined;
cin Converted to subproject djx, removed dojo-typings	r65
cin Corrected _addChild behavior for WidgetRendition when the content is FunctionRendition which returns a widget instance	r91	if (w) {
		instance.addChild(w);
		} else {
		if (!instance.containerNode)
		throw new Error("Failed to add DOM content. The widget doesn't have a containerNode");

		// the current widget isn't started, it's children shouldn't start too
cin Testing nested watch, release candidate	r101	placeAt(getItemDom(child), instance.containerNode, "last");
cin Corrected _addChild behavior for WidgetRendition when the content is FunctionRendition which returns a widget instance	r91	}
cin Converted to subproject djx, removed dojo-typings	r65	}
		} 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
cin Testing nested watch, release candidate	r101	placeAt(getItemDom(child), instance.containerNode, "last");
cin Converted to subproject djx, removed dojo-typings	r65	}
		}

cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[]) {
cin Converted to subproject djx, removed dojo-typings	r65	if (this.widgetClass.prototype instanceof ContentPane) {
		// a special case for the ContentPane this is for
cin Testing nested watch, release candidate	r101	// compatibility with that heavy widget, all
cin Converted to subproject djx, removed dojo-typings	r65	// regular containers could be easily manipulated
		// through `containerNode` property or `addChild` method.

		// render children to the DocumentFragment
		const content = document.createDocumentFragment();
cin Testing nested watch, release candidate	r101	children.forEach(child => content.appendChild(getItemDom(child)));
cin Converted to subproject djx, removed dojo-typings	r65
		// 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);
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	children.forEach(x => this._addChild(x));
cin Converted to subproject djx, removed dojo-typings	r65	}

cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	if (ref)
		refHook(this._instance, ref);
cin Converted to subproject djx, removed dojo-typings	r65	}

		private _getInstance() {
		if (!this._instance)
		throw new Error("The instance of the widget isn't created");
		return this._instance;
		}

		protected _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) {
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	this.ensureCreated();
cin Converted to subproject djx, removed dojo-typings	r65	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 ?
cin fixed tslint errors, added support for private methods to @on() decorator	r79	registry.getEnclosingWidget(instance.domNode.parentNode) : null;
cin Converted to subproject djx, removed dojo-typings	r65	if (!parentWidget && isInPage(instance.domNode) && typeof instance.startup === "function")
		instance.startup();
		} else {
		// the widget doesn't have a placeAt method, strange but whatever
		super.placeAt(refNode, position);
		}
		}

cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	getWidgetInstance() {
		this.ensureCreated();
cin Converted to subproject djx, removed dojo-typings	r65	return this._getInstance();
		}

		}