Skip to content

Commit f0146f0

Browse files
MartoYankovMartoYankov
authored
feat(switch): add property for off state background color (#7138)
1 parent ed0d9df commit f0146f0

5 files changed

Lines changed: 72 additions & 8 deletions

File tree

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
<Page>
22
<StackLayout>
33
<Progress value="42" color="red" backgroundColor="green" height="10" width="300" />
4+
45
<Switch checked="true" color="red" backgroundColor="green" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
6+
<Switch checked="false" color="red" backgroundColor="green" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
7+
8+
<Switch checked="true" color="red" backgroundColor="green" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
9+
<Switch checked="false" color="red" backgroundColor="green" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
10+
11+
<Switch checked="true" color="red" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
12+
<Switch checked="false" color="red" offBackgroundColor="purple" height="30" width="52" borderWidth="2" borderColor="blue" borderRadius="15" />
13+
514
<Switch />
615
</StackLayout>
716
</Page>

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
import { Switch as SwitchDefinition } from ".";
22
import { View, Property, booleanConverter, CSSType } from "../core/view";
3+
import { Color } from "../../color";
34

45
export * from "../core/view";
56

67
@CSSType("Switch")
78
export class SwitchBase extends View implements SwitchDefinition {
89
public checked: boolean;
10+
public offBackgroundColor: Color;
11+
12+
_onCheckedPropertyChanged(newValue: boolean) {
13+
//
14+
}
915
}
1016

1117
SwitchBase.prototype.recycleNativeView = "auto";
1218

13-
export const checkedProperty = new Property<SwitchBase, boolean>({ name: "checked", defaultValue: false, valueConverter: booleanConverter });
14-
checkedProperty.register(SwitchBase);
19+
function onCheckedPropertyChanged(switchBase: SwitchBase, oldValue: boolean, newValue: boolean) {
20+
switchBase._onCheckedPropertyChanged(newValue);
21+
}
22+
23+
export const checkedProperty = new Property<SwitchBase, boolean>({ name: "checked", defaultValue: false, valueConverter: booleanConverter, valueChanged: onCheckedPropertyChanged });
24+
checkedProperty.register(SwitchBase);
25+
26+
export const offBackgroundColorProperty = new Property<SwitchBase, Color>({ name: "offBackgroundColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
27+
offBackgroundColorProperty.register(SwitchBase);

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

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
SwitchBase, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty
2+
SwitchBase, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty, offBackgroundColorProperty
33
} from "./switch-common";
44

55
export * from "./switch-common";
@@ -54,6 +54,24 @@ export class Switch extends SwitchBase {
5454
super.disposeNativeView();
5555
}
5656

57+
private setNativeBackgroundColor(value: string | number | Color) {
58+
if (value instanceof Color) {
59+
this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN);
60+
} else {
61+
this.nativeViewProtected.getTrackDrawable().clearColorFilter();
62+
}
63+
}
64+
65+
_onCheckedPropertyChanged(newValue: boolean) {
66+
if (this.offBackgroundColor) {
67+
if (!newValue) {
68+
this.setNativeBackgroundColor(this.offBackgroundColor);
69+
} else {
70+
this.setNativeBackgroundColor(this.backgroundColor);
71+
}
72+
}
73+
}
74+
5775
[checkedProperty.getDefault](): boolean {
5876
return false;
5977
}
@@ -76,10 +94,8 @@ export class Switch extends SwitchBase {
7694
return -1;
7795
}
7896
[backgroundColorProperty.setNative](value: number | Color) {
79-
if (value instanceof Color) {
80-
this.nativeViewProtected.getTrackDrawable().setColorFilter(value.android, android.graphics.PorterDuff.Mode.SRC_IN);
81-
} else {
82-
this.nativeViewProtected.getTrackDrawable().clearColorFilter();
97+
if (!this.offBackgroundColor || this.checked) {
98+
this.setNativeBackgroundColor(value);
8399
}
84100
}
85101

@@ -89,4 +105,13 @@ export class Switch extends SwitchBase {
89105
[backgroundInternalProperty.setNative](value: any) {
90106
//
91107
}
108+
109+
[offBackgroundColorProperty.getDefault](): number {
110+
return -1;
111+
}
112+
[offBackgroundColorProperty.setNative](value: number | Color) {
113+
if (!this.checked) {
114+
this.setNativeBackgroundColor(value);
115+
}
116+
}
92117
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/ /** */
55

66
import { View, Property } from "../core/view";
7+
import { Color } from "../../color";
78

89
/**
910
* Represents a switch component.
@@ -24,6 +25,11 @@ export class Switch extends View {
2425
* Gets or sets if a switch is checked or not.
2526
*/
2627
checked: boolean;
28+
29+
/**
30+
* Gets or sets the background color of the Switch when it is turned off.
31+
*/
32+
offBackgroundColor: Color;
2733
}
2834

2935
/**

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
SwitchBase, layout, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty
2+
SwitchBase, layout, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty, checkedProperty, offBackgroundColorProperty
33
} from "./switch-common";
44

55
export * from "./switch-common";
@@ -95,4 +95,15 @@ export class Switch extends SwitchBase {
9595
[backgroundInternalProperty.setNative](value: any) {
9696
//
9797
}
98+
99+
[offBackgroundColorProperty.getDefault](): UIColor {
100+
return this.nativeViewProtected.backgroundColor;
101+
}
102+
[offBackgroundColorProperty.setNative](value: Color | UIColor) {
103+
const nativeValue = value instanceof Color ? value.ios : value;
104+
105+
this.nativeViewProtected.tintColor = nativeValue;
106+
this.nativeViewProtected.backgroundColor = nativeValue;
107+
this.nativeViewProtected.layer.cornerRadius = this.nativeViewProtected.frame.size.height / 2;
108+
}
98109
}

0 commit comments

Comments
 (0)