diff --git a/src/baseComponents.js b/src/baseComponents.js index e79e45a..0cb9aa2 100644 --- a/src/baseComponents.js +++ b/src/baseComponents.js @@ -13,7 +13,7 @@ class FlexContainerComponent extends Component { * @param {Component|Array} innerComponent * @returns {FlexContainerComponent} this component object */ - componentChildren(innerComponent) { + childContext(innerComponent) { if (innerComponent instanceof Array) { innerComponent .map(cl => { @@ -30,7 +30,7 @@ class FlexContainerComponent extends Component { }) } - return super.componentChildren(innerComponent); + return super.childContext(innerComponent); } } @@ -39,11 +39,10 @@ class FlexContainerComponent extends Component { */ class Column extends FlexContainerComponent { constructor(attr = {}) { - super(document.createElement("div"), attr) + super(attr) .addStyleClass("column-component") .modifier( new Modifier() - .fillMaxHeight() .setStyleRule("flex-direction", "column") ); } @@ -68,7 +67,7 @@ class Row extends FlexContainerComponent { * @param {*} innerComponent * @returns {Row} */ - componentChildren(innerComponent) { + childContext(innerComponent) { if (innerComponent instanceof Array) { innerComponent .map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent())) @@ -83,7 +82,7 @@ class Row extends FlexContainerComponent { .join(icomp._modifier) }) } - return super.componentChildren(innerComponent) + return super.childContext(innerComponent) } /** diff --git a/src/builder.js b/src/builder.js index 714f785..247ef9e 100644 --- a/src/builder.js +++ b/src/builder.js @@ -203,7 +203,7 @@ const builder = { builder.genTag("main") .alignment(Alignment.CENTER) .arrangement(Arrangement.CENTER) - .componentChild(innerComponents) + .childContext(innerComponents) .generate() ) main.remove(); diff --git a/src/component.js b/src/component.js index a1b515f..e264ddc 100644 --- a/src/component.js +++ b/src/component.js @@ -125,18 +125,30 @@ class Component { /** - * - * @param {Component} component + * Opens a context to create element children. + * Either as one component or a list/array of components. + * @param {Component|Array} component * @returns {Component} this component object */ - componentChild(component) { - this._element.append( - (component instanceof Component - ? component - : component.toComponent() - ) - .generate() - ); + childContext(component) { + console.log(arguments, arguments.length > 1) + if (arguments.length > 1) { + for (let i = 0; i < arguments.length; i++) { + this.childContext(arguments[i]); + } + } else if (component instanceof Array) { + for (let i = 0; i < component.length; i++) { + this.childContext(component[i]); + } + } else { + this._element.append( + (component instanceof Component + ? component + : component.toComponent() + ) + .generate() + ); + } return this; } @@ -147,7 +159,7 @@ class Component { */ componentChildren(innerComponent) { for (let i = 0; i < innerComponent.length; i++) { - this.componentChild(innerComponent[i]); + this.childContext(innerComponent[i]); } return this; } diff --git a/src/modifier.js b/src/modifier.js index f24f198..e6f153c 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -250,10 +250,10 @@ class ChainableModifier extends Modifier { * @param {Component} innerComponent * @returns {Component} the parent Component */ - componentChild(innerComponent) { + childContext(innerComponent) { return this._component .modifier(this) - .componentChild(innerComponent); + .childContext(innerComponent); } /** @@ -261,9 +261,9 @@ class ChainableModifier extends Modifier { * @param {Array} innerComponent * @returns {Component} the parent Component */ - componentChildren(innerComponent) { + childContext(innerComponent) { return this._component .modifier(this) - .componentChildren(innerComponent); + .childContext(innerComponent); } } diff --git a/src/sizeSide/dimensions.js b/src/sizeSide/dimensions.js index 8d1e0d1..6b0720a 100644 --- a/src/sizeSide/dimensions.js +++ b/src/sizeSide/dimensions.js @@ -88,18 +88,11 @@ class ChainableDimensions extends DimensionsChain { .toComponent(); } - componentChild(innerComponent) { + childContext(innerComponent) { return this._modifier .dimensions(this) .toComponent() - .componentChild(innerComponent); - } - - componentChildren(innerComponent) { - return this._modifier - .dimensions(this) - .toComponent() - .componentChildren(innerComponent); + .childContext(innerComponent); } } diff --git a/src/sizeSide/shapes.js b/src/sizeSide/shapes.js index d0a4c68..1c7607f 100644 --- a/src/sizeSide/shapes.js +++ b/src/sizeSide/shapes.js @@ -102,18 +102,11 @@ class ChainableShape extends ShapeChain { .toComponent(); } - componentChild(innerComponent) { + childContext(innerComponent) { return this._modifier .clip(this) .toComponent() - .componentChild(innerComponent); - } - - componentChildren(innerComponent) { - return this._modifier - .clip(this) - .toComponent() - .componentChildren(innerComponent); + .childContext(innerComponent); } } diff --git a/src/sizeSide/siding.js b/src/sizeSide/siding.js index f2e07c8..6a9e3ca 100644 --- a/src/sizeSide/siding.js +++ b/src/sizeSide/siding.js @@ -240,18 +240,11 @@ class ChainablePadding extends PaddingChain { .toComponent(); } - componentChild(innerComponent) { + childContext(innerComponent) { return this._modifier .padding(this) .toComponent() - .componentChild(innerComponent); - } - - componentChildren(innerComponent) { - return this._modifier - .padding(this) - .toComponent() - .componentChildren(innerComponent); + .childContext(innerComponent); } }