implab/implabjs-djx Commit - r66:e3c05e9785a2

added support for two arguments (props, children) form of fucntional components

cin -

r66:e3c05e9785a2 default

parent child

Context file:

r66:e3c05e9785a2

Collapse all files

djx/package.json +1 -1

             {
                 "name": "@implab/djx",
                 "version": "0.0.1-dev",
                 "description": "Supports using dojo version 1 with typescript and .tsx files",
                 "keywords": [
                     "dojo",
                     "tsx",
                     "typescript",
                     "widgets"
                 ],
                 "author": "Implab team",
                 "license": "BSD-2-Clause",
                 "repository": "https://code.implab.org/implab/implabjs-djx",
                 "publishConfig": {
                     "access": "public"
                 },
                 "peerDependencies": {
                     "@implab/core-amd": "^1.4.0",
                     "dojo": "^1.10.0"
                 },
                 "devDependencies": {
                     "@implab/core-amd": "^1.4.0",
                     "@types/chai": "4.1.3",
                     "@types/requirejs": "2.1.31",
                     "@types/yaml": "1.2.0",
                     "chai": "4.2.0",
                     "dojo": "1.16.0",
                     "dojo-typings": "~1.11.9",
                     "eslint": "6.8.0",
                     "requirejs": "2.3.6",
                     "tslint": "^6.1.3",
-                    "typescript": "4.0.2",
+                    "typescript": "4.2.4",
                     "yaml": "~1.7.2"
                 }
             }

djx/src/main/ts/tsx/FunctionRendition.ts +10 -7

             import { argumentNotNull } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
             export class FunctionRendition extends RenditionBase<Node> {
-                private _component: (props: any) => any;
+                private _component: (...args: any[]) => any;
                 private _node: Node | undefined;
-                constructor(component: (props: any) => any) {
+                constructor(component: (...args: any[]) => any) {
                     super();
                     argumentNotNull(component, "component");
                     this._component = component;
                 }
-                _create(attrs: object, children: any[]) {
+                protected _create(attrs: object, children: any[]) {
                     const _attrs: any = attrs || {};
-                    _attrs.children = children.map(x => this.getItemDom(x));
+                    const _children = children.map(x => this.getItemDom(x));
+                    this._node = this.getItemDom(
-                    this._node = this.getItemDom(this._component.call(null, _attrs));
+                        this._component.length === 2 ?
+                            this._component.call(null, { ..._attrs }, _children) :
+                            this._component.call(null, { ..._attrs, children: _children })
+                    );
                 }
-                _getDomNode() {
+                protected _getDomNode() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

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