dbm 1.4.14 → 1.4.16

package/react/admin/editor/fields/ArrayField.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Dbm from "../../../../index.js";
 
-export default class SelectObjectsField extends Dbm.react.BaseObject {
+export default class ArrayField extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
 
@@ -66,14 +66,31 @@ export default class SelectObjectsField extends Dbm.react.BaseObject {
 
 
         return this._createMainElement(Dbm.react.form.EditArray, {value: this.item.properties.value},
-            React.createElement("div", {}, 
-                this.getPropValue("children"),
-                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._removeItem, [Dbm.react.source.contextVariable("arrayEditor"), Dbm.react.source.contextVariable("item")])},
-                    React.createElement("div", {}, "Remove")
+            React.createElement("div", {"className": "flex-row small-item-spacing"}, 
+                React.createElement("div", {"className": "flex-row-item flex-resize"},
+                    this.getPropValue("children")
+                ),
+                React.createElement("div", {"className": "flex-row-item flex-no-resize"},
+                    React.createElement("div", {className: "spacing small"}),
+                    React.createElement(Dbm.react.interaction.ConfirmButton, {"command": this._getScopedCallFunctionCommand(this._removeItem, [Dbm.react.source.contextVariable("arrayEditor"), Dbm.react.source.contextVariable("item")])},
+                        React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon action-icon-color cursor-pointer"}),
+                        React.createElement("div", {"data-slot": "confirm", className: "absolute-container cursor-pointer", title: "Click to remove"},
+                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon remove-action-icon-color cursor-pointer"}),
+                            React.createElement("div", {className:"centered-tip-text no-pointer-events"},
+                                "Remove?"
+                            )
+                        )
+                    )
                 )
             ),
-            React.createElement(Dbm.react.interaction.CommandButton, {"data-slot": "after", command: Dbm.commands.callFunction(this._add.bind(this), [Dbm.react.source.contextVariable("arrayEditor")])},
-                React.createElement("div", {className: "action-button action-button-padding"}, "Add")
+            React.createElement("div", {"data-slot": "spacing", className: "spacing small"}),
+            React.createElement("div", {"data-slot": "after", "className": "flex-row"},
+                React.createElement("div", {className: "spacing small"}),
+                React.createElement("div", {"className": "flex-row-item"},
+                    React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._add.bind(this), [Dbm.react.source.contextVariable("arrayEditor")])},
+                        React.createElement("div", {className: "action-button action-button-padding"}, "Add")
+                    )
+                )
             )
          );
     }

package/react/admin/editor/fields/Link.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class Link extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = {};
+        }
+
+        return returnData;
+    }
+
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement(Dbm.react.form.Link, {value: this.item.properties.value, className: "standard-field standard-field-padding full-width"});
+    }
+}

package/react/admin/editor/fields/index.js

@@ -6,4 +6,5 @@ export {default as SelectObjectField} from "./SelectObjectField.js";
 export {default as SelectObjectsField} from "./SelectObjectsField.js";
 export {default as SelectionField} from "./SelectionField.js";
 export {default as ArrayField} from "./ArrayField.js";
-export {default as EditorBlocks} from "./EditorBlocks.js";
+export {default as EditorBlocks} from "./EditorBlocks.js";
+export {default as Link} from "./Link.js";

package/react/admin/objects/ExploreObject.js

@@ -0,0 +1,103 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class ExploreObject extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let id = this.getPropValue("id");
+
+        this.item.requireProperty("fields", []);
+        this.item.requireProperty("incomingRelations", []);
+        this.item.requireProperty("outgoingRelations", []);
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+        this.item.requireProperty("loaded", false).addUpdate(this._getScopedCallFunctionCommand(this._loaded));
+
+        {
+            let request = Dbm.getGraphApi().requestRange(
+                [
+                    {"type": "includePrivate"},
+                    {"type": "includeDraft"},
+                    {"type": "idSelection", "ids": [id]},
+                ],
+                ["objectTypes", "name", "identifier", "admin_fields", "relations"]
+            );
+            allLoaded.addCheck(request.properties.status);
+        }
+
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _loaded() {
+        let id = this.getPropValue("id");
+        let item = Dbm.repository.getItem(id);
+        console.log(">>>>>>>>>>", item);
+
+        let encodedFields = [];
+        let fields = item.fields;
+        for(let fieldName in fields) {
+            encodedFields.push({"name": fieldName, "value": fields[fieldName]});
+        }
+
+        this.item.fields = encodedFields;
+
+        this.item.incomingRelations = Dbm.utils.ArrayFunctions.sortOnField([].concat(item["relations/in"]["all"]), "type");
+        this.item.outgoingRelations = Dbm.utils.ArrayFunctions.sortOnField([].concat(item["relations/out"]["all"]), "type");
+        console.log(this.item.incomingRelations);
+    }
+
+    _renderMainElement() {
+
+        let id = this.getPropValue("id");
+        let item = Dbm.repository.getItem(id);
+
+        return React.createElement("div", {},
+            
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+                React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": id},
+                   
+                    React.createElement("h2", {"className": "no-margins"},
+                        Dbm.react.text.text(Dbm.react.source.item("id")),
+                        " - ",
+                        Dbm.react.text.text(Dbm.react.source.item("name")),
+                    ),
+                    React.createElement("div", {"className": "small-description"},
+                        Dbm.react.text.text(Dbm.react.source.item("identifier"))
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.item("objectTypes"), className: "inline-list standard-tag-list standard-tag-list-expand", "as": "objectType", "keyField": "(root)"},
+                        React.createElement("div", {"className": "standard-tag standard-tag-padding standard-tag-list-item inline-list-item display-inline-block"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("objectType"))
+                        )
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement(Dbm.react.area.List, {items: this.item.properties.fields, "as": "field", "keyField": "name"},
+                        React.createElement("div", {},
+                            React.createElement("div", {},
+                                Dbm.react.text.text(Dbm.react.source.contextVariable("field.name"))
+                            ),
+                            React.createElement("div", {},
+                                Dbm.react.text.text(Dbm.react.source.contextVariable("field.value"))
+                            )
+                        )
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement("div", {"className": "flex-row small-item-spacing halfs"},
+                        React.createElement("div", {"className": "flex-row-item"},
+                            React.createElement(Dbm.react.area.List, {items: this.item.properties.incomingRelations, "keyField": "type"},
+                                React.createElement(Dbm.react.admin.objects.explore.RelationType, {"objectLink": "from"})
+                            ),
+                        ),
+                        React.createElement("div", {"className": "flex-row-item"},
+                            React.createElement(Dbm.react.area.List, {items: this.item.properties.outgoingRelations, "keyField": "type"},
+                                React.createElement(Dbm.react.admin.objects.explore.RelationType, {"objectLink": "to"})
+                            ),
+                        )
+                    )
+                )
+            )
+            
+        )
+    }
+}

package/react/admin/objects/explore/Relation.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class Relation extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("loaded", false);
+
+    }
+
+    _constructAfterProps() {
+
+        super._constructAfterProps();
+
+        let relation = this.getPropValue("relation");
+        let objectId = Dbm.objectPath(relation, this.getPropValue("objectLink") + ".id");
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+
+        {
+            let request = Dbm.getGraphApi().requestRange(
+                [
+                    {"type": "includePrivate"},
+                    {"type": "includeDraft"},
+                    {"type": "idSelection", "ids": [objectId]},
+                ],
+                ["name", "identifier"]
+            );
+            allLoaded.addCheck(request.properties.status);
+        }
+
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _renderMainElement() {
+
+        let relation = this.getPropValue("relation");
+        let objectId = Dbm.objectPath(relation, this.getPropValue("objectLink") + ".id");
+
+        let url = "/admin/items/item/?id=" + objectId;
+
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.text.Link, {"href": url, "className": "custom-styled-link"},
+                React.createElement("div", {"className": "flex-row small-item-spacing"},
+                    React.createElement("div", {"className": "flex-row-item"},
+                        Dbm.react.text.text(objectId)
+                    ),
+                    React.createElement("div", {"className": "flex-row-item"},
+                        React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.loaded},
+                            React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": objectId},
+                                Dbm.react.text.text(Dbm.react.source.item("name"))
+                            )
+                        )
+                    )
+                ),
+                React.createElement("div", {"className": "small-description"},
+                    React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.loaded},
+                        React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": objectId},
+                            Dbm.react.text.text(Dbm.react.source.item("identifier"))
+                        )
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/explore/RelationType.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RelationType extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let relationType = this.context.item;
+        let objectLink = this.getPropValue("objectLink");
+        
+
+        let allTypedRelations = [];
+
+        let currentArray = relationType.allRelations;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentRelation = currentArray[i];
+
+            let currentArray2 = Dbm.objectPath(currentRelation, objectLink + ".objectTypes");
+            let currentArray2Length = currentArray2.length;
+            for(let j = 0; j < currentArray2Length; j++) {
+                allTypedRelations.push({"type": currentArray2[j], "relation": currentRelation})
+            }
+        }
+
+        let groups = Dbm.utils.ArrayFunctions.sortOnField(Dbm.utils.ArrayFunctions.group(allTypedRelations, "type"), "key");
+
+        return this._createMainElement("div", {},
+            React.createElement("div", {}, Dbm.react.text.text(Dbm.react.source.item("type"))),
+            React.createElement(Dbm.react.area.List, {"items": groups, "as": "typeGroup"},
+                React.createElement(Dbm.react.admin.objects.explore.RelationTypeGroup, {"name": Dbm.react.source.contextVariable("typeGroup.key"), "relations": Dbm.react.source.contextVariable("typeGroup.value"), "objectLink": objectLink})
+            ),
+        )
+    }
+}

package/react/admin/objects/explore/RelationTypeGroup.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RelationTypeGroup extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let objectLink = this.getPropValue("objectLink");
+
+        return this._createMainElement("div", {},
+            React.createElement("div", {}, 
+                Dbm.react.text.text(this.getPropValue("name"))
+            ),
+            React.createElement(Dbm.react.area.List, {"items": this.getPropValue("relations"), "as": "relationWithType"},
+                React.createElement(Dbm.react.admin.objects.explore.Relation, {"relation": Dbm.react.source.contextVariable("relationWithType.relation"), "objectLink": objectLink})
+            )
+        )
+    }
+}

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

@@ -0,0 +1,3 @@
+export {default as RelationType} from "./RelationType.js";
+export {default as RelationTypeGroup} from "./RelationTypeGroup.js";
+export {default as Relation} from "./Relation.js";

package/react/admin/objects/index.js

@@ -5,5 +5,7 @@ export {default as InjectObjectTypeEditor} from "./InjectObjectTypeEditor.js";
 export {default as RunObjectCommands} from "./RunObjectCommands.js";
 export {default as UserList} from "./UserList.js";
 export {default as UserListRow} from "./UserListRow.js";
+export {default as ExploreObject} from "./ExploreObject.js";
 
-export * as itemeditors from "./itemeditors/index.js";
+export * as itemeditors from "./itemeditors/index.js";
+export * as explore from "./explore/index.js";

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

@@ -18,6 +18,12 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
     _renderMainElement() {
 
         let children = this.getPropValue("children");
+        let depthLimit = this.getPropValueWithoutNull("depthLimit", -1);
+        let newDepthLimit = depthLimit;
+        if(depthLimit > 0) {
+            newDepthLimit = depthLimit-1;
+        }
+        let canAddChilds = (depthLimit !== 0);
 
         return React.createElement("div", {},
             React.createElement(Dbm.react.context.AddItemToContext, {"item": Dbm.react.source.contextVariable("hierarchyItem.linkedItem")},
@@ -32,7 +38,7 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
                         ),
                         React.createElement("div", {className: "flex-row-item flex-no-resize"},
                             React.createElement("div", {className: "spacing small"}),
-                            React.createElement(Dbm.react.interaction.ConfirmButton, {"command": Dbm.commands.callFunction(this._remove.bind(this))},
+                            React.createElement(Dbm.react.interaction.ConfirmButton, {"command": this._getScopedCallFunctionCommand(this._remove)},
                                 React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon action-icon-color cursor-pointer"}),
                                 React.createElement("div", {"data-slot": "confirm", className: "absolute-container cursor-pointer", title: "Click to remove"},
                                     React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon remove-action-icon-color cursor-pointer"}),
@@ -50,14 +56,16 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
                 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(Dbm.react.admin.objects.itemeditors.DraggableHierarchyDisplay, {depthLimit: newDepthLimit}, 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", {})
+                React.createElement(Dbm.react.area.HasData, {check: canAddChilds},
+                    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

@@ -348,6 +348,7 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
 
         let label = this.getPropValue("label");
         let children = this.getPropValue("children");
+        let depthLimit = this.getPropValueWithoutNull("depthLimit", -1);
 
         return React.createElement("div", {},
             React.createElement(Dbm.react.context.AddContextVariables, {"values": {"dragController": this, "hierarchyController": this}},
@@ -355,7 +356,7 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
                 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, {},
+                            React.createElement(Dbm.react.admin.objects.itemeditors.DraggableHierarchyDisplay, {depthLimit: depthLimit},
                                 children
                             )
                         ),

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

@@ -0,0 +1,26 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class TextAreaField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        let fieldNameSource = Dbm.react.source.contextVariable("fieldName");
+        let editorValueSource = Dbm.react.source.contextVariable("valueEditor.editValue.value");
+
+        return React.createElement("div", {},
+            React.createElement("label", {className: "standard-field-label"}, label),
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"fieldName": fieldName}},
+                React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
+                    React.createElement(Dbm.react.form.TextArea, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                )
+            )
+        )
+    }
+}

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

@@ -20,3 +20,4 @@ export {default as RichTextField} from "./RichTextField.js";
 export {default as RichTextFieldWithTranslations} from "./RichTextFieldWithTranslations.js";
 export {default as FormattedField} from "./FormattedField.js";
 export {default as FormattedFieldWithTranslations} from "./FormattedFieldWithTranslations.js";
+export {default as TextAreaField} from "./TextAreaField.js";

package/react/animation/AnimationController.js

@@ -19,10 +19,8 @@ export default class AnimationController extends Dbm.core.BaseObject {
         //console.log("_updateStyle");
         let element = this.item.element;
 
-        
-
         if(element) {
-            
+
             let styleArray = [];
             
             let styleObject = this.item.style;

package/react/animation/index.js

@@ -18,5 +18,20 @@ export const connectedAnimation = function(aStyleProperty) {
 
     newAnimationController.item.propertyInput("style", aStyleProperty);
 
+    return newAnimationController;
+}
+
+export const freeStyleTransformAnimation = function() {
+    let transform = new Dbm.flow.updatefunctions.dom.TransformStyle();
+
+    let newAnimationController = new Dbm.react.animation.AnimationController();
+
+    let styleObject = new Dbm.flow.updatefunctions.dom.StyleObject();
+    styleObject.addProperty("transform", transform.output.properties.value);
+
+    newAnimationController.item.propertyInput("style", styleObject.output.properties.style);
+    newAnimationController.item.setValue("styleProperties", styleObject);
+    newAnimationController.item.setValue("transformProperties", transform);
+
     return newAnimationController;
 }

package/react/area/InsertElement.js

@@ -20,6 +20,9 @@ export default class InsertElement extends Dbm.react.BaseObject {
         if(!element) {
             return React.createElement("div", {}, "No element set");
         }
+        else if(typeof(element) === "string") {
+            return element;
+        }
 
         let props = this._copyProps(element.props);
 

package/react/area/Layout.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Layout extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let layoutProperty = this.context.layout;
+    }
+
+    _renderMainElement() {
+        
+        let data = this.getPropValue("layout");
+
+        let layouts = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(data);
+
+        return this._createMainElement(Dbm.react.area.HasData, {"check": this.context.layout, "checkType": "inArray", "compareValue": layouts}, this.getPropValue("children"));
+    }
+}
+

package/react/area/List.js

@@ -53,6 +53,10 @@ export default class List extends Dbm.react.BaseObject {
             newChildren.push(React.createElement(Dbm.react.context.AddContextVariables, {key: key, values: values}, mainChildren));
         }
 
+        if(slots.wrapper) {
+            newChildren = React.cloneElement(slots.wrapper[0], slots.wrapper[0].props, newChildren);
+        }
+
         return React.createElement(React.Fragment, {}, newChildren);
     }
 }

package/react/area/NativeElement.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class NativeElement extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["element"];
+    }
+
+    componentDidMount() {
+
+        let element = this.getPropValue("element");
+		
+        let parentElement = this.item.holderElement;
+        if(element && parentElement) {
+            parentElement.appendChild(element);
+        }
+    }
+
+    componentDidUpdate() {
+
+        let element = this.getPropValue("element");
+
+        let parentElement = this.item.holderElement;
+        //METODO: should we remove the old element?
+        if(element && parentElement) {
+            parentElement.appendChild(element);
+        }
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {"ref": this.createRef("holderElement")});
+    }
+}

package/react/area/RepeatedSlider.js

@@ -0,0 +1,73 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class RepeatedSlider extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		this._sliderItems = {};
+	}
+
+    _removedUsedProps(aProps) {
+        delete aProps["viewWidth"];
+        delete aProps["prepareLength"];
+        delete aProps["spacing"];
+        delete aProps["position"];
+        delete aProps["itemClasses"];
+    }
+
+    _getItemForIndex(aIndex) {
+        let currentItem = this._sliderItems["i"+ aIndex];
+        if(!currentItem) {
+            currentItem = new Dbm.repository.Item();
+            currentItem.setValue("index", aIndex);
+            currentItem.setValue("envelope", 0);
+            currentItem.setValue("localPosition", 0);
+            this._sliderItems["i"+ aIndex] = currentItem;
+        }
+
+        return currentItem;
+    }
+
+    _renderMainElement() {
+        //console.log("FixedWidthInfiniteSlideshow::render");
+        //console.log(this);
+
+        let viewWidth = this.getPropValueWithDefault("viewWidth", 1000);
+        let prepLength = this.getPropValueWithDefault("prepareLength", 20);
+        let spacing = this.getPropValueWithDefault("spacing", 0);
+        let itemClasses = this.getPropValueWithDefault("itemClasses", "");
+
+        let position = this.getPropValueWithDefault("position", 0);
+
+        let elements = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+		let numberOfElements = elements.length;
+
+        let length = 400;
+
+        let startIndex = Math.floor(position/length);
+
+        let endIndex = startIndex+10; //Math.floor(position);
+
+        let children = [];
+        for(let i = startIndex; i <= endIndex; i++) {
+            let currentPosition = i*length-position;
+            let elementIndex = Dbm.utils.NumberFunctions.floatMod(i, numberOfElements);
+
+            let indexItem = this._getItemForIndex(i);
+
+            let style = {"transform": "translateX(" + currentPosition + "px)", position: "absolute", left: 0, top: 0};
+            let child = React.createElement("div", {"key": i, "className": itemClasses, "style": style},
+                React.createElement(Dbm.react.context.AddContextVariables, {"values": {"sliderItem": indexItem}},
+                    elements[elementIndex]
+                )
+            );
+            children.push(child);
+        }
+        
+		return this._createMainElement("div", {},
+			children
+		);
+    }
+}