From 6437352feda731964728113b1b29cdeda1571666 Mon Sep 17 00:00:00 2001
From: Igor Randjelovic <rigor789@gmail.com>
Date: Mon, 21 Feb 2022 23:22:26 +0100
Subject: [PATCH] feat(switch): :checked pseudo and color fixes (#9790)

---
 apps/toolbox/src/app.css                 | 20 +++++++
 apps/toolbox/src/main-page.xml           | 11 ++--
 apps/toolbox/src/pages/switch.ts         | 14 +++++
 apps/toolbox/src/pages/switch.xml        | 75 ++++++++++++++++++++++++
 packages/core/ui/switch/index.android.ts |  8 ++-
 packages/core/ui/switch/index.ios.ts     | 69 +++++++++++++++++++---
 packages/core/ui/switch/switch-common.ts |  6 +-
 7 files changed, 188 insertions(+), 15 deletions(-)
 create mode 100644 apps/toolbox/src/pages/switch.ts
 create mode 100644 apps/toolbox/src/pages/switch.xml

diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
index 8589cefaa..0e77e788e 100644
--- a/apps/toolbox/src/app.css
+++ b/apps/toolbox/src/app.css
@@ -201,4 +201,24 @@ Button {
 
 .a11y-demo-page .a11y-state-checked {
   a11y-state: checked;
+}
+
+.switch-demo-page Switch.custom-switch {
+    color: #ddd;
+    background-color: #65adf1;
+}
+
+.switch-demo-page Switch.custom-switch:checked {
+    color: #111;
+    background-color: #65adf1;
+}
+
+.switch-demo-page Switch.custom-switch:disabled {
+    color: #777;
+    background-color: #ddd;
+}
+
+.switch-demo-page Switch.custom-switch:disabled:checked {
+    color: #ddd;
+    background-color: #777;
 }
\ No newline at end of file
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index 667e9e9a5..34a1d1a22 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -6,15 +6,16 @@
   <StackLayout class="p-20">
     <ScrollView class="h-full">
       <StackLayout>
-        <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
-        <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
-        <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
-        <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
-        <Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="touch-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
       </StackLayout>
     </ScrollView>
   </StackLayout>
diff --git a/apps/toolbox/src/pages/switch.ts b/apps/toolbox/src/pages/switch.ts
new file mode 100644
index 000000000..22b45bdb1
--- /dev/null
+++ b/apps/toolbox/src/pages/switch.ts
@@ -0,0 +1,14 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SwitchModel();
+}
+
+export class SwitchModel extends Observable {
+	constructor() {
+		super();
+	}
+}
diff --git a/apps/toolbox/src/pages/switch.xml b/apps/toolbox/src/pages/switch.xml
new file mode 100644
index 000000000..232c598ad
--- /dev/null
+++ b/apps/toolbox/src/pages/switch.xml
@@ -0,0 +1,75 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="Switch" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout padding="20" class="switch-demo-page">   
+      <ScrollView>
+          <StackLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Default + Checked + Enabled" />
+                <Switch checked="true" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Default + UnChecked + Enabled" />
+                <Switch checked="false" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Default + Checked + Disabled" />
+                <Switch checked="true" isEnabled="false" col="1" />
+            </GridLayout>
+            
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Default + UnChecked + Disabled" />
+                <Switch checked="false" isEnabled="false" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + Checked + Enabled" />
+                <Switch class="custom-switch" checked="true" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + UnChecked + Enabled" />
+                <Switch class="custom-switch" checked="false" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + Checked + Disabled" />
+                <Switch class="custom-switch" checked="true" isEnabled="false" col="1" />
+            </GridLayout>
+            
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + UnChecked + Disabled" />
+                <Switch class="custom-switch" checked="false" isEnabled="false" col="1" />
+            </GridLayout>
+            
+             <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + Checked + Enabled + offBgColor" />
+                <Switch class="custom-switch" checked="true" backgroundColor="blue" offBackgroundColor="red" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + UnChecked + Enabled + offBgColor" />
+                <Switch class="custom-switch" checked="false" offBackgroundColor="red" col="1" />
+            </GridLayout>
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + Checked + Disabled + offBgColor" />
+                <Switch class="custom-switch" checked="true" isEnabled="false" offBackgroundColor="red" col="1" />
+            </GridLayout>
+
+
+            <GridLayout columns="*, auto" marginTop="24">
+                <Label text="Custom + UnChecked + Disabled + offBgColor" />
+                <Switch class="custom-switch" checked="false" isEnabled="false" offBackgroundColor="red" col="1" />
+            </GridLayout>
+
+          </StackLayout>
+      </ScrollView>
+    </GridLayout>
+</Page>
diff --git a/packages/core/ui/switch/index.android.ts b/packages/core/ui/switch/index.android.ts
index a5671b0c2..f57169c93 100644
--- a/packages/core/ui/switch/index.android.ts
+++ b/packages/core/ui/switch/index.android.ts
@@ -58,13 +58,16 @@ export class Switch extends SwitchBase {
 
 	private setNativeBackgroundColor(value: string | number | Color) {
 		if (value instanceof Color) {
-			this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN);
+			// todo: use https://developer.android.com/reference/androidx/core/graphics/BlendModeColorFilterCompat
+			this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_OVER);
 		} else {
 			this.nativeViewProtected.getTrackDrawable().clearColorFilter();
 		}
 	}
 
 	_onCheckedPropertyChanged(newValue: boolean) {
+		super._onCheckedPropertyChanged(newValue);
+
 		if (this.offBackgroundColor) {
 			if (!newValue) {
 				this.setNativeBackgroundColor(this.offBackgroundColor);
@@ -86,7 +89,8 @@ export class Switch extends SwitchBase {
 	}
 	[colorProperty.setNative](value: number | Color) {
 		if (value instanceof Color) {
-			this.nativeViewProtected.getThumbDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN);
+			// todo: use https://developer.android.com/reference/androidx/core/graphics/BlendModeColorFilterCompat
+			this.nativeViewProtected.getThumbDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_ATOP);
 		} else {
 			this.nativeViewProtected.getThumbDrawable().clearColorFilter();
 		}
diff --git a/packages/core/ui/switch/index.ios.ts b/packages/core/ui/switch/index.ios.ts
index dcb9b2525..0841d7617 100644
--- a/packages/core/ui/switch/index.ios.ts
+++ b/packages/core/ui/switch/index.ios.ts
@@ -1,10 +1,12 @@
 import { SwitchBase, checkedProperty, offBackgroundColorProperty } from './switch-common';
 import { colorProperty, backgroundColorProperty, backgroundInternalProperty } from '../styling/style-properties';
 import { Color } from '../../color';
-import { layout } from '../../utils';
+import { iOSNativeHelper, layout } from '../../utils';
 
 export * from './switch-common';
 
+const majorVersion = iOSNativeHelper.MajorVersion;
+
 @NativeClass
 class SwitchChangeHandlerImpl extends NSObject {
 	private _owner: WeakRef<Switch>;
@@ -55,6 +57,37 @@ export class Switch extends SwitchBase {
 		super.disposeNativeView();
 	}
 
+	private setNativeBackgroundColor(value: UIColor | Color) {
+		if (value) {
+			this.nativeViewProtected.onTintColor = value instanceof Color ? value.ios : value;
+			this.nativeViewProtected.tintColor = value instanceof Color ? value.ios : value;
+			this.nativeViewProtected.backgroundColor = value instanceof Color ? value.ios : value;
+			this.nativeViewProtected.layer.cornerRadius = this.nativeViewProtected.frame.size.height / 2;
+		} else {
+			this.nativeViewProtected.onTintColor = null;
+			this.nativeViewProtected.tintColor = null;
+			this.nativeViewProtected.backgroundColor = null;
+			this.nativeViewProtected.layer.cornerRadius = 0;
+		}
+	}
+
+	_onCheckedPropertyChanged(newValue: boolean) {
+		// only add :checked pseudo handling on supported iOS versions
+		// ios <13 works but causes glitchy animations when toggling
+		// so we decided to keep the old behavior on older versions.
+		if (majorVersion >= 13) {
+			super._onCheckedPropertyChanged(newValue);
+
+			if (this.offBackgroundColor) {
+				if (!newValue) {
+					this.setNativeBackgroundColor(this.offBackgroundColor);
+				} else {
+					this.setNativeBackgroundColor(this.backgroundColor instanceof Color ? this.backgroundColor : new Color(this.backgroundColor));
+				}
+			}
+		}
+	}
+
 	// @ts-ignore
 	get ios(): UISwitch {
 		return this.nativeViewProtected;
@@ -82,14 +115,29 @@ export class Switch extends SwitchBase {
 		return this.nativeViewProtected.thumbTintColor;
 	}
 	[colorProperty.setNative](value: UIColor | Color) {
-		this.nativeViewProtected.thumbTintColor = value instanceof Color ? value.ios : value;
+		const color: UIColor = value instanceof Color ? value.ios : value;
+		this.nativeViewProtected.thumbTintColor = color;
+
+		if (color && this.nativeViewProtected.subviews.count > 0) {
+			const alpha = new interop.Reference(1.0);
+			const res = color.getRedGreenBlueAlpha(null, null, null, alpha);
+
+			this.nativeViewProtected.subviews[0].alpha = (res && alpha.value) ?? 1;
+		}
 	}
 
 	[backgroundColorProperty.getDefault](): UIColor {
 		return this.nativeViewProtected.onTintColor;
 	}
 	[backgroundColorProperty.setNative](value: UIColor | Color) {
-		this.nativeViewProtected.onTintColor = value instanceof Color ? value.ios : value;
+		if (majorVersion >= 13) {
+			if (!this.offBackgroundColor || this.checked) {
+				this.setNativeBackgroundColor(value);
+			}
+		} else {
+			// old behavior on unsupported iOS versions
+			this.nativeViewProtected.onTintColor = value instanceof Color ? value.ios : value;
+		}
 	}
 
 	[backgroundInternalProperty.getDefault](): any {
@@ -103,10 +151,17 @@ export class Switch extends SwitchBase {
 		return this.nativeViewProtected.backgroundColor;
 	}
 	[offBackgroundColorProperty.setNative](value: Color | UIColor) {
-		const nativeValue = value instanceof Color ? value.ios : value;
+		if (majorVersion >= 13) {
+			if (!this.checked) {
+				this.setNativeBackgroundColor(value);
+			}
+		} else {
+			// old behavior on unsupported iOS versions...
+			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;
+			this.nativeViewProtected.tintColor = nativeValue;
+			this.nativeViewProtected.backgroundColor = nativeValue;
+			this.nativeViewProtected.layer.cornerRadius = this.nativeViewProtected.frame.size.height / 2;
+		}
 	}
 }
diff --git a/packages/core/ui/switch/switch-common.ts b/packages/core/ui/switch/switch-common.ts
index b4484be6a..3fc1c7af8 100644
--- a/packages/core/ui/switch/switch-common.ts
+++ b/packages/core/ui/switch/switch-common.ts
@@ -12,7 +12,11 @@ export class SwitchBase extends View implements SwitchDefinition {
 	public offBackgroundColor: Color;
 
 	_onCheckedPropertyChanged(newValue: boolean) {
-		//
+		if (newValue) {
+			this.addPseudoClass('checked');
+		} else {
+			this.deletePseudoClass('checked');
+		}
 	}
 }