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

feat(switch): :checked pseudo and color fixes (#9790)

Browse Source
This commit is contained in:
Igor Randjelovic
2022-02-21 23:22:26 +01:00
committed by Nathan Walker
parent 716b831523
commit 6437352fed
7 changed files with 188 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/ui/switch/index.android.ts
View File

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

69
packages/core/ui/switch/index.ios.ts
View File

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

6
packages/core/ui/switch/switch-common.ts
View File

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