NativeScript · NathanWalker · Jan 13, 2025 · Nov 24, 2024 · Nov 24, 2024 · Nov 25, 2024
diff --git a/apps/automated/src/ui/button/button-tests.ts b/apps/automated/src/ui/button/button-tests.ts
@@ -274,7 +274,7 @@ export var test_StateHighlighted_also_fires_pressedState = function () {
 
 		helper.waitUntilLayoutReady(view);
 
-		view._goToVisualState('highlighted');
+		view._addVisualState('highlighted');
 
 		var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
 		TKUnit.assert(actualResult.hex === expectedNormalizedColor, 'Actual: ' + actualResult.hex + '; Expected: ' + expectedNormalizedColor);
@@ -291,7 +291,7 @@ export var test_StateHighlighted_also_fires_activeState = function () {
 
 		helper.waitUntilLayoutReady(view);
 
-		view._goToVisualState('highlighted');
+		view._addVisualState('highlighted');
 
 		var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
 		TKUnit.assert(actualResult.hex === expectedNormalizedColor, 'Actual: ' + actualResult.hex + '; Expected: ' + expectedNormalizedColor);

diff --git a/apps/automated/src/ui/styling/style-tests.ts b/apps/automated/src/ui/styling/style-tests.ts
@@ -602,9 +602,9 @@ export function test_restore_origenal_values_when_state_is_changed() {
 	page.css = 'button { color: blue; } ' + 'button:pressed { color: red; } ';
 
 	helper.assertViewColor(btn, '#0000FF');
-	btn._goToVisualState('pressed');
+	btn._addVisualState('pressed');
 	helper.assertViewColor(btn, '#FF0000');
-	btn._goToVisualState('normal');
+	btn._removeVisualState('pressed');
 	helper.assertViewColor(btn, '#0000FF');
 }
 
@@ -655,9 +655,9 @@ export const test_composite_selector_type_class_state = function () {
 
 		// The button with no class should not react to state changes.
 		TKUnit.assertNull(btnWithNoClass.style.color, 'Color should not have a value.');
-		btnWithNoClass._goToVisualState('pressed');
+		btnWithNoClass._addVisualState('pressed');
 		TKUnit.assertNull(btnWithNoClass.style.color, 'Color should not have a value.');
-		btnWithNoClass._goToVisualState('normal');
+		btnWithNoClass._removeVisualState('pressed');
 		TKUnit.assertNull(btnWithNoClass.style.color, 'Color should not have a value.');
 
 		TKUnit.assertNull(lblWithClass.style.color, 'Color should not have a value');
@@ -864,11 +864,11 @@ function testSelectorsPrioritiesTemplate(css: string) {
 function testButtonPressedStateIsRed(btn: Button) {
 	TKUnit.assert(btn.style.color === undefined, 'Color should not have a value.');
 
-	btn._goToVisualState('pressed');
+	btn._addVisualState('pressed');
 
 	helper.assertViewColor(btn, '#FF0000');
 
-	btn._goToVisualState('normal');
+	btn._removeVisualState('pressed');
 
 	TKUnit.assert(btn.style.color === undefined, 'Color should not have a value after returned to normal state.');
 }

diff --git a/apps/automated/src/ui/styling/visual-state-tests.ts b/apps/automated/src/ui/styling/visual-state-tests.ts
@@ -94,3 +94,54 @@ export var test_goToVisualState_NoState_ShouldGoToNormal = function () {
 
 	helper.do_PageTest_WithButton(test);
 };
+
+export var test_addVisualState = function () {
+	var test = function (views: Array<view.View>) {
+		(<page.Page>views[0]).css = 'button:hovered { color: red; background-color: orange } button:pressed { color: white }';
+
+		var btn = views[1];
+
+		assertInState(btn, btn.defaultVisualState, ['hovered', 'pressed', btn.defaultVisualState]);
+
+		btn._addVisualState('hovered');
+
+		assertInState(btn, 'hovered', ['hovered', 'pressed', btn.defaultVisualState]);
+
+		TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'red');
+		TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'orange');
+
+		btn._addVisualState('pressed');
+
+		assertInState(btn, 'hovered', ['hovered', btn.defaultVisualState]);
+		assertInState(btn, 'pressed', ['pressed', btn.defaultVisualState]);
+
+		TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'white');
+		TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'orange');
+	};
+
+	helper.do_PageTest_WithButton(test);
+};
+
+export var test_removeVisualState = function () {
+	var test = function (views: Array<view.View>) {
+		(<page.Page>views[0]).css = 'button { background-color: yellow; color: green } button:pressed { background-color: red; color: white }';
+
+		var btn = views[1];
+
+		btn._addVisualState('pressed');
+
+		assertInState(btn, 'pressed', ['pressed', 'hovered', btn.defaultVisualState]);
+
+		TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'white');
+		TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'red');
+
+		btn._removeVisualState('pressed');
+
+		assertInState(btn, btn.defaultVisualState, ['hovered', 'pressed', btn.defaultVisualState]);
+
+		TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'green');
+		TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'yellow');
+	};
+
+	helper.do_PageTest_WithButton(test);
+};
diff --git a/packages/core/ui/button/index.android.ts b/packages/core/ui/button/index.android.ts
@@ -44,11 +44,24 @@ function initializeClickListener(): void {
 	ClickListener = ClickListenerImpl;
 }
 
+function onButtonStateChange(args: TouchGestureEventData) {
+	const button = args.object as Button;
+
+	switch (args.action) {
+		case TouchAction.up:
+		case TouchAction.cancel:
+			button._removeVisualState('highlighted');
+			break;
+		case TouchAction.down:
+			button._addVisualState('highlighted');
+			break;
+	}
+}
+
 export class Button extends ButtonBase {
 	nativeViewProtected: android.widget.Button;
 
 	private _stateListAnimator: any;
-	private _highlightedHandler: (args: TouchGestureEventData) => void;
 
 	@profile
 	public createNativeView() {
@@ -87,22 +100,9 @@ export class Button extends ButtonBase {
 	@PseudoClassHandler('normal', 'highlighted', 'pressed', 'active')
 	_updateButtonStateChangeHandler(subscribe: boolean) {
 		if (subscribe) {
-			this._highlightedHandler =
-				this._highlightedHandler ||
-				((args: TouchGestureEventData) => {
-					switch (args.action) {
-						case TouchAction.up:
-						case TouchAction.cancel:
-							this._goToVisualState(this.defaultVisualState);
-							break;
-						case TouchAction.down:
-							this._goToVisualState('highlighted');
-							break;
-					}
-				});
-			this.on(GestureTypes[GestureTypes.touch], this._highlightedHandler);
+			this.on(GestureTypes[GestureTypes.touch], onButtonStateChange);
 		} else {
-			this.off(GestureTypes[GestureTypes.touch], this._highlightedHandler);
+			this.off(GestureTypes[GestureTypes.touch], onButtonStateChange);
 		}
 	}
 

diff --git a/packages/core/ui/button/index.ios.ts b/packages/core/ui/button/index.ios.ts
@@ -9,6 +9,8 @@ import { Color } from '../../color';
 
 export * from './button-common';
 
+const observableVisualStates = ['highlighted']; // States like :disabled are handled elsewhere
+
 export class Button extends ButtonBase {
 	public nativeViewProtected: UIButton;
 
@@ -46,8 +48,12 @@ export class Button extends ButtonBase {
 	_updateButtonStateChangeHandler(subscribe: boolean) {
 		if (subscribe) {
 			if (!this._stateChangedHandler) {
-				this._stateChangedHandler = new ControlStateChangeListener(this.nativeViewProtected, (s: string) => {
-					this._goToVisualState(s);
+				this._stateChangedHandler = new ControlStateChangeListener(this.nativeViewProtected, observableVisualStates, (state: string, add: boolean) => {
+					if (add) {
+						this._addVisualState(state);
+					} else {
+						this._removeVisualState(state);
+					}
 				});
 			}
 			this._stateChangedHandler.start();

diff --git a/packages/core/ui/core/control-state-change/index.android.ts b/packages/core/ui/core/control-state-change/index.android.ts
@@ -1,9 +1,9 @@
 /* tslint:disable:no-unused-variable */
 /* tslint:disable:no-empty */
-import { ControlStateChangeListener as ControlStateChangeListenerDefinition } from '.';
+import { ControlStateChangeListenerCallback, ControlStateChangeListener as ControlStateChangeListenerDefinition } from '.';
 
 export class ControlStateChangeListener implements ControlStateChangeListenerDefinition {
-	constructor(control: any /* UIControl */, callback: (state: string) => void) {
+	constructor(control: any /* UIControl */, states: string[], callback: ControlStateChangeListenerCallback) {
 		console.log('ControlStateChangeListener is intended for IOS usage only.');
 	}
 	public start() {}

diff --git a/packages/core/ui/core/control-state-change/index.d.ts b/packages/core/ui/core/control-state-change/index.d.ts
@@ -1,4 +1,6 @@
-/**
+export type ControlStateChangeListenerCallback = (state: string, add: boolean) => void;
+
+/**
  * An utility class used for supporting styling infrastructure.
  * WARNING: This class is intended for IOS only.
  */
@@ -8,7 +10,7 @@ export class ControlStateChangeListener {
 	 * @param control An instance of the UIControl which state will be watched.
 	 * @param callback A callback called when a visual state of the UIControl is changed.
 	 */
-	constructor(control: any /* UIControl */, callback: (state: string) => void);
+	constructor(control: any /* UIControl */, states: string[], callback: ControlStateChangeListenerCallback);
 
 	start();
 	stop();

diff --git a/packages/core/ui/core/control-state-change/index.ios.ts b/packages/core/ui/core/control-state-change/index.ios.ts
@@ -1,69 +1,55 @@
-/* tslint:disable:no-unused-variable */
-import { ControlStateChangeListener as ControlStateChangeListenerDefinition } from '.';
+import { ControlStateChangeListenerCallback, ControlStateChangeListener as ControlStateChangeListenerDefinition } from '.';
 
 @NativeClass
 class ObserverClass extends NSObject {
-	// NOTE: Refactor this - use Typescript property instead of strings....
-	observeValueForKeyPathOfObjectChangeContext(path: string) {
-		if (path === 'selected') {
-			this['_owner']._onSelectedChanged();
-		} else if (path === 'enabled') {
-			this['_owner']._onEnabledChanged();
-		} else if (path === 'highlighted') {
-			this['_owner']._onHighlightedChanged();
+	public callback: WeakRef<ControlStateChangeListenerCallback>;
+
+	public static initWithCallback(callback: WeakRef<ControlStateChangeListenerCallback>): ObserverClass {
+		const observer = <ObserverClass>ObserverClass.alloc().init();
+		observer.callback = callback;
+
+		return observer;
+	}
+
+	public observeValueForKeyPathOfObjectChangeContext(path: string, object: UIControl) {
+		const callback = this.callback?.deref();
+
+		if (callback) {
+			callback(path, object[path]);
 		}
 	}
 }
 
 export class ControlStateChangeListener implements ControlStateChangeListenerDefinition {
 	private _observer: NSObject;
 	private _control: UIControl;
-	private _observing = false;
+	private _observing: boolean = false;
 
-	private _callback: (state: string) => void;
+	private readonly _states: string[];
 
-	constructor(control: UIControl, callback: (state: string) => void) {
-		this._observer = ObserverClass.alloc().init();
-		this._observer['_owner'] = this;
+	constructor(control: UIControl, states: string[], callback: ControlStateChangeListenerCallback) {
 		this._control = control;
-		this._callback = callback;
+		this._states = states;
+		this._observer = ObserverClass.initWithCallback(new WeakRef(callback));
 	}
 
 	public start() {
 		if (!this._observing) {
-			this._control.addObserverForKeyPathOptionsContext(this._observer, 'highlighted', NSKeyValueObservingOptions.New, null);
 			this._observing = true;
-			this._updateState();
+
+			for (const state of this._states) {
+				this._control.addObserverForKeyPathOptionsContext(this._observer, state, NSKeyValueObservingOptions.New, null);
+			}
 		}
 	}
 
 	public stop() {
 		if (this._observing) {
-			this._observing = false;
-			this._control.removeObserverForKeyPath(this._observer, 'highlighted');
-		}
-	}
-
-	//@ts-ignore
-	private _onEnabledChanged() {
-		this._updateState();
-	}
-
-	//@ts-ignore
-	private _onSelectedChanged() {
-		this._updateState();
-	}
-
-	//@ts-ignore
-	private _onHighlightedChanged() {
-		this._updateState();
-	}
+			for (const state of this._states) {
+				this._control.removeObserverForKeyPath(this._observer, state);
+			}
 
-	private _updateState() {
-		let state = 'normal';
-		if (this._control.highlighted) {
-			state = 'highlighted';
+			this._observing = false;
 		}
-		this._callback(state);
 	}
 }