Fix order property is not respected if set more than once

tests/app/ui/layouts/flexbox-layout-tests.ts

@@ -184,8 +184,6 @@ const noop = () => {
     // no operation
 };
 
-// TODO: Order tests!
-
 function test<U extends { root: View }>(ui: () => U, setup: (ui: U) => void, test: (ui: U) => void): () => void {
     return () => {
         let i = ui();
@@ -1607,6 +1605,72 @@ export const testFlexBasisPercent_nowrap_flexDirection_column = test(
     }
 );
 
+let activity_order_test= () => getViews(
+    `<FlexboxLayout id="flexbox" width="360" height="300" backgroundColor="gray">
+        <Label id="text1" order="2" width="160" height="120" text="1" backgroundColor="red" />
+        <Label id="text2" order="3" width="160" height="120" text="2" backgroundColor="green" />
+        <Label id="text3" order="1" width="160" height="120" text="3" backgroundColor="blue" />
+    </FlexboxLayout>`
+);
+
+export const testOrder = test(
+    activity_order_test,
+    noop,
+    ({root, flexbox, text1, text2, text3}) => {
+        equal(FlexboxLayout.getOrder(text1), 2);
+        equal(FlexboxLayout.getOrder(text2), 3);
+        equal(FlexboxLayout.getOrder(text3), 1);
+    }
+);
+
+let activity_order_set_runtime_test= () => getViews(
+    `<FlexboxLayout id="flexbox" width="360" height="300" backgroundColor="gray">
+        <Label id="text1" width="160" height="120" text="1" backgroundColor="red" />
+        <Label id="text2" width="160" height="120" text="2" backgroundColor="green" />
+        <Label id="text3" width="160" height="120" text="3" backgroundColor="blue" />
+    </FlexboxLayout>`
+);
+
+export const testOrder_set_runtime = test(
+    activity_order_set_runtime_test,
+    ({flexbox, text1, text2, text3}) => {
+       FlexboxLayout.setOrder(text1, 3);
+       FlexboxLayout.setOrder(text2, 1);
+       FlexboxLayout.setOrder(text3, 2);
+    },
+    ({root, flexbox, text1, text2, text3}) => {
+        equal(FlexboxLayout.getOrder(text1), 3);
+        equal(FlexboxLayout.getOrder(text2), 1);
+        equal(FlexboxLayout.getOrder(text3), 2);
+    }
+);
+
+export const testOrder_changed_runtime = test(
+    activity_order_set_runtime_test,
+    ({flexbox, text1, text2, text3}) => {
+       FlexboxLayout.setOrder(text1, 3);
+       FlexboxLayout.setOrder(text2, 1);
+       FlexboxLayout.setOrder(text3, 2);
+
+        helper.buildUIAndRunTest(flexbox, () => {
+            waitUntilTestElementLayoutIsValid(flexbox);
+            FlexboxLayout.setOrder(text1, 1);
+            FlexboxLayout.setOrder(text2, 2);
+            FlexboxLayout.setOrder(text3, 3);
+        });
+    },
+    ({root, flexbox, text1, text2, text3}) => {
+        equal(FlexboxLayout.getOrder(text1), 1);
+        equal(FlexboxLayout.getOrder(text2), 2);
+        equal(FlexboxLayout.getOrder(text3), 3);
+        
+        // verify views are visually displayed at the right position, not only that their order property is correct.
+        equal(text1, flexbox.getChildAt(0));
+        equal(text2, flexbox.getChildAt(1));
+        equal(text3, flexbox.getChildAt(2));
+    }
+);
+
 let activity_minwidth_test = () => getViews(
         `<FlexboxLayout id="flexbox" width="400" height="400" backgroundColor="gray">
             <Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minWidth="100" backgroundColor="red" />

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts

@@ -244,6 +244,8 @@ export abstract class FlexboxLayoutBase extends LayoutBase {
     abstract _setNativeJustifyContent(justifyContent: JustifyContent);
     abstract _setNativeAlignItems(alignItems: AlignItems);
     abstract _setNativeAlignContent(alignContent: AlignContent);
+
+    abstract _invalidateOrdersCache();
 }
 
 const flexboxAffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts

@@ -23,6 +23,9 @@ function setLayoutParamsProperty(view: View, setter: (lp: org.nativescript.widge
 
 export function _onNativeOrderPropertyChanged(view: View, newValue: number): void {
     setLayoutParamsProperty(view, lp => lp.order = newValue);
+    if (view.parent && view.parent instanceof FlexboxLayout && view.parent.android) {
+        view.parent.android.invalidateOrdersCache();
+    }
 }
 
 export function _onNativeFlexGrowPropertyChanged(view: View, newValue: number): void {
@@ -106,6 +109,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         this._layout = new org.nativescript.widgets.FlexboxLayout(this._context);
     }
 
+    _invalidateOrdersCache() {
+        this._nativeView.invalidateOrdersCache();
+    }
+
     _setNativeFlexDirection(flexDirection: FlexDirection) {
         let value = flexDirectionMap[flexDirection];
         this.android.setFlexDirection(value);

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts

@@ -11,9 +11,9 @@ import {
 
 export * from "./flexbox-layout-common";
 
-import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
+import { CommonLayoutParams, nativeLayoutParamsProperty } from "ui/styling/style";
-import {LayoutBase} from "ui/layouts/layout-base";
+import { LayoutBase } from "ui/layouts/layout-base";
-import {View} from "ui/core/view";
+import { View } from "ui/core/view";
 import * as utils from "utils/utils";
 import * as enums from "ui/enums";
 
@@ -25,16 +25,31 @@ import MEASURED_SIZE_MASK = utils.layout.MEASURED_SIZE_MASK;
 import MEASURED_STATE_TOO_SMALL = utils.layout.MEASURED_STATE_TOO_SMALL;
 
 function childHandler(view) {
-    if (!(view instanceof View)) {
+    validateView(view);
-        throw new Error("Element is not View or its descendant.");
+
-    }
     let flexbox = view.parent;
     if (flexbox instanceof FlexboxLayoutBase) {
         flexbox.requestLayout();
     }
 }
 
-export const _onNativeOrderPropertyChanged = childHandler;
+function orderPropertyChangedHandler(view) {
+    validateView(view);
+
+    let flexbox = view.parent;
+    if (flexbox instanceof FlexboxLayoutBase) {
+        flexbox._invalidateOrdersCache();
+        flexbox.requestLayout();
+    }
+}
+
+function validateView(view: View) {
+    if (!(view instanceof View)) {
+        throw new Error("Element is not View or its descendant.");
+    }
+}
+
+export const _onNativeOrderPropertyChanged = orderPropertyChangedHandler;
 export const _onNativeFlexGrowPropertyChanged = childHandler;
 export const _onNativeFlexShrinkPropertyChanged = childHandler;
 export const _onNativeAlignSelfPropertyChanged = childHandler;
@@ -119,6 +134,12 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         // lint happy no-op
     }
 
+    _invalidateOrdersCache() {
+        if (this._orderCache) { 
+            this._orderCache.length = 0;
+        }
+    }
+
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
         LayoutBase.adjustChildrenLayoutParams(this, widthMeasureSpec, heightMeasureSpec);
 
@@ -131,7 +152,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             this._childrenFrozen = new Array(this.getChildrenCount());
         }
 
-        switch(this.flexDirection) {
+        switch (this.flexDirection) {
             case FlexDirection.ROW:
             case FlexDirection.ROW_REVERSE:
                 this._measureHorizontal(widthMeasureSpec, heightMeasureSpec);
@@ -342,7 +363,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         flexLine._mainSize = paddingTop + paddingBottom;
 
         let indexInFlexLine = 0;
-        for(let i = 0; i < childCount; i++) {
+        for (let i = 0; i < childCount; i++) {
             let child = this._getReorderedChildAt(i);
             if (child === null) {
                 this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
@@ -454,7 +475,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let mainSize: number;
         let paddingAlongMainAxis: number;
 
-        switch(flexDirection) {
+        switch (flexDirection) {
             case FlexDirection.ROW:
             case FlexDirection.ROW_REVERSE:
                 let widthMode = getMeasureSpecMode(widthMeasureSpec);
@@ -751,7 +772,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         if (alignItems === AlignItems.STRETCH) {
             let viewIndex = 0;
             this._flexLines.forEach(flexLine => {
-                for (let i = 0; i < flexLine.itemCount; i++, viewIndex++) {
+                for (let i = 0; i < flexLine.itemCount; i++ , viewIndex++) {
                     let view = this._getReorderedChildAt(viewIndex);
                     let alignSelf = FlexboxLayout.getAlignSelf(view);
                     if (alignSelf !== AlignSelf.AUTO && alignSelf !== AlignSelf.STRETCH) {

tns-platform-declarations/android/org.nativescript.widgets.d.ts

@@ -268,6 +268,8 @@
                 public getAlignContent(): number;
                 public setAlignContent(value: number);
 
+                public invalidateOrdersCache(): void;
+
                 public static FLEX_DIRECTION_ROW: number;
                 public static FLEX_DIRECTION_ROW_REVERSE: number;
                 public static FLEX_DIRECTION_COLUMN: number;