javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 11:17:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Martin Yankov
2019-04-15 18:26:49 +03:00
committed by GitHub
parent ed0d9df441
commit f0146f0e1b
5 changed files with 72 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/app/ui-tests-app/css/progress-switch.xml
View File

@ -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>

15
tns-core-modules/ui/switch/switch-common.ts
View File

@ -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);

35
tns-core-modules/ui/switch/switch.android.ts
View File

@ -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);
}
}
}

6
tns-core-modules/ui/switch/switch.d.ts vendored
View File

@ -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;
}
/**

13
tns-core-modules/ui/switch/switch.ios.ts
View File

@ -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;
}
}