refactor(action-bar): insert ActionItems at correct positions

ActionBar's insertChild method is now passed a `next` view argument. When the view to insert is an ActionItem, `next` is used to find the correct position to insert the new item.

fixes #689

Author: sis0k0

Diff for: nativescript-angular/directives/action-bar.ts

@@ -1,5 +1,10 @@
 import { Directive, Component, ElementRef, Optional, OnDestroy } from "@angular/core";
-import { ActionItem, ActionBar, NavigationButton } from "tns-core-modules/ui/action-bar";
+import {
+    ActionBar,
+    ActionItem,
+    ActionItems,
+    NavigationButton,
+} from "tns-core-modules/ui/action-bar";
 import { Page } from "tns-core-modules/ui/page";
 import { View } from "tns-core-modules/ui/core/view";
 
@@ -25,14 +30,14 @@ type NgActionBar = (ActionBar & ViewExtensions);
 
 const actionBarMeta: ViewClassMeta = {
     skipAddToDom: true,
-    insertChild: (parent: NgActionBar, child: NgView, previous: NgView) => {
+    insertChild: (parent: NgActionBar, child: NgView, next: any) => {
         if (isInvisibleNode(child)) {
             return;
         } else if (isNavigationButton(child)) {
             parent.navigationButton = child;
             child.templateParent = parent;
         } else if (isActionItem(child)) {
-            parent.actionItems.addItem(child);
+            addActionItem(parent, child, next);
             child.templateParent = parent;
         } else if (isView(child)) {
             parent.titleView = child;
@@ -56,6 +61,28 @@ const actionBarMeta: ViewClassMeta = {
     },
 };
 
+const addActionItem = (bar: NgActionBar, item: ActionItem, next: ActionItem) => {
+    if (next) {
+        insertActionItemBefore(bar, item, next);
+    } else {
+        appendActionItem(bar, item);
+    }
+};
+
+const insertActionItemBefore = (bar: NgActionBar, item: ActionItem, next: ActionItem) => {
+    const actionItems: ActionItems = bar.actionItems;
+    const actionItemsCollection: ActionItem[] = actionItems.getItems();
+
+    const indexToInsert = actionItemsCollection.indexOf(next);
+    actionItemsCollection.splice(indexToInsert, 0, item);
+
+    (<any>actionItems).setItems(actionItemsCollection);
+};
+
+const appendActionItem = (bar: NgActionBar, item: ActionItem) => {
+    bar.actionItems.addItem(item);
+};
+
 registerElement("ActionBar", () => require("ui/action-bar").ActionBar, actionBarMeta);
 registerElement("ActionItem", () => require("ui/action-bar").ActionItem);
 registerElement("NavigationButton", () => require("ui/action-bar").NavigationButton);

Diff for: nativescript-angular/element-registry.ts

@@ -72,7 +72,7 @@ const getClassName = instance => instance.constructor.name;
 
 export interface ViewClassMeta {
     skipAddToDom?: boolean;
-    insertChild?: (parent: any, child: any, previous?: any, next?: any) => void;
+    insertChild?: (parent: any, child: any, next?: any) => void;
     removeChild?: (parent: any, child: any) => void;
 }
 

Diff for: nativescript-angular/view-util.ts

@@ -67,7 +67,8 @@ export class ViewUtil {
         }
 
         if (!isDetachedElement(child)) {
-            this.addToVisualTree(parent, child, next);
+            const nextVisual = this.findNextVisual(next);
+            this.addToVisualTree(parent, child, nextVisual);
         }
     }
 
@@ -104,10 +105,10 @@ export class ViewUtil {
     }
 
     private addToVisualTree(parent: NgView, child: NgView, next: NgView): void {
-        traceLog(`ViewUtil.addToVisualTreee parent: ${parent}, view: ${child}, next: ${next}`);
+        traceLog(`ViewUtil.addToVisualTree parent: ${parent}, view: ${child}, next: ${next}`);
 
         if (parent.meta && parent.meta.insertChild) {
-            parent.meta.insertChild(parent, child);
+            parent.meta.insertChild(parent, child, next);
         } else if (isLayout(parent)) {
             this.insertToLayout(parent, child, next);
         } else if (isContentView(parent)) {
@@ -135,7 +136,7 @@ export class ViewUtil {
         }
     }
 
-    private findNextVisual(view: NgView) {
+    private findNextVisual(view: NgView): NgView {
         let next = view;
         while (next && isDetachedElement(next)) {
             next = next.nextSibling;