Skip to content

Commit e7d9fe5

Browse files
author
vakrilov
committed
Support getDefault for CssAnimationProperty
1 parent 6ba2a1e commit e7d9fe5

2 files changed

Lines changed: 99 additions & 16 deletions

File tree

‎tests/app/ui/view/view-tests-common.ts‎

Lines changed: 90 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as TKUnit from "../../TKUnit";
2-
import { View, eachDescendant, getViewById, InheritedProperty, CssProperty, Property, Style } from "tns-core-modules/ui/core/view";
2+
import { View, eachDescendant, getViewById, InheritedProperty, CssProperty, CssAnimationProperty, Property, Style } from "tns-core-modules/ui/core/view";
33
import { topmost } from "tns-core-modules/ui/frame";
44
import { Page } from "tns-core-modules/ui/page";
55
import { Button } from "tns-core-modules/ui/button";
@@ -253,18 +253,25 @@ export function test_InheritableStylePropertiesWhenUsedWithExtendedClass_AreInhe
253253

254254
// TestView definition START
255255
const customCssProperty = new CssProperty<Style, string>({ name: "customCssProperty", cssName: "custom-css-property" });
256+
const customCssAnimationProperty = new CssAnimationProperty<Style, string>({ name: "customCssAnimationProperty", cssName: "custom-css-animation-property" });
256257
const customViewProperty = new Property<TestView, string>({ name: "custom" });
257258

258259
class TestView extends Layout {
259260
public inheritanceTest: number;
260261
public booleanInheritanceTest: boolean;
261262
public dummy: number;
262263

264+
public viewPropGetDefaultCounter: number = 0;
265+
public viewPropCounter: number = 0;
266+
public viewPropNativeValue: string;
267+
268+
public cssPropGetDefaultCounter: number = 0;
263269
public cssPropCounter: number = 0;
264270
public cssPropNativeValue: string;
265271

266-
public viewPropCounter: number = 0;
267-
public viewPropNativeValue: string;
272+
public cssAnimPropGetDefaultCounter: number = 0;
273+
public cssAnimPropCounter: number = 0;
274+
public cssAnimPropNativeValue: string;
268275

269276
public custom: string;
270277
get customCssProperty(): string {
@@ -274,6 +281,13 @@ class TestView extends Layout {
274281
this.style["customCssProperty"] = value;
275282
}
276283

284+
get customCssAnimationProperty(): string {
285+
return this.style["customCssAnimationProperty"];
286+
}
287+
set customCssAnimationProperty(value: string) {
288+
this.style["customCssAnimationProperty"] = value;
289+
}
290+
277291
private _nativeView;
278292
constructor(public name: string) {
279293
super();
@@ -298,24 +312,36 @@ class TestView extends Layout {
298312
this.setMeasuredDimension(100, 100);
299313
}
300314

315+
[customViewProperty.getDefault](): string {
316+
this.viewPropGetDefaultCounter++;
317+
return "customViewPropertyDefaultValue";
318+
}
319+
[customViewProperty.setNative](value: string) {
320+
this.viewPropCounter++;
321+
this.viewPropNativeValue = value;
322+
}
323+
301324
[customCssProperty.getDefault](): string {
325+
this.cssPropGetDefaultCounter++;
302326
return "customCssPropertyDefaultValue";
303327
}
304328
[customCssProperty.setNative](value: string) {
305329
this.cssPropCounter++;
306330
this.cssPropNativeValue = value;
307331
}
308332

309-
[customViewProperty.getDefault](): string {
310-
return "customViewPropertyDefaultValue";
333+
[customCssAnimationProperty.getDefault](): string {
334+
this.cssAnimPropGetDefaultCounter++;
335+
return "customCssAnimationPropertyDefaultValue";
311336
}
312-
[customViewProperty.setNative](value: string) {
313-
this.viewPropCounter++;
314-
this.viewPropNativeValue = value;
337+
[customCssAnimationProperty.setNative](value: string) {
338+
this.cssAnimPropCounter++;
339+
this.cssAnimPropNativeValue = value;
315340
}
316341
}
317342

318343
customCssProperty.register(Style);
344+
customCssAnimationProperty.register(Style);
319345
customViewProperty.register(TestView);
320346

321347
const inheritanceTestDefaultValue = 42;
@@ -337,20 +363,61 @@ export function test_NativeSetter_not_called_when_property_is_not_set() {
337363
helper.buildUIAndRunTest(testView, () => {
338364
TKUnit.assertEqual(testView.viewPropCounter, 0, "Native setter should not be called if value is not set.");
339365
TKUnit.assertEqual(testView.cssPropCounter, 0, "Native setter should not be called if value is not set.");
366+
TKUnit.assertEqual(testView.cssAnimPropCounter, 0, "Native setter should not be called if value is not set.");
367+
});
368+
};
369+
370+
export function test_GetDefault_not_called_when_property_is_not_set() {
371+
const testView = new TestView("view");
372+
373+
helper.buildUIAndRunTest(testView, () => {
374+
TKUnit.assertEqual(testView.viewPropGetDefaultCounter, 0, "Get default should not be called if value is not set.");
375+
TKUnit.assertEqual(testView.cssPropGetDefaultCounter, 0, "Get default should not be called if value is not set.");
376+
TKUnit.assertEqual(testView.cssAnimPropGetDefaultCounter, 0, "Get default should not be called if value is not set.");
340377
});
341378
};
342379

343380
export function test_NativeSetter_called_only_once_with_localValue() {
344381
const testView = new TestView("view");
345382
testView.customCssProperty = "testCssValue";
383+
testView.customCssAnimationProperty = "testCssAnimValue";
346384
testView.custom = "testViewValue";
347385

348386
helper.buildUIAndRunTest(testView, () => {
349387
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
388+
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
350389
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
351390

352391
TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once");
392+
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "NativeSetter count called once");
353393
TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once");
394+
395+
TKUnit.assertEqual(testView.cssPropGetDefaultCounter, 1, "GetDefault count called once");
396+
TKUnit.assertEqual(testView.cssAnimPropGetDefaultCounter, 1, "GetDefault count called once");
397+
TKUnit.assertEqual(testView.viewPropGetDefaultCounter, 1, "GetDefault count called once");
398+
});
399+
};
400+
401+
export function test_NativeSetter_called_only_once_with_localValue_after_added_to_visual_tree() {
402+
const testView = new TestView("view");
403+
404+
helper.buildUIAndRunTest(testView, () => {
405+
406+
testView.customCssProperty = "testCssValue";
407+
testView.customCssAnimationProperty = "testCssAnimValue";
408+
testView.custom = "testViewValue";
409+
410+
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
411+
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
412+
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
413+
414+
TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once");
415+
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "NativeSetter count called once");
416+
TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once");
417+
418+
TKUnit.assertEqual(testView.cssPropGetDefaultCounter, 1, "GetDefault count called once");
419+
TKUnit.assertEqual(testView.cssAnimPropGetDefaultCounter, 1, "GetDefault count called once");
420+
TKUnit.assertEqual(testView.viewPropGetDefaultCounter, 1, "GetDefault count called once");
354421
});
355422
};
356423

@@ -361,13 +428,16 @@ export function test_NativeSetter_called_only_once_with_cssValue() {
361428
#myID {
362429
custom: testViewValue;
363430
custom-css-property: testCssValue;
431+
custom-css-animation-property: testCssAnimValue;
364432
}`;
365433

366434
helper.buildUIAndRunTest(testView, () => {
367435
TKUnit.assertEqual(testView.cssPropCounter, 1, "CssNativeSetter count called once");
368436
TKUnit.assertEqual(testView.viewPropCounter, 1, "ViewNativeSetter count called once");
437+
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "CssAnimationNativeSetter count called once");
369438

370439
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
440+
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
371441
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
372442
}, pageCSS);
373443
};
@@ -376,19 +446,23 @@ export function test_NativeSetter_called_only_once_with_cssValue_and_localValue(
376446
const testView = new TestView("view");
377447
testView.id = "myID";
378448
testView.customCssProperty = "testCssValueLocal";
449+
testView.customCssAnimationProperty = "testCssAnimationValueLocal";
379450
testView.custom = "testViewValueLocal";
380451
const pageCSS = `
381452
#myID {
382453
custom-css-property: testCssValueCSS;
383454
custom: testViewValueCSS;
455+
custom-css-animation-property: testCssAnimValueCSS;
384456
}`;
385457

386458
helper.buildUIAndRunTest(testView, () => {
387459
TKUnit.assertEqual(testView.cssPropCounter, 1, "CssNativeSetter count called once");
388460
TKUnit.assertEqual(testView.viewPropCounter, 1, "ViewNativeSetter count called once");
461+
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "CssAnimNativeSetter count called once");
389462

390463
// CSS property set form css has CSS value source, which is weaker than local value
391464
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValueLocal", "Native value");
465+
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimationValueLocal", "Native value");
392466
// View property set from CSS sets local value
393467
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValueCSS", "Native value");
394468
}, pageCSS);
@@ -401,11 +475,16 @@ export function test_NativeSetter_called_only_once_with_multiple_sets() {
401475
testView.customCssProperty = "testCssValue1";
402476
testView.customCssProperty = "testCssValue2";
403477

478+
testView.customCssAnimationProperty = "testCssAnimValue1";
479+
testView.customCssAnimationProperty = "testCssAnimValue2";
480+
404481
helper.buildUIAndRunTest(testView, () => {
405482
TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once");
483+
TKUnit.assertEqual(testView.cssAnimPropCounter, 1, "NativeSetter count called once");
406484
TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once");
407485

408486
TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue2", "Native value");
487+
TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue2", "Native value");
409488
TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue2", "Native value");
410489
});
411490
};
@@ -921,9 +1000,9 @@ export function test_getActualSize() {
9211000
};
9221001

9231002
export function test_background_image_doesnt_throw() {
924-
var btn = new Button();
925-
btn.style.backgroundImage = 'https://www.bodybuilding.com/images/2016/june/8-benefits-to-working-out-in-the-morning-header-v2-830x467.jpg';
926-
helper.buildUIAndRunTest(btn, function (views: Array<View>) {
1003+
var btn = new Button();
1004+
btn.style.backgroundImage = 'https://www.bodybuilding.com/images/2016/june/8-benefits-to-working-out-in-the-morning-header-v2-830x467.jpg';
1005+
helper.buildUIAndRunTest(btn, function (views: Array<View>) {
9271006
TKUnit.waitUntilReady(() => btn.isLayoutValid);
9281007
});
9291008
}

‎tns-core-modules/ui/core/properties/properties.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -636,8 +636,8 @@ export class CssAnimationProperty<T extends Style, U> {
636636
this.computedValueKey = computedValue;
637637
const computedSource = Symbol("computed-source:" + propertyName);
638638

639-
// Note the getDefault is unused, CssAnimationProperties are expected to have default JavaScript value.
640639
this.getDefault = Symbol(propertyName + ":getDefault");
640+
const getDefault = this.getDefault;
641641
const setNative = this.setNative = Symbol(propertyName + ":setNative");
642642
const eventName = propertyName + "Change";
643643

@@ -659,7 +659,7 @@ export class CssAnimationProperty<T extends Style, U> {
659659
this[computedValue] = this[cssValue];
660660
} else {
661661
this[computedSource] = ValueSource.Default;
662-
this[computedValue] = defaultValue;
662+
this[computedValue] = defaultValueKey in this ? this[defaultValueKey] : defaultValue;
663663
}
664664
}
665665
} else {
@@ -677,8 +677,13 @@ export class CssAnimationProperty<T extends Style, U> {
677677
if (valueChanged) {
678678
valueChanged(this, prev, next);
679679
}
680-
if (this.view.nativeView && this.view[setNative]) {
681-
this.view[setNative](next);
680+
const view = this.view;
681+
if (view.nativeView && view[setNative]) {
682+
if (!(defaultValueKey in this)) {
683+
this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
684+
}
685+
686+
view[setNative](next);
682687
}
683688
if (this.hasListeners(eventName)) {
684689
this.notify<PropertyChangeData>({ eventName, object: this, propertyName, value, oldValue: prev });
@@ -697,7 +702,6 @@ export class CssAnimationProperty<T extends Style, U> {
697702
cssSymbolPropertyMap[computedValue] = this;
698703

699704
this.register = (cls: { prototype: T }) => {
700-
cls.prototype[defaultValueKey] = options.defaultValue;
701705
cls.prototype[computedValue] = options.defaultValue;
702706
cls.prototype[computedSource] = ValueSource.Default;
703707

0 commit comments

Comments
 (0)