javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 04:41:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4239 from NativeScript/getDefault-for-animatiable-props

Browse Source 
Support getDefault for CssAnimationProperty
This commit is contained in:
Alexander Vakrilov
2017-05-25 10:42:01 +03:00
committed by GitHub
parent 885ab37eec e7d9fe5b24
commit 35f0f73331
2 changed files with 99 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
tests/app/ui/view/view-tests-common.ts
View File

@ -1,5 +1,5 @@
import * as TKUnit from "../../TKUnit";
import { View, eachDescendant, getViewById, InheritedProperty, CssProperty, Property, Style } from "tns-core-modules/ui/core/view";
import { View, eachDescendant, getViewById, InheritedProperty, CssProperty, CssAnimationProperty, Property, Style } from "tns-core-modules/ui/core/view";
import { topmost } from "tns-core-modules/ui/frame";
import { Page } from "tns-core-modules/ui/page";
import { Button } from "tns-core-modules/ui/button";
@ -253,6 +253,7 @@ export function test_InheritableStylePropertiesWhenUsedWithExtendedClass_AreInhe
// TestView definition START
const customCssProperty = new CssProperty<Style, string>({ name: "customCssProperty", cssName: "custom-css-property" });
const customCssAnimationProperty = new CssAnimationProperty<Style, string>({ name: "customCssAnimationProperty", cssName: "custom-css-animation-property" });
const customViewProperty = new Property<TestView, string>({ name: "custom" });
class TestView extends Layout {
@ -260,11 +261,17 @@ class TestView extends Layout {
public booleanInheritanceTest: boolean;
public dummy: number;
public viewPropGetDefaultCounter: number = 0;
public viewPropCounter: number = 0;
public viewPropNativeValue: string;
public cssPropGetDefaultCounter: number = 0;
public cssPropCounter: number = 0;
public cssPropNativeValue: string;
public viewPropCounter: number = 0;
public viewPropNativeValue: string;
public cssAnimPropGetDefaultCounter: number = 0;
public cssAnimPropCounter: number = 0;
public cssAnimPropNativeValue: string;
public custom: string;
get customCssProperty(): string {
@ -274,6 +281,13 @@ class TestView extends Layout {
this.style["customCssProperty"] = value;
}
get customCssAnimationProperty(): string {
return this.style["customCssAnimationProperty"];
}
set customCssAnimationProperty(value: string) {
this.style["customCssAnimationProperty"] = value;
}
private _nativeView;
constructor(public name: string) {
super();
@ -298,7 +312,17 @@ class TestView extends Layout {
this.setMeasuredDimension(100, 100);
}
[customViewProperty.getDefault](): string {
this.viewPropGetDefaultCounter++;
return "customViewPropertyDefaultValue";
}
[customViewProperty.setNative](value: string) {
this.viewPropCounter++;
this.viewPropNativeValue = value;
}
[customCssProperty.getDefault](): string {
this.cssPropGetDefaultCounter++;
return "customCssPropertyDefaultValue";
}
[customCssProperty.setNative](value: string) {
@ -306,16 +330,18 @@ class TestView extends Layout {
this.cssPropNativeValue = value;
}
[customViewProperty.getDefault](): string {
return "customViewPropertyDefaultValue";
[customCssAnimationProperty.getDefault](): string {
this.cssAnimPropGetDefaultCounter++;
return "customCssAnimationPropertyDefaultValue";
}
[customViewProperty.setNative](value: string) {
this.viewPropCounter++;
this.viewPropNativeValue = value;
[customCssAnimationProperty.setNative](value: string) {
this.cssAnimPropCounter++;
this.cssAnimPropNativeValue = value;
}
}
customCssProperty.register(Style);
customCssAnimationProperty.register(Style);
customViewProperty.register(TestView);
const inheritanceTestDefaultValue = 42;
@ -337,20 +363,61 @@ export function test_NativeSetter_not_called_when_property_is_not_set() {
helper.buildUIAndRunTest(testView, () => {
TKUnit.assertEqual(testView.viewPropCounter, 0, "Native setter should not be called if value is not set.");
TKUnit.assertEqual(testView.cssPropCounter, 0, "Native setter should not be called if value is not set.");
TKUnit.assertEqual(testView.cssAnimPropCounter, 0, "Native setter should not be called if value is not set.");
});
};
export function test_GetDefault_not_called_when_property_is_not_set() {
const testView = new TestView("view");
helper.buildUIAndRunTest(testView, () => {
TKUnit.assertEqual(testView.viewPropGetDefaultCounter, 0, "Get default should not be called if value is not set.");
TKUnit.assertEqual(testView.cssPropGetDefaultCounter, 0, "Get default should not be called if value is not set.");
TKUnit.assertEqual(testView.cssAnimPropGetDefaultCounter, 0, "Get default should not be called if value is not set.");
});
};
export function test_NativeSetter_called_only_once_with_localValue() {
const testView = new TestView("view");
testView.customCssProperty = "testCssValue";
testView.customCssAnimationProperty = "testCssAnimValue";
testView.custom = "testViewValue";
helper.buildUIAndRunTest(testView, () => {
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.cssPropGetDefaultCounter, 1, "GetDefault count called once");
TKUnit.assertEqual(testView.cssAnimPropGetDefaultCounter, 1, "GetDefault count called once");
TKUnit.assertEqual(testView.viewPropGetDefaultCounter, 1, "GetDefault count called once");
});
};
export function test_NativeSetter_called_only_once_with_localValue_after_added_to_visual_tree() {
const testView = new TestView("view");
helper.buildUIAndRunTest(testView, () => {
testView.customCssProperty = "testCssValue";
testView.customCssAnimationProperty = "testCssAnimValue";
testView.custom = "testViewValue";
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.cssPropGetDefaultCounter, 1, "GetDefault count called once");
TKUnit.assertEqual(testView.cssAnimPropGetDefaultCounter, 1, "GetDefault count called once");
TKUnit.assertEqual(testView.viewPropGetDefaultCounter, 1, "GetDefault count called once");
});
};
@ -361,13 +428,16 @@ export function test_NativeSetter_called_only_once_with_cssValue() {
#myID {
custom: testViewValue;
custom-css-property: testCssValue;
custom-css-animation-property: testCssAnimValue;
}`;
helper.buildUIAndRunTest(testView, () => {
TKUnit.assertEqual(testView.cssPropCounter, 1, "CssNativeSetter count called once");
TKUnit.assertEqual(testView.viewPropCounter, 1, "ViewNativeSetter count called once");
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "CssAnimationNativeSetter count called once");
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
}, pageCSS);
};
@ -376,19 +446,23 @@ export function test_NativeSetter_called_only_once_with_cssValue_and_localValue(
const testView = new TestView("view");
testView.id = "myID";
testView.customCssProperty = "testCssValueLocal";
testView.customCssAnimationProperty = "testCssAnimationValueLocal";
testView.custom = "testViewValueLocal";
const pageCSS = `
#myID {
custom-css-property: testCssValueCSS;
custom: testViewValueCSS;
custom-css-animation-property: testCssAnimValueCSS;
}`;
helper.buildUIAndRunTest(testView, () => {
TKUnit.assertEqual(testView.cssPropCounter, 1, "CssNativeSetter count called once");
TKUnit.assertEqual(testView.viewPropCounter, 1, "ViewNativeSetter count called once");
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "CssAnimNativeSetter count called once");
// CSS property set form css has CSS value source, which is weaker than local value
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValueLocal", "Native value");
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimationValueLocal", "Native value");
// View property set from CSS sets local value
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValueCSS", "Native value");
}, pageCSS);
@ -401,11 +475,16 @@ export function test_NativeSetter_called_only_once_with_multiple_sets() {
testView.customCssProperty = "testCssValue1";
testView.customCssProperty = "testCssValue2";
testView.customCssAnimationProperty = "testCssAnimValue1";
testView.customCssAnimationProperty = "testCssAnimValue2";
helper.buildUIAndRunTest(testView, () => {
TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once");
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue2", "Native value");
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue2", "Native value");
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue2", "Native value");
});
};

14
tns-core-modules/ui/core/properties/properties.ts
View File

@ -636,8 +636,8 @@ export class CssAnimationProperty<T extends Style, U> {
this.computedValueKey = computedValue;
const computedSource = Symbol("computed-source:" + propertyName);
// Note the getDefault is unused, CssAnimationProperties are expected to have default JavaScript value.
this.getDefault = Symbol(propertyName + ":getDefault");
const getDefault = this.getDefault;
const setNative = this.setNative = Symbol(propertyName + ":setNative");
const eventName = propertyName + "Change";
@ -659,7 +659,7 @@ export class CssAnimationProperty<T extends Style, U> {
this[computedValue] = this[cssValue];
} else {
this[computedSource] = ValueSource.Default;
this[computedValue] = defaultValue;
this[computedValue] = defaultValueKey in this ? this[defaultValueKey] : defaultValue;
}
}
} else {
@ -677,8 +677,13 @@ export class CssAnimationProperty<T extends Style, U> {
if (valueChanged) {
valueChanged(this, prev, next);
}
if (this.view.nativeView && this.view[setNative]) {
this.view[setNative](next);
const view = this.view;
if (view.nativeView && view[setNative]) {
if (!(defaultValueKey in this)) {
this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
}
view[setNative](next);
}
if (this.hasListeners(eventName)) {
this.notify<PropertyChangeData>({ eventName, object: this, propertyName, value, oldValue: prev });
@ -697,7 +702,6 @@ export class CssAnimationProperty<T extends Style, U> {
cssSymbolPropertyMap[computedValue] = this;
this.register = (cls: { prototype: T }) => {
cls.prototype[defaultValueKey] = options.defaultValue;
cls.prototype[computedValue] = options.defaultValue;
cls.prototype[computedSource] = ValueSource.Default;