Skip to content

Commit b4fd6e6

Browse files
zh-mzh-m
committed
Fix order property is not respected if set more than once
1 parent 69f4c8b commit b4fd6e6

File tree

5 files changed

+154
-58
lines changed

5 files changed

+154
-58
lines changed

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

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,6 @@ const noop = () => {
184184
// no operation
185185
};
186186

187-
// TODO: Order tests!
188-
189187
function test<U extends { root: View }>(ui: () => U, setup: (ui: U) => void, test: (ui: U) => void): () => void {
190188
return () => {
191189
let i = ui();
@@ -1607,6 +1605,72 @@ export const testFlexBasisPercent_nowrap_flexDirection_column = test(
16071605
}
16081606
);
16091607

1608+
let activity_order_test= () => getViews(
1609+
`<FlexboxLayout id="flexbox" width="360" height="300" backgroundColor="gray">
1610+
<Label id="text1" order="2" width="160" height="120" text="1" backgroundColor="red" />
1611+
<Label id="text2" order="3" width="160" height="120" text="2" backgroundColor="green" />
1612+
<Label id="text3" order="1" width="160" height="120" text="3" backgroundColor="blue" />
1613+
</FlexboxLayout>`
1614+
);
1615+
1616+
export const testOrder = test(
1617+
activity_order_test,
1618+
noop,
1619+
({root, flexbox, text1, text2, text3}) => {
1620+
equal(FlexboxLayout.getOrder(text1), 2);
1621+
equal(FlexboxLayout.getOrder(text2), 3);
1622+
equal(FlexboxLayout.getOrder(text3), 1);
1623+
}
1624+
);
1625+
1626+
let activity_order_set_runtime_test= () => getViews(
1627+
`<FlexboxLayout id="flexbox" width="360" height="300" backgroundColor="gray">
1628+
<Label id="text1" width="160" height="120" text="1" backgroundColor="red" />
1629+
<Label id="text2" width="160" height="120" text="2" backgroundColor="green" />
1630+
<Label id="text3" width="160" height="120" text="3" backgroundColor="blue" />
1631+
</FlexboxLayout>`
1632+
);
1633+
1634+
export const testOrder_set_runtime = test(
1635+
activity_order_set_runtime_test,
1636+
({flexbox, text1, text2, text3}) => {
1637+
FlexboxLayout.setOrder(text1, 3);
1638+
FlexboxLayout.setOrder(text2, 1);
1639+
FlexboxLayout.setOrder(text3, 2);
1640+
},
1641+
({root, flexbox, text1, text2, text3}) => {
1642+
equal(FlexboxLayout.getOrder(text1), 3);
1643+
equal(FlexboxLayout.getOrder(text2), 1);
1644+
equal(FlexboxLayout.getOrder(text3), 2);
1645+
}
1646+
);
1647+
1648+
export const testOrder_changed_runtime = test(
1649+
activity_order_set_runtime_test,
1650+
({flexbox, text1, text2, text3}) => {
1651+
FlexboxLayout.setOrder(text1, 3);
1652+
FlexboxLayout.setOrder(text2, 1);
1653+
FlexboxLayout.setOrder(text3, 2);
1654+
1655+
helper.buildUIAndRunTest(flexbox, () => {
1656+
waitUntilTestElementLayoutIsValid(flexbox);
1657+
FlexboxLayout.setOrder(text1, 1);
1658+
FlexboxLayout.setOrder(text2, 2);
1659+
FlexboxLayout.setOrder(text3, 3);
1660+
});
1661+
},
1662+
({root, flexbox, text1, text2, text3}) => {
1663+
equal(FlexboxLayout.getOrder(text1), 1);
1664+
equal(FlexboxLayout.getOrder(text2), 2);
1665+
equal(FlexboxLayout.getOrder(text3), 3);
1666+
1667+
// verify views are visually displayed at the right position, not only that their order property is correct.
1668+
equal(text1, flexbox.getChildAt(0));
1669+
equal(text2, flexbox.getChildAt(1));
1670+
equal(text3, flexbox.getChildAt(2));
1671+
}
1672+
);
1673+
16101674
let activity_minwidth_test = () => getViews(
16111675
`<FlexboxLayout id="flexbox" width="400" height="400" backgroundColor="gray">
16121676
<Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minWidth="100" backgroundColor="red" />

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,8 @@ export abstract class FlexboxLayoutBase extends LayoutBase {
244244
abstract _setNativeJustifyContent(justifyContent: JustifyContent);
245245
abstract _setNativeAlignItems(alignItems: AlignItems);
246246
abstract _setNativeAlignContent(alignContent: AlignContent);
247+
248+
abstract _invalidateOrdersCache();
247249
}
248250

249251
const flexboxAffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ function setLayoutParamsProperty(view: View, setter: (lp: org.nativescript.widge
2323

2424
export function _onNativeOrderPropertyChanged(view: View, newValue: number): void {
2525
setLayoutParamsProperty(view, lp => lp.order = newValue);
26+
if (view.parent && view.parent instanceof FlexboxLayout && view.parent.android) {
27+
view.parent.android.invalidateOrdersCache();
28+
}
2629
}
2730

2831
export function _onNativeFlexGrowPropertyChanged(view: View, newValue: number): void {
@@ -106,6 +109,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
106109
this._layout = new org.nativescript.widgets.FlexboxLayout(this._context);
107110
}
108111

112+
_invalidateOrdersCache() {
113+
this._nativeView.invalidateOrdersCache();
114+
}
115+
109116
_setNativeFlexDirection(flexDirection: FlexDirection) {
110117
let value = flexDirectionMap[flexDirection];
111118
this.android.setFlexDirection(value);

0 commit comments

Comments
 (0)