feat(switch): add property for off state background color (#7138)

apps/app/ui-tests-app/css/progress-switch.xml

@@ -1,7 +1,16 @@
 <Page>
   <StackLayout>
     <Progress value="42" color="red" backgroundColor="green" height="10" width="300" />
+
     <Switch checked="true" color="red" backgroundColor="green" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
+    <Switch checked="false" color="red" backgroundColor="green" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
+
+    <Switch checked="true" color="red" backgroundColor="green" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
+    <Switch checked="false" color="red" backgroundColor="green" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
+
+    <Switch checked="true" color="red" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
+    <Switch checked="false" color="red" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
+
     <Switch />
   </StackLayout>
 </Page>

tns-core-modules/ui/switch/switch-common.ts

@@ -1,14 +1,27 @@
 import { Switch as SwitchDefinition } from ".";
 import { View, Property, booleanConverter, CSSType } from "../core/view";
+import { Color } from "../../color";
 
 export * from "../core/view";
 
 @CSSType("Switch")
 export class SwitchBase extends View implements SwitchDefinition {
     public checked: boolean;
+    public offBackgroundColor: Color;
+
+    _onCheckedPropertyChanged(newValue: boolean) {
+        //
+    }
 }
 
 SwitchBase.prototype.recycleNativeView = "auto";
 
-export const checkedProperty = new Property<SwitchBase, boolean>({ name: "checked", defaultValue: false, valueConverter: booleanConverter });
+function onCheckedPropertyChanged(switchBase: SwitchBase, oldValue: boolean, newValue: boolean) {
+    switchBase._onCheckedPropertyChanged(newValue);
+}
+
+export const checkedProperty = new Property<SwitchBase, boolean>({ name: "checked", defaultValue: false, valueConverter: booleanConverter, valueChanged: onCheckedPropertyChanged });
 checkedProperty.register(SwitchBase);
+
+export const offBackgroundColorProperty = new Property<SwitchBase, Color>({ name: "offBackgroundColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
+offBackgroundColorProperty.register(SwitchBase);

tns-core-modules/ui/switch/switch.android.ts

@@ -1,5 +1,5 @@
 import {
-    SwitchBase, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty
+    SwitchBase, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty, offBackgroundColorProperty
 } from "./switch-common";
 
 export * from "./switch-common";
@@ -54,6 +54,24 @@ export class Switch extends SwitchBase {
         super.disposeNativeView();
     }
 
+    private setNativeBackgroundColor(value: string | number | Color) {
+        if (value instanceof Color) {
+            this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN);
+        } else {
+            this.nativeViewProtected.getTrackDrawable().clearColorFilter();
+        }
+    }
+
+    _onCheckedPropertyChanged(newValue: boolean) {
+        if (this.offBackgroundColor) {
+            if (!newValue) {
+                this.setNativeBackgroundColor(this.offBackgroundColor);
+            } else {
+                this.setNativeBackgroundColor(this.backgroundColor);
+            }
+        }
+    }
+
     [checkedProperty.getDefault](): boolean {
         return false;
     }
@@ -76,10 +94,8 @@ export class Switch extends SwitchBase {
         return -1;
     }
     [backgroundColorProperty.setNative](value: number | Color) {
-        if (value instanceof Color) {
+        if (!this.offBackgroundColor || this.checked) {
-            this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN);
+            this.setNativeBackgroundColor(value);
-        } else {
-            this.nativeViewProtected.getTrackDrawable().clearColorFilter();
         }
     }
 
@@ -89,4 +105,13 @@ export class Switch extends SwitchBase {
     [backgroundInternalProperty.setNative](value: any) {
         //
     }
+
+    [offBackgroundColorProperty.getDefault](): number {
+        return -1;
+    }
+    [offBackgroundColorProperty.setNative](value: number | Color) {
+        if (!this.checked) {
+            this.setNativeBackgroundColor(value);
+        }
+    }
 }

tns-core-modules/ui/switch/switch.d.ts

@@ -4,6 +4,7 @@
  */ /** */
 
 import { View, Property } from "../core/view";
+import { Color } from "../../color";
 
 /**
  * Represents a switch component.
@@ -24,6 +25,11 @@ export class Switch extends View {
      * Gets or sets if a switch is checked or not.
      */
     checked: boolean;
+
+    /**
+     * Gets or sets the background color of the Switch when it is turned off.
+     */
+    offBackgroundColor: Color;
 }
 
 /**

tns-core-modules/ui/switch/switch.ios.ts

@@ -1,5 +1,5 @@
 import {
-    SwitchBase, layout, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty
+    SwitchBase, layout, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty, offBackgroundColorProperty
 } from "./switch-common";
 
 export * from "./switch-common";
@@ -95,4 +95,15 @@ export class Switch extends SwitchBase {
     [backgroundInternalProperty.setNative](value: any) {
         //
     }
+
+    [offBackgroundColorProperty.getDefault](): UIColor {
+        return this.nativeViewProtected.backgroundColor;
+    }
+    [offBackgroundColorProperty.setNative](value: Color | UIColor) {
+        const nativeValue = value instanceof Color ? value.ios : value;
+
+        this.nativeViewProtected.tintColor = nativeValue;
+        this.nativeViewProtected.backgroundColor = nativeValue;
+        this.nativeViewProtected.layer.cornerRadius = this.nativeViewProtected.frame.size.height / 2;
+    }
 }