Skip to content

Commit 145e82a

Browse files
farfromrefugfarfromrefug
committed
chore: refactoring
1 parent de9c2b5 commit 145e82a

File tree

3 files changed

+124
-268
lines changed

3 files changed

+124
-268
lines changed

‎src/checkbox/common.ts

+52
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,56 @@
1+
import { Button, Color, CssProperty, Property, Style, booleanConverter } from '@nativescript/core';
2+
import { CheckBoxInterface } from '.';
13
export enum BoxType {
24
circle = 'circle',
35
square = 'square'
46
}
7+
8+
export const cssProperty = (target: Object, key: string | symbol) => {
9+
Object.defineProperty(target, key, {
10+
get() {
11+
return this.style[key];
12+
},
13+
set(newVal) {
14+
this.style[key] = newVal;
15+
},
16+
enumerable: true,
17+
configurable: true
18+
});
19+
};
20+
21+
export const tintColorProperty = new CssProperty<Style, string>({
22+
name: 'tintColor',
23+
cssName: 'tint-color',
24+
valueConverter: (v) => String(v)
25+
});
26+
27+
export const fillColorProperty = new CssProperty<Style, string>({
28+
name: 'fillColor',
29+
cssName: 'fill-color',
30+
valueConverter: (v) => String(v)
31+
});
32+
33+
export const checkedProperty = new Property<CheckBoxBase, boolean>({
34+
name: 'checked',
35+
defaultValue: false,
36+
valueConverter: booleanConverter
37+
// valueChanged: onCheckedPropertyChanged
38+
});
39+
40+
export abstract class CheckBoxBase extends Button implements CheckBoxInterface {
41+
checked: boolean;
42+
boxType: any;
43+
@cssProperty fillColor: string | Color;
44+
@cssProperty tintColor: string | Color;
45+
46+
abstract toggle(): void;
47+
_onCheckedPropertyChanged(checkbox: CheckBoxBase, oldValue, newValue) {
48+
if (!this.nativeViewProtected) {
49+
return;
50+
}
51+
checkedProperty.nativeValueChange(this, newValue);
52+
}
53+
}
54+
checkedProperty.register(CheckBoxBase);
55+
fillColorProperty.register(Style);
56+
tintColorProperty.register(Style);

‎src/checkbox/index.android.ts

+26-187
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,36 @@
1-
import { Color, CssProperty, Property, Style, View, booleanConverter, fontSizeProperty } from '@nativescript/core';
2-
import { BoxType } from './common';
1+
import { Color } from '@nativescript/core';
2+
import { BoxType, CheckBoxBase, checkedProperty, fillColorProperty, tintColorProperty } from './common';
33

4-
export const checkedProperty = new Property<CheckBox, boolean>({
5-
name: 'checked',
6-
defaultValue: false,
7-
valueConverter: booleanConverter,
8-
valueChanged: onCheckedPropertyChanged
9-
});
10-
11-
export const textProperty = new Property<CheckBox, string>({
12-
name: 'text',
13-
defaultValue: '',
14-
valueChanged: onTextPropertyChanged
15-
});
16-
17-
export const fillColorProperty = new CssProperty<Style, string>({
18-
name: 'fillColor',
19-
cssName: 'fill-color',
20-
valueConverter: (v) => String(v)
21-
});
22-
23-
export const tintColorProperty = new CssProperty<Style, string>({
24-
name: 'tintColor',
25-
cssName: 'tint-color',
26-
valueConverter: (v) => String(v)
27-
});
28-
29-
export class CheckBox extends View {
30-
checked: boolean;
31-
fillColor: Color | string;
32-
tintColor: Color | string;
4+
export class CheckBox extends CheckBoxBase {
335
nativeViewProtected: androidx.appcompat.widget.AppCompatCheckBox;
34-
private _boxType: string;
35-
private _checkStyle: string;
36-
private _checkPadding: string;
37-
private _checkPaddingLeft: string;
38-
private _checkPaddingTop: string;
39-
private _checkPaddingRight: string;
40-
private _checkPaddingBottom: string;
41-
42-
constructor() {
43-
super();
44-
}
45-
46-
set boxType(value: string) {
47-
this._boxType = value;
48-
}
49-
50-
get boxType() {
51-
return this._boxType;
52-
}
53-
54-
get checkStyle() {
55-
return this._checkStyle;
56-
}
57-
58-
set checkStyle(style) {
59-
this._checkStyle = style;
60-
}
61-
62-
set checkPadding(padding) {
63-
this._checkPadding = padding;
64-
}
65-
66-
get checkPadding() {
67-
return this._checkPadding;
68-
}
69-
70-
set checkPaddingLeft(padding) {
71-
this._checkPaddingLeft = padding;
72-
}
73-
74-
get checkPaddingLeft() {
75-
return this._checkPaddingLeft;
76-
}
77-
78-
set checkPaddingTop(padding) {
79-
this._checkPaddingTop = padding;
80-
}
81-
82-
get checkPaddingTop() {
83-
return this._checkPaddingTop;
84-
}
85-
86-
set checkPaddingRight(padding) {
87-
this._checkPaddingRight = padding;
88-
}
89-
90-
get checkPaddingRight() {
91-
return this._checkPaddingRight;
92-
}
93-
94-
set checkPaddingBottom(padding) {
95-
this._checkPaddingBottom = padding;
96-
}
6+
checkStyle: string;
7+
checkPadding: string;
8+
checkPaddingLeft: string;
9+
checkPaddingTop: string;
10+
checkPaddingRight: string;
11+
checkPaddingBottom: string;
12+
ignoreChange = false;
9713

98-
get checkPaddingBottom() {
99-
return this._checkPaddingBottom;
100-
}
101-
[checkedProperty.getDefault](): boolean {
102-
return false;
103-
}
10414
[checkedProperty.setNative](value: boolean) {
105-
this.nativeViewProtected.setChecked(Boolean(value));
106-
}
107-
[textProperty.getDefault](): string {
108-
return '';
109-
}
110-
[textProperty.setNative](value: string) {
111-
this.nativeViewProtected.setText(java.lang.String.valueOf(value));
112-
}
113-
[fontSizeProperty.getDefault]() {
114-
return { nativeSize: this.nativeViewProtected.getTextSize() };
115-
}
116-
[fontSizeProperty.setNative](value) {
117-
if (typeof value === 'number') {
118-
this.nativeViewProtected.setTextSize(value);
119-
} else {
120-
this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
121-
}
15+
this.ignoreChange = true;
16+
this.nativeViewProtected.setChecked(value);
17+
this.ignoreChange = false;
12218
}
12319

124-
get fontSize(): number {
125-
return this.style.fontSize;
126-
}
127-
set fontSize(size: number) {
128-
this.style.fontSize = size;
129-
}
130-
131-
// get fillColor(): string {
132-
// return this.style.fillColor;
133-
// }
134-
// set fillColor(color: string) {
135-
// (this.style as any).fillColor = color;
136-
// if (this.nativeViewProtected && Device.sdkVersion >= '21') {
137-
// this.nativeViewProtected.setSupportButtonTintList(android.content.res.ColorStateList.valueOf(new Color(color).android));
138-
// }
139-
// }
140-
14120
[fillColorProperty.setNative](value) {
14221
const color = !value || value instanceof Color ? value : new Color(value);
14322
this.nativeViewProtected.setButtonTintList(color ? android.content.res.ColorStateList.valueOf(color.android) : null);
14423
}
145-
14624
[tintColorProperty.setNative](value) {
147-
// there is no difference between tint and fill on the android widget
14825
this[fillColorProperty.setNative](value);
14926
}
27+
15028
createNativeView() {
15129
let view: androidx.appcompat.widget.AppCompatRadioButton | androidx.appcompat.widget.AppCompatCheckBox;
15230
if (BoxType[this.boxType] === BoxType.circle) {
153-
view = new androidx.appcompat.widget.AppCompatRadioButton(this._context, null);
31+
view = new androidx.appcompat.widget.AppCompatRadioButton(this._context);
15432
} else {
155-
view = new androidx.appcompat.widget.AppCompatCheckBox(this._context, null);
33+
view = new androidx.appcompat.widget.AppCompatCheckBox(this._context);
15634
}
15735

15836
if (this.checkPaddingLeft) {
@@ -188,42 +66,28 @@ export class CheckBox extends View {
18866
break;
18967
}
19068
}
191-
192-
if (this.style.color) {
193-
view.setTextColor(this.style.color.android);
194-
}
195-
196-
if (!this.style.fontSize) {
197-
this.style.fontSize = 14;
198-
}
199-
200-
view.setTextSize(this.style.fontSize);
201-
202-
const typeface = this.style.fontInternal?.getAndroidTypeface();
203-
if (typeface) {
204-
view.setTypeface(typeface);
205-
}
206-
207-
if (this._checkStyle) {
208-
const drawable = this._context.getResources().getIdentifier(this._checkStyle, 'drawable', this._context.getPackageName());
69+
if (this.checkStyle) {
70+
const drawable = this._context.getResources().getIdentifier(this.checkStyle, 'drawable', this._context.getPackageName());
20971
view.setButtonDrawable(drawable);
21072
}
21173

21274
// if (view) {
213-
// if (this.fillColor) {
214-
// view.setSupportButtonTintList(android.content.res.ColorStateList.valueOf(new Color(this.fillColor).android));
215-
// }
75+
// if (this.fillColor) {
76+
// view.setSupportButtonTintList(android.content.res.ColorStateList.valueOf(new Color(this.fillColor).android));
77+
// }
21678
// }
21779
return view;
21880
}
21981

22082
initNativeView() {
221-
const that = new WeakRef(this);
83+
const that = new WeakRef<CheckBox>(this);
22284
this.nativeViewProtected.setOnCheckedChangeListener(
22385
new android.widget.CompoundButton.OnCheckedChangeListener({
22486
onCheckedChanged: (sender, isChecked) => {
225-
if (that.get()) {
226-
checkedProperty.nativeValueChange(that.get(), isChecked);
87+
const owner = that.get();
88+
if (owner && !owner.ignoreChange) {
89+
console.log('onCheckedChanged', isChecked);
90+
checkedProperty.nativeValueChange(owner, isChecked);
22791
}
22892
}
22993
})
@@ -237,29 +101,4 @@ export class CheckBox extends View {
237101
toggle(): void {
238102
this.nativeViewProtected.toggle();
239103
}
240-
241-
_onCheckedPropertyChanged(checkbox: CheckBox, oldValue, newValue) {
242-
if (!this.nativeViewProtected) {
243-
return;
244-
}
245-
checkedProperty.nativeValueChange(this, newValue);
246-
}
247-
_onTextPropertyChanged(checkbox: CheckBox, oldValue, newValue) {
248-
if (!this.nativeViewProtected) {
249-
return;
250-
}
251-
textProperty.nativeValueChange(this, newValue);
252-
}
253104
}
254-
255-
function onCheckedPropertyChanged(checkbox: CheckBox, oldValue, newValue) {
256-
checkbox._onCheckedPropertyChanged(checkbox, oldValue, newValue);
257-
}
258-
function onTextPropertyChanged(checkbox: CheckBox, oldValue, newValue) {
259-
checkbox._onTextPropertyChanged(checkbox, oldValue, newValue);
260-
}
261-
262-
checkedProperty.register(CheckBox);
263-
textProperty.register(CheckBox);
264-
fillColorProperty.register(Style);
265-
tintColorProperty.register(Style);

0 commit comments

Comments
 (0)