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

CssAnimationProperties, when unset, were not setting the default native value. (#4595)

Browse Source
This commit is contained in:
Panayot Cankov
2017-07-26 19:16:26 +03:00
committed by SvetoslavTsenov
parent d978424f35
commit 2f6ca2524b
6 changed files with 66 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/ui-tests-app/issues/issue-4450.xml Normal file
View File

@ -0,0 +1,8 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout id="root">
<SearchBar />
<Progress value="50" maxValue="100" margin="22" />
<Button text="set" tap="set" margin="2" />
<Button text="clear" tap="clear" margin="2" />
</StackLayout>
</Page>

3
apps/app/ui-tests-app/issues/issue-4450.css Normal file
View File

@ -0,0 +1,3 @@
.styled > StackLayout > * {
background-color: red;
}

7
apps/app/ui-tests-app/issues/issue-4450.ts Normal file
View File

@ -0,0 +1,7 @@
export function set(args) {
args.object.page.className = "styled";
}
export function clear(args) {
args.object.page.className = "";
}

8
apps/app/ui-tests-app/issues/issue-4450.xml Normal file
View File

@ -0,0 +1,8 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout id="root">
<SearchBar />
<Progress value="50" maxValue="100" margin="22" />
<Button text="set" tap="set" margin="2" />
<Button text="clear" tap="clear" margin="2" />
</StackLayout>
</Page>

1
apps/app/ui-tests-app/issues/main-page.ts
View File

@ -24,6 +24,7 @@ export function loadExamples() {
examples.set("1657-ios", "issues/issue-1657-ios"); examples.set("1657-ios", "issues/issue-1657-ios");
examples.set("tabview-with-scrollview_4022","issues/tabview-with-scrollview_4022"); examples.set("tabview-with-scrollview_4022","issues/tabview-with-scrollview_4022");
examples.set("3354-ios", "issues/issue-3354"); examples.set("3354-ios", "issues/issue-3354");
examples.set("4450", "issues/issue-4450");
return examples; return examples;
} }

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

@ -658,6 +658,7 @@ export class CssAnimationProperty<T extends Style, U> {
public readonly keyframe: string; public readonly keyframe: string;
public readonly defaultValueKey: symbol; public readonly defaultValueKey: symbol;
public readonly key: symbol; public readonly key: symbol;
private readonly source: symbol;
public readonly defaultValue: U; public readonly defaultValue: U;
@ -699,6 +700,7 @@ export class CssAnimationProperty<T extends Style, U> {
const computedValue = Symbol("computed-value:" + propertyName); const computedValue = Symbol("computed-value:" + propertyName);
this.key = computedValue; this.key = computedValue;
const computedSource = Symbol("computed-source:" + propertyName); const computedSource = Symbol("computed-source:" + propertyName);
this.source = computedSource;
this.getDefault = Symbol(propertyName + ":getDefault"); this.getDefault = Symbol(propertyName + ":getDefault");
const getDefault = this.getDefault; const getDefault = this.getDefault;
@ -712,7 +714,11 @@ export class CssAnimationProperty<T extends Style, U> {
enumerable, configurable, enumerable, configurable,
get: getsComputed ? function (this: T) { return this[computedValue]; } : function (this: T) { return this[symbol]; }, get: getsComputed ? function (this: T) { return this[computedValue]; } : function (this: T) { return this[symbol]; },
set(this: T, boxedValue: U) { set(this: T, boxedValue: U) {
let oldValue = this[computedValue];
const oldValue = this[computedValue];
const oldSource = this[computedSource];
const wasSet = oldSource !== ValueSource.Default;
if (boxedValue === unsetValue) { if (boxedValue === unsetValue) {
this[symbol] = unsetValue; this[symbol] = unsetValue;
if (this[computedSource] === propertySource) { if (this[computedSource] === propertySource) {
@ -724,8 +730,8 @@ export class CssAnimationProperty<T extends Style, U> {
this[computedSource] = ValueSource.Css; this[computedSource] = ValueSource.Css;
this[computedValue] = this[cssValue]; this[computedValue] = this[cssValue];
} else { } else {
this[computedSource] = ValueSource.Default; delete this[computedSource];
this[computedValue] = defaultValueKey in this ? this[defaultValueKey] : defaultValue; delete this[computedValue];
} }
} }
} else { } else {
@ -738,29 +744,41 @@ export class CssAnimationProperty<T extends Style, U> {
this[computedValue] = boxedValue; this[computedValue] = boxedValue;
} }
} }
let value = this[computedValue];
if (oldValue !== value && (!equalityComparer || !equalityComparer(oldValue, value))) {
if (valueChanged) {
valueChanged(this, oldValue, value);
}
const view = this.view; const value = this[computedValue];
if (view[setNative]) { const source = this[computedSource];
if (view._suspendNativeUpdatesCount) { const isSet = source !== ValueSource.Default;
if (view._suspendedUpdates) {
view._suspendedUpdates[propertyName] = property; const computedValueChanged = oldValue !== value && (!equalityComparer || !equalityComparer(oldValue, value));
}
} else { if (computedValueChanged && valueChanged) {
if (!(defaultValueKey in this)) { valueChanged(this, oldValue, value);
}
const view = this.view;
if (view[setNative] && (computedValueChanged || isSet !== wasSet)) {
if (view._suspendNativeUpdatesCount) {
if (view._suspendedUpdates) {
view._suspendedUpdates[propertyName] = property;
}
} else {
if (isSet) {
if (!wasSet && !(defaultValueKey in this)) {
this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue; this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
} }
view[setNative](value); view[setNative](value);
} else if (wasSet) {
if (defaultValueKey in this) {
view[setNative](this[defaultValueKey]);
} else {
view[setNative](defaultValue);
}
} }
} }
if (this.hasListeners(eventName)) { }
this.notify<PropertyChangeData>({ object: this, eventName, propertyName, value, oldValue });
} if (computedValueChanged && this.hasListeners(eventName)) {
this.notify<PropertyChangeData>({ object: this, eventName, propertyName, value, oldValue });
} }
} }
} }
@ -807,7 +825,7 @@ export class CssAnimationProperty<T extends Style, U> {
} }
public isSet(instance: T): boolean { public isSet(instance: T): boolean {
return instance[this.key] !== unsetValue; return instance[this.source] !== ValueSource.Default;
} }
} }
CssAnimationProperty.prototype.isStyleProperty = true; CssAnimationProperty.prototype.isStyleProperty = true;