Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

feat(core): Added support for simultaneous pseudo states #10656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jan 13, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 4 apps/automated/src/ui/button/button-tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down
12 changes: 6 additions & 6 deletions 12 apps/automated/src/ui/styling/style-tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -602,9 +602,9 @@ export function test_restore_original_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');
}

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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.');
}
Expand Down
51 changes: 51 additions & 0 deletions 51 apps/automated/src/ui/styling/visual-state-tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
32 changes: 16 additions & 16 deletions 32 packages/core/ui/button/index.android.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
}
}

Expand Down
10 changes: 8 additions & 2 deletions 10 packages/core/ui/button/index.ios.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions 4 packages/core/ui/core/control-state-change/index.android.ts
Original file line number Diff line number Diff line change
@@ -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() {}
Expand Down
6 changes: 4 additions & 2 deletions 6 packages/core/ui/core/control-state-change/index.d.ts
Original file line number Diff line number Diff line change
@@ -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.
*/
Expand All @@ -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();
Expand Down
70 changes: 28 additions & 42 deletions 70 packages/core/ui/core/control-state-change/index.ios.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
Loading
Loading
Morty Proxy This is a proxified and sanitized view of the page, visit original site.