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

Added pressed, active and disabled states for button.

Browse Source
This commit is contained in:
Nedyalko Nikolov
2016-10-21 14:26:37 +03:00
parent 8d178754a2
commit a63f46ee83
4 changed files with 94 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
tests/app/ui/button/button-tests.ts
View File

@ -258,6 +258,48 @@ export var testNativeTextAlignmentFromCss = function () {
});
}
export var test_StateHighlighted_also_fires_pressedState = function () {
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1];
var expectedColor = "#ffff0000";
page.css = "button:pressed { background-color: " + expectedColor + "; }";
view._goToVisualState('highlighted');
var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor);
});
}
export var test_StateHighlighted_also_fires_activeState = function () {
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1];
var expectedColor = "#ffff0000";
page.css = "button:active { background-color: " + expectedColor + "; }";
view._goToVisualState('highlighted');
var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor);
});
}
export var test_applying_disabled_visual_State_when_button_is_disable = function () {
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1];
var expectedColor = "#ffff0000";
page.css = "button:disabled { background-color: " + expectedColor + "; }";
view.isEnabled = false;
var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor);
});
}
export var testNativeTextAlignmentFromLocal = function () {
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0];

16
tests/app/ui/label/label-tests.ts
View File

@ -23,6 +23,7 @@ import {Label} from "ui/label";
import {LayoutBase} from "ui/layouts/layout-base";
import * as helper from "../helper";
import viewModule = require("ui/core/view");
import {Page} from "ui/page";
export class LabelTest extends testModule.UITest<LabelModule.Label> {
@ -666,3 +667,18 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");
});
}
export var test_applying_disabled_visual_State_when_label_is_disable = function () {
let view = new Label();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
var view = <Label>views[0];
var page = <Page>views[1];
var expectedColor = "#ffff0000";
page.css = "label:disabled { background-color: " + expectedColor + "; }";
view.isEnabled = false;
var actualResult = labelTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor);
});
}

2
tns-core-modules/ui/button/button.ios.ts
View File

@ -82,7 +82,7 @@ export class Button extends common.Button {
}
}
@PseudoClassHandler("normal", "highlighted")
@PseudoClassHandler("normal", "highlighted", "pressed", "active")
_updateHandler(subscribe: boolean) {
if (subscribe) {
if (!this._stateChangedHandler) {

41
tns-core-modules/ui/core/view-common.ts
View File

@ -552,6 +552,11 @@ export class View extends ProxyObject implements definition.View {
}
set isEnabled(value: boolean) {
this._setValue(View.isEnabledProperty, value);
if (value === false) {
this._goToVisualState('disabled');
} else {
this._goToVisualState('normal');
}
}
get page(): definition.View {
@ -757,17 +762,41 @@ export class View extends ProxyObject implements definition.View {
//
}
private pseudoClassAliases = {
'highlighted': [
'active',
'pressed'
]
};
private getAllAliasedStates(name: string): Array<string> {
let allStates = [];
allStates.push(name);
if (name in this.pseudoClassAliases) {
for (let i = 0; i < this.pseudoClassAliases[name].length; i++) {
allStates.push(this.pseudoClassAliases[name][i]);
}
}
return allStates;
}
public addPseudoClass(name: string): void {
if (!this.cssPseudoClasses.has(name)) {
this.cssPseudoClasses.add(name);
this.notifyPseudoClassChanged(name);
let allStates = this.getAllAliasedStates(name);
for (let i = 0; i < allStates.length; i++) {
if (!this.cssPseudoClasses.has(allStates[i])) {
this.cssPseudoClasses.add(allStates[i]);
this.notifyPseudoClassChanged(allStates[i]);
}
}
}
public deletePseudoClass(name: string): void {
if (this.cssPseudoClasses.has(name)) {
this.cssPseudoClasses.delete(name);
this.notifyPseudoClassChanged(name);
let allStates = this.getAllAliasedStates(name);
for (let i = 0; i < allStates.length; i++) {
if (this.cssPseudoClasses.has(allStates[i])) {
this.cssPseudoClasses.delete(allStates[i]);
this.notifyPseudoClassChanged(allStates[i]);
}
}
}