From f0146f0e1bb58933946827ab61a9717f55712a76 Mon Sep 17 00:00:00 2001 From: Martin Yankov Date: Mon, 15 Apr 2019 18:26:49 +0300 Subject: [PATCH] feat(switch): add property for off state background color (#7138) --- apps/app/ui-tests-app/css/progress-switch.xml | 9 +++++ tns-core-modules/ui/switch/switch-common.ts | 17 +++++++-- tns-core-modules/ui/switch/switch.android.ts | 35 ++++++++++++++++--- tns-core-modules/ui/switch/switch.d.ts | 6 ++++ tns-core-modules/ui/switch/switch.ios.ts | 13 ++++++- 5 files changed, 72 insertions(+), 8 deletions(-) diff --git a/apps/app/ui-tests-app/css/progress-switch.xml b/apps/app/ui-tests-app/css/progress-switch.xml index d928327ef..208d79649 100644 --- a/apps/app/ui-tests-app/css/progress-switch.xml +++ b/apps/app/ui-tests-app/css/progress-switch.xml @@ -1,7 +1,16 @@  + + + + + + + + + diff --git a/tns-core-modules/ui/switch/switch-common.ts b/tns-core-modules/ui/switch/switch-common.ts index 069762167..77dccd012 100644 --- a/tns-core-modules/ui/switch/switch-common.ts +++ b/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({ name: "checked", defaultValue: false, valueConverter: booleanConverter }); -checkedProperty.register(SwitchBase); \ No newline at end of file +function onCheckedPropertyChanged(switchBase: SwitchBase, oldValue: boolean, newValue: boolean) { + switchBase._onCheckedPropertyChanged(newValue); +} + +export const checkedProperty = new Property({ name: "checked", defaultValue: false, valueConverter: booleanConverter, valueChanged: onCheckedPropertyChanged }); +checkedProperty.register(SwitchBase); + +export const offBackgroundColorProperty = new Property({ name: "offBackgroundColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); +offBackgroundColorProperty.register(SwitchBase); diff --git a/tns-core-modules/ui/switch/switch.android.ts b/tns-core-modules/ui/switch/switch.android.ts index 0a3e26e36..76131abcb 100644 --- a/tns-core-modules/ui/switch/switch.android.ts +++ b/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) { - this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN); - } else { - this.nativeViewProtected.getTrackDrawable().clearColorFilter(); + if (!this.offBackgroundColor || this.checked) { + this.setNativeBackgroundColor(value); } } @@ -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); + } + } } diff --git a/tns-core-modules/ui/switch/switch.d.ts b/tns-core-modules/ui/switch/switch.d.ts index 6d935f80a..9175af15e 100644 --- a/tns-core-modules/ui/switch/switch.d.ts +++ b/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; } /** diff --git a/tns-core-modules/ui/switch/switch.ios.ts b/tns-core-modules/ui/switch/switch.ios.ts index 8acb70797..917cb260e 100644 --- a/tns-core-modules/ui/switch/switch.ios.ts +++ b/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; + } } \ No newline at end of file