From a63f46ee83390fb70df3234aecfbac1718be8d0b Mon Sep 17 00:00:00 2001
From: Nedyalko Nikolov <nedyalko.nikolov@telerik.com>
Date: Fri, 21 Oct 2016 14:26:37 +0300
Subject: [PATCH] Added pressed, active and disabled states for button.

---
 tests/app/ui/button/button-tests.ts      | 42 ++++++++++++++++++++++++
 tests/app/ui/label/label-tests.ts        | 16 +++++++++
 tns-core-modules/ui/button/button.ios.ts |  2 +-
 tns-core-modules/ui/core/view-common.ts  | 41 +++++++++++++++++++----
 4 files changed, 94 insertions(+), 7 deletions(-)

diff --git a/tests/app/ui/button/button-tests.ts b/tests/app/ui/button/button-tests.ts
index 9b1da062b..78abc6800 100644
--- a/tests/app/ui/button/button-tests.ts
+++ b/tests/app/ui/button/button-tests.ts
@@ -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];
diff --git a/tests/app/ui/label/label-tests.ts b/tests/app/ui/label/label-tests.ts
index 53303bc39..f2eff2598 100644
--- a/tests/app/ui/label/label-tests.ts
+++ b/tests/app/ui/label/label-tests.ts
@@ -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);
+    });
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/button/button.ios.ts b/tns-core-modules/ui/button/button.ios.ts
index 3913011b2..808cd19aa 100644
--- a/tns-core-modules/ui/button/button.ios.ts
+++ b/tns-core-modules/ui/button/button.ios.ts
@@ -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) {
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index fa624a057..981e370ff 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -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]);
+            }
         }
     }