dbm 1.2.6 → 1.2.8

package/react/admin/editorsgroup/EditRelation.js

@@ -5,23 +5,18 @@ export default class EditRelation extends Dbm.react.BaseObject {
     _constructAfterProps() {
         super._constructAfterProps();
 
-        let item = this.context.item;
         let itemEditor = this.context.itemEditor;
         let editor;
 
-
         let direction = this.getPropValue("direction");
         let relationType = this.getPropValue("relationType");
         let objectType = this.getPropValue("objectType");
 
-        let relations = Dbm.utils.ArrayFunctions.filterByField(Dbm.objectPath(item, "relations/" + direction + "." + relationType + ".objects"), "objectTypes", objectType, "arrayContains");
-        let relation = (relations && relations.length) ? relations[0].id : null;
-
         if(direction == "in") {
-            editor = itemEditor.addIncomingRelationEditor(relationType, objectType, relation, ["relations"]);
+            editor = itemEditor.getDefaultIncomingRelationEditor(relationType, objectType);
         }
         else if(direction == "out") {
-            editor = itemEditor.addOutgoingRelationEditor(relationType, objectType, relation, ["relations"]);
+            editor = itemEditor.getDefaultOutgoingRelationEditor(relationType, objectType);
         }
         else  {
             console.error("Unknown direction", direction, this);

package/react/admin/editorsgroup/EditUrl.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditUrl extends Dbm.react.BaseObject {
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        let itemEditor = this.context.itemEditor;
+
+        let editor = itemEditor.getAdminUrlEditor();
+        this.item.setValue("editor", editor.item);
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children")
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"valueEditor": this.item.editor}}, children)
+        );
+    }
+}

package/react/admin/editorsgroup/index.js

@@ -3,4 +3,7 @@ export {default as EditItem} from "./EditItem.js";
 export {default as EditRelation} from "./EditRelation.js";
 export {default as EditVisibility} from "./EditVisibility.js";
 export {default as EditIdentifer} from "./EditIdentifer.js";
-export {default as EditFieldTranslation} from "./EditFieldTranslation.js";
+export {default as EditFieldTranslation} from "./EditFieldTranslation.js";
+export {default as EditMultipleRelations} from "./EditMultipleRelations.js";
+export {default as EditUrl} from "./EditUrl.js";
+export {default as EditPartOfObject} from "./EditPartOfObject.js";

package/react/admin/index.js

@@ -6,6 +6,10 @@ export {default as EditObjectById} from "./EditObjectById.js";
 export {default as EditorGroup} from "./EditorGroup.js";
 export {default as SaveAllButton} from "./SaveAllButton.js";
 export {default as EditObject} from "./EditObject.js";
+export {default as PageTranslations} from "./PageTranslations.js";
+export {default as EditLanguage} from "./EditLanguage.js";
+export {default as EditTranslationGroup} from "./EditTranslationGroup.js";
+export {default as SelectTranslation} from "./SelectTranslation.js";
 
 export * as editor from "./editor/index.js";
 export * as pages from "./pages/index.js";

package/react/admin/objects/itemeditors/DraggableHierarchyDisplay.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddItemToContext, {"item": Dbm.react.source.contextVariable("hierarchyItem.linkedItem")},
+                React.createElement(Dbm.react.interaction.drag.DraggableItem, {skipDraggable: true, moveMode: "insertBefore"},
+                    React.createElement("div", {className: "flex-row micro-item-spacing"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize cursor-grab", draggable: true},
+                            React.createElement("div", {className: "spacing small"}),
+                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/drag-handle.svg", "className": "background-contain drag-handle-icon action-icon-color"})
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            children
+                        )
+                    )
+                    
+                )      
+            ),
+            React.createElement("div", {className: "hierarchy-indent"},
+                React.createElement("div", {className: "spacing small"}),
+                React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("hierarchyItem.properties.children"), checkType: "notEmpty"},
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("hierarchyItem.properties.children"), as: "hierarchyItem"},
+                        React.createElement(Dbm.react.admin.objects.itemeditors.DraggableHierarchyDisplay, {}, children),
+                        React.createElement("div", {"data-slot": "spacing", className: "spacing small"}),
+                    ),
+                    React.createElement("div", {className: "spacing small"})
+                ),
+                React.createElement(Dbm.react.interaction.drag.DraggableItem, {skipDraggable: true, moveMode: "appendChild"},
+                    React.createElement("div", {className: "append-drop-position centered-cell-holder"},
+                        React.createElement("div", {})
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/HierarchyOrderedRelationsList.js

@@ -0,0 +1,335 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._internalId = Dbm.getInstance().getNextId();
+        let itemEditor = this.context.itemEditor;
+
+        this._draggedElement = null;
+        this._hierachyMap = {};
+
+        let hierarchyHolder = new Dbm.repository.Item();
+        hierarchyHolder.setValue("children", []);
+
+        this.item.requireProperty("hierarchy", hierarchyHolder);
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let orderFieldName = this.getPropValue("orderFieldName");
+
+        this._relationsEditor;
+        if(direction === "in") {
+            this._relationsEditor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            this._relationsEditor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        this._orderEditor = itemEditor.getAdminFieldEditor(orderFieldName);
+
+        let updateCommand = Dbm.commands.callFunction(this._updateHierarchy.bind(this));
+
+        Dbm.flow.addUpdateCommand(this._relationsEditor.valueProperty, updateCommand);
+        Dbm.flow.addUpdateCommand(this._orderEditor.valueProperty, updateCommand);
+        this._updateHierarchy();
+        
+    }
+
+    _removeMissingPartsOfHierarchy(aHierarchy, aMustBeInArray) {
+        //console.log("_removeMissingPartsOfHierarchy");
+        //console.log(aHierarchy, aMustBeInArray);
+        let currentArray = aHierarchy;
+        let currentArrayLength = currentArray.length;
+
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+            if(aMustBeInArray.indexOf(currentItem.id) !== -1) {
+                this._removeMissingPartsOfHierarchy(currentItem.children, aMustBeInArray);
+            }
+        }
+    }
+
+    _getAllIdsFromHierarchy(aItems, aReturnArray) {
+        let currentArray = aItems;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+
+            aReturnArray.push(currentItem.id);
+            this._getAllIdsFromHierarchy(currentItem.children, aReturnArray);
+        }
+    }
+
+    _getFullHierarchy() {
+        let relations = this._relationsEditor.value;
+        let hierarchyValue = this._orderEditor.value;
+        if(hierarchyValue) {
+            hierarchyValue = JSON.parse(JSON.stringify(hierarchyValue));
+        }
+        else {
+            hierarchyValue = [];
+        }
+
+        this._removeMissingPartsOfHierarchy(hierarchyValue, relations);
+
+        let usedIds = [];
+
+        this._getAllIdsFromHierarchy(hierarchyValue, usedIds);
+        let missingIds = Dbm.utils.ArrayFunctions.getUnselectedItems(usedIds, relations);
+
+        {
+
+            let currentArray = missingIds;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentId = currentArray[i];
+                hierarchyValue.push({id: currentId, children: []});
+            }
+        }
+
+        return hierarchyValue;
+    }
+
+    _updateHierarchy() {
+        this._updateHierarchyItems(this.item.hierarchy, this._getFullHierarchy());
+    }
+
+    _getHierarchyItem(aId) {
+        let returnItem = this._hierachyMap["item" + aId];
+        if(!returnItem) {
+            returnItem = new Dbm.repository.Item();
+            returnItem.setId("_internalHierarchy/" + this._internalId + "/" + aId);
+            returnItem.setValue("linkedItem", Dbm.getRepositoryItem(aId));
+            returnItem.setValue("children", []);
+            this._hierachyMap["item" + aId] = returnItem;
+        }
+
+        return returnItem;
+    }
+
+    _updateHierarchyItems(aHierarchyItem, aItems) {
+        //console.log("_updateHierarchyItems");
+        let newItems = [];
+        let hierarchyChildren = aHierarchyItem.children;
+        let hasChange = (hierarchyChildren.length !== aItems.length);
+
+        let currentArray = aItems;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+            let hierarchyItem = this._getHierarchyItem(currentItem.id);
+            newItems.push(hierarchyItem);
+            this._updateHierarchyItems(hierarchyItem, currentItem.children);
+            if(!hasChange && hierarchyChildren[i] !== hierarchyItem) {
+                hasChange = true;
+            }
+        }
+
+        if(hasChange) {
+            aHierarchyItem.children = newItems;
+        }
+    }
+
+    startDrag(aComponent) {
+        console.log("startDrag");
+        console.log(aComponent);
+
+        this._draggedElement = aComponent;
+    }
+
+    _findPosition(aItem, aChildren) {
+        let index = aChildren.indexOf(aItem);
+        if(index !== -1) {
+            return [index];
+        }
+
+        let currentArray = aChildren;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentChild = currentArray[i];
+            let childIndex = this._findPosition(aItem, currentChild.children);
+            if(childIndex) {
+                childIndex.unshift(i)
+                return childIndex;
+            }
+        }
+
+        return null;
+    }
+
+    _isInside(aLastPosition, aNewPosition) {
+        return aNewPosition.join(".").indexOf(aLastPosition.join(".")) === 0;
+    }
+
+    itemDroppedOn(aComponent, aData) {
+        //console.log("itemDroppedOn");
+        //console.log(aComponent, aData);
+
+        let mode = aComponent.getPropValue("moveMode");
+
+        console.log(mode);
+
+        let hierarchyValue = this._getFullHierarchy();
+
+        if(mode === "insertBefore") {
+            
+            let lastDeepIndex = this._findPosition(this._draggedElement.context.hierarchyItem, this.item.hierarchy.children);
+            let newDeepIndex = this._findPosition(aComponent.context.hierarchyItem, this.item.hierarchy.children);
+
+            if(this._isInside(lastDeepIndex, newDeepIndex)) {
+                return;
+            }
+
+            let removeIndex = lastDeepIndex.pop();
+            let removeArray;
+            if(lastDeepIndex.length === 0) {
+                removeArray = hierarchyValue;
+            }
+            else {
+                removeArray = Dbm.objectPath(hierarchyValue, lastDeepIndex.join(".children.") + ".children");
+            }
+            
+            let addIndex = newDeepIndex.pop();
+            let addArray;
+            if(newDeepIndex.length === 0) {
+                addArray = hierarchyValue;
+            }
+            else {
+                addArray = Dbm.objectPath(hierarchyValue, newDeepIndex.join(".children.") + ".children");
+            }
+
+            let movedItem = removeArray.splice(removeIndex, 1)[0];
+
+            if(addIndex > removeIndex && removeArray === addArray) {
+                addIndex--;
+            }
+
+            addArray.splice(addIndex, 0, movedItem);
+        }
+        else if(mode === "appendChild") {
+            let lastDeepIndex = this._findPosition(this._draggedElement.context.hierarchyItem, this.item.hierarchy.children);
+            let newDeepIndex = this._findPosition(aComponent.context.hierarchyItem, this.item.hierarchy.children);
+
+            if(this._isInside(lastDeepIndex, newDeepIndex)) {
+                return;
+            }
+
+            let removeIndex = lastDeepIndex.pop();
+            let removeArray;
+            if(lastDeepIndex.length === 0) {
+                removeArray = hierarchyValue;
+            }
+            else {
+                removeArray = Dbm.objectPath(hierarchyValue, lastDeepIndex.join(".children.") + ".children");
+            }
+            
+            let addArray = Dbm.objectPath(hierarchyValue, newDeepIndex.join(".children.") + ".children");
+
+            let movedItem = removeArray.splice(removeIndex, 1)[0];
+            addArray.push(movedItem);
+        }
+        else if(mode === "last") {
+            let lastDeepIndex = this._findPosition(this._draggedElement.context.hierarchyItem, this.item.hierarchy.children);
+            
+            let removeIndex = lastDeepIndex.pop();
+            let removeArray;
+            if(lastDeepIndex.length === 0) {
+                removeArray = hierarchyValue;
+            }
+            else {
+                removeArray = Dbm.objectPath(hierarchyValue, lastDeepIndex.join(".children.") + ".children");
+            }
+            
+            let addArray = hierarchyValue;
+
+            let movedItem = removeArray.splice(removeIndex, 1)[0];
+            addArray.push(movedItem);
+        }
+
+        this._orderEditor.value = hierarchyValue;
+    }
+
+    _create() {
+        console.log("_create");
+        let objectType = this.getPropValue("objectType");
+        let encodings = this.getPropValueWithDefault("encodings", ["id"]);
+        let visibility = this.getPropValueWithDefault("visibility", "private");
+
+        let changes = [];
+
+        let request = Dbm.getGraphApi().createItem([objectType], visibility, changes, encodings);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._created.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _created(aItem) {
+        console.log("_created");
+        console.log(aItem);
+
+        let itemEditor = this.context.itemEditor;
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let editor;
+        if(direction === "in") {
+            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aItem.id);
+        editor.value = newValues;
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let children = this.getPropValue("children");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"dragController": this}},
+                React.createElement(Dbm.react.form.LabelledArea, {label: label}), 
+                React.createElement("div", {"className": ""},
+                    React.createElement(Dbm.react.area.List, {items: this.item.hierarchy.properties.children, as: "hierarchyItem"},
+                        React.createElement(Dbm.react.context.AddItemToContext, {"item": Dbm.react.source.contextVariable("hierarchyItem.linkedItem")},
+                            React.createElement(Dbm.react.admin.objects.itemeditors.DraggableHierarchyDisplay, {},
+                                children
+                            )
+                        ),
+                        React.createElement("div", {"data-slot": "spacing", className: "spacing small"})
+                    )
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement(Dbm.react.interaction.drag.DraggableItem, {skipDraggable: true, moveMode: "last"},
+                    React.createElement("div", {className: "append-drop-position centered-cell-holder"},
+                        React.createElement("div", {})
+                    )
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "flex-row"},
+                    React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._create.bind(this))},
+                        React.createElement("div", {"className": "action-button action-button-padding"},
+                            "Add"
+                        )
+                    )
+                )
+            )
+            
+        )
+    }
+}

package/react/admin/objects/itemeditors/RelationsList.js

@@ -0,0 +1,77 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RelationsList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _create() {
+        console.log("_create");
+        let objectType = this.getPropValue("objectType");
+        let encodings = this.getPropValueWithDefault("encodings", ["id"]);
+        let visibility = this.getPropValueWithDefault("visibility", "private");
+
+        let changes = [];
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem([objectType], visibility, changes, encodings);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._created.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _created(aItem) {
+        console.log("_created");
+        console.log(aItem);
+
+        let itemEditor = this.context.itemEditor;
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let editor;
+        if(direction === "in") {
+            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aItem.id);
+        editor.value = newValues;
+    }
+
+    _renderMainElement() {
+
+        let id = this.context.item.id;
+
+        let label = this.getPropValue("label");
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+        let children = this.getPropValue("children");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: label}), 
+            React.createElement("div", {"className": "standard-alternating-rows"},
+                React.createElement(Dbm.react.admin.editorsgroup.EditMultipleRelations, {"direction": direction, "relationType": relationType, "objectType": objectType},
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("valueEditor.editValue.value")},
+                        children
+                    )
+                )
+            ),
+            React.createElement("div", {"className": "spacing small"}),
+            React.createElement("div", {"className": "flex-row"},
+                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._create.bind(this))},
+                    React.createElement("div", {"className": "action-button action-button-padding"},
+                        "Add"
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/Url.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class Url extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let id = this.context.item.id;
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: "Url"}, 
+                React.createElement(Dbm.react.admin.editorsgroup.EditUrl, {},
+                    React.createElement(Dbm.react.form.FormField, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/index.js

@@ -10,4 +10,8 @@ export {default as PageRepresentation} from "./PageRepresentation.js";
 export {default as MainImage} from "./MainImage.js";
 export {default as Identifier} from "./Identifier.js";
 export {default as SingleRelation} from "./SingleRelation.js";
-export {default as Field} from "./Field.js";
+export {default as Field} from "./Field.js";
+export {default as Url} from "./Url.js";
+export {default as RelationsList} from "./RelationsList.js";
+export {default as HierarchyOrderedRelationsList} from "./HierarchyOrderedRelationsList.js";
+export {default as DraggableHierarchyDisplay} from "./DraggableHierarchyDisplay.js";

package/react/animation/AnimatedElement.js

@@ -10,6 +10,10 @@ export default class AnimatedElement extends Dbm.react.BaseObject {
         controller.propertyInput("element", this.item.requireProperty("animationElement", null));
     }
 
+    _removedUsedProps(aProps) {
+        delete aProps["controller"];
+    }
+
     _renderMainElement() {
         //console.log("AnimatedElement::_renderMainElement");
         //console.log(this);

package/react/area/FixedWidthInfiniteSlideshow.js

@@ -8,6 +8,13 @@ export default class FixedWidthInfiniteSlideshow extends Dbm.react.BaseObject {
 		
 	}
 
+    _removedUsedProps(aProps) {
+        delete aProps["viewWidth"];
+        delete aProps["prepareLength"];
+        delete aProps["elementWidth"];
+        delete aProps["spacing"];
+    }
+
     _renderMainElement() {
         //console.log("FixedWidthInfiniteSlideshow::render");
         //console.log(this);
@@ -19,7 +26,7 @@ export default class FixedWidthInfiniteSlideshow extends Dbm.react.BaseObject {
 
         let index = this.getPropValue("index");
 
-        let elements = this.getPropValue("children");;
+        let elements = this.getPropValue("children");
 
 		let numberOfElements = elements.length;
 

package/react/area/HasData.js

@@ -26,7 +26,7 @@ export default class HasData extends Dbm.react.BaseObject {
 
         let compareFunction = Dbm.getInstance().repository.getItem("compareFunctions/" + checkType).compare;
         if(!compareFunction) {
-            console.warn("No copmare function registered for: " + checkType + ". Using default", this, data, checkType, compareValue);
+            console.warn("No compare function registered for: " + checkType + ". Using default", this, data, checkType, compareValue);
             compareFunction = Dbm.utils.CompareFunctions.objectExists;
         }
 

package/react/area/InsertElement.js

@@ -6,7 +6,11 @@ export default class InsertElement extends Dbm.react.BaseObject {
         super._construct();
     }
 
-    render() {
+    _removedUsedProps(aProps) {
+        delete aProps["element"];
+    }
+
+    _renderMainElement() {
         //console.log("InsertElement::render");
         //console.log(this);
         
@@ -16,7 +20,10 @@ export default class InsertElement extends Dbm.react.BaseObject {
             return React.createElement("div", {}, "No element set");
         }
 
-        return element;
+        let props = this._copyProps(this.props);
+
+        let returnElement = Dbm.react.ChildFunctions.clone(element, props);
+        return returnElement;
     }
 }
 

package/react/area/InsertElementWithChildren.js

@@ -0,0 +1,33 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class InsertElementWithChildren extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _performCloneWithNewChildren(aElement, aChildren) {
+        var callArray = [aElement, {}];
+        
+        callArray = callArray.concat(aChildren);
+        
+        return React.cloneElement.apply(React, callArray);
+    }
+
+    render() {
+        //console.log("InsertElementWithChildren::render");
+        //console.log(this);
+        
+        let element = this.getPropValue("element");
+        let children = this.getPropValue("children");
+
+        if(!element) {
+            return React.createElement("div", {}, "No element set");
+        }
+
+        return this._performCloneWithNewChildren(element, children);
+    }
+}
+
+
+