javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix order property is not respected if set more than once

Browse Source
This commit is contained in:
zh-m
2017-01-10 18:05:52 +02:00
parent 6e07d0e61d
commit 9f7ce6fc60
5 changed files with 155 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
tests/app/ui/layouts/flexbox-layout-tests.ts
View File

@@ -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" />

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

@@ -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;

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

@@ -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);

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

@@ -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)) {
throw new Error("Element is not View or its descendant.");
}
validateView(view);
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);

2
tns-platform-declarations/android/org.nativescript.widgets.d.ts vendored
View File

@@ -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;