Merge pull request #463 from hdeshev/layout-insert-child-at

Layout child API extensions

apps/tests/layouts/stack-layout-tests.ts

@@ -1,6 +1,6 @@
-import page = require("ui/page");
-import layout = require("ui/layouts/stack-layout");
-import button = require("ui/button");
+import {Page} from "ui/page";
+import {StackLayout} from "ui/layouts/stack-layout";
+import {Button} from "ui/button";
 import TKUnit = require("../TKUnit");
 import helper = require("./layout-helper");
 import navHelper = require("../ui/helper");
@@ -9,7 +9,7 @@ import utils = require("utils/utils");
 
 var ASYNC = 2;
 
-export class MyStackLayout extends layout.StackLayout {
+export class MyStackLayout extends StackLayout {
     public measureCount: number = 0;
     public arrangeCount: number = 0;
 
@@ -32,16 +32,16 @@ export class MyStackLayout extends layout.StackLayout {
     }
 }
 
-var tmp: button.Button;
-var newPage: page.Page;
+var tmp: Button;
+var newPage: Page;
 var rootLayout: MyStackLayout;
 var btn1: helper.MyButton;
 var btn2: helper.MyButton;
 
 export function setUpModule() {
     var pageFactory = function () {
-        newPage = new page.Page();
-        tmp = new button.Button();
+        newPage = new Page();
+        tmp = new Button();
         tmp.text = "Loading test";
         newPage.content = tmp;
         return newPage;
@@ -65,7 +65,7 @@ export function setUp() {
     btn1.text = "btn1";
     rootLayout.addChild(btn1);
     btn2 = new helper.MyButton();
-    btn2.text = "btn 2";
+    btn2.text = "btn2";
     rootLayout.addChild(btn2);
     newPage.content = rootLayout;
 }
@@ -206,11 +206,37 @@ export function test_StackLayout_Padding_Horizontal() {
     helper.assertLayout(btn2, 60, 20, 50, 240, "btn2");
 }
 
+function assertChildTexts(expected, layout, message) {
+    let texts: Array<string> = [];
+    layout._eachChildView((child: {text: string}) => texts.push(child.text));
+    TKUnit.assertEqual(expected, texts.join('|'), message);
+}
+
+export function test_insertChildAtPosition() {
+    assertChildTexts("btn1|btn2", rootLayout, "initial 2 buttons");
+
+    let newChild = new Button();
+    newChild.text = 'in-between';
+    rootLayout.insertChild(1, newChild);
+
+    assertChildTexts("btn1|in-between|btn2", rootLayout, "button inserted at correct location");
+}
+
+export function test_getChildIndex() {
+    let lastChildIndex = rootLayout.getChildrenCount() - 1;
+    let lastButton = <Button>rootLayout.getChildAt(lastChildIndex);
+    TKUnit.assertEqual("btn2", lastButton.text);
+    TKUnit.assertEqual(lastChildIndex, rootLayout.getChildIndex(lastButton));
+
+    let nonChild = new Button();
+    TKUnit.assertEqual(-1, rootLayout.getChildIndex(nonChild));
+}
+
 export function test_codesnippets() {
     // <snippet module="ui/layouts/stack-layout" title="stack-layout">
     // ### Create StackLayout
     // ``` JavaScript
-    var stackLayout = new layout.StackLayout();
+    var stackLayout = new StackLayout();
     //  ```
 
     // ### Declaring a StackLayout.
@@ -225,7 +251,7 @@ export function test_codesnippets() {
 
     // ### Add child view to layout
     // ``` JavaScript
-    var btn = new button.Button();
+    var btn = new Button();
     stackLayout.addChild(btn);
     //  ```
 
@@ -240,4 +266,4 @@ export function test_codesnippets() {
     // ```
 
     // </snippet>
-};
+};

ui/layouts/layout.d.ts

@@ -17,12 +17,25 @@
          */
         getChildAt(index: number): view.View;
 
+        /**
+         * Returns the position of the child view
+         * @param child The child view that we are looking for.
+         */
+        getChildIndex(child: view.View): number;
+
         /**
          * Adds the view to children array.
          * @param view The view to be added to the end of the children array.
          */
         addChild(view: view.View);
 
+        /**
+         * Inserts the view to children array at the specified index.
+         * @param atIndex The insertion index.
+         * @param view The view to be added to the end of the children array.
+         */
+        insertChild(atIndex: number, child: view.View);
+
         /**
          * Removes the specified view from the children array.
          * @param view The view to remove from the children array.
@@ -49,4 +62,4 @@
          */
         paddingTop: number;
     }
-}
+}

ui/layouts/layout.ts

@@ -28,6 +28,10 @@ export class Layout extends view.CustomLayoutView implements definition.Layout,
         return this._subViews[index];
     }
 
+    getChildIndex(child: view.View): number {
+        return this._subViews.indexOf(child);
+    }
+
     public getChildById(id: string) {
         return view.getViewById(this, id);
     }
@@ -38,6 +42,11 @@ export class Layout extends view.CustomLayoutView implements definition.Layout,
         this._subViews.push(child);
     }
 
+    public insertChild(atIndex: number, child: view.View) {
+        this._addView(child);
+        this._subViews.splice(atIndex, 0, child);
+    }
+
     public removeChild(child: view.View) {
         this._removeView(child);
 
@@ -98,4 +107,4 @@ export class Layout extends view.CustomLayoutView implements definition.Layout,
             (<UIView>nativeView).clipsToBounds = value;
         }
     }
-} 
+}