@nativescript-community/ui-checkbox - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [2.0.8](https://github.com/nativescript-community/ui-checkbox/compare/v2.0.7...v2.0.8) (2022-05-19)
+
+
+### Bug Fixes
+
+* **android:** native-api-usage ([de9c2b5](https://github.com/nativescript-community/ui-checkbox/commit/de9c2b51a47940127480c9a303f43290e50b5d5c))
+
+
+
+
+
 ## [2.0.7](https://github.com/nativescript-community/ui-checkbox/compare/v2.0.6...v2.0.7) (2022-04-26)
@@ -8,0 +19,0 @@

common.d.ts

@@ -0,1 +1,3 @@
+import { Button, Color, CssProperty, Property, Style } from '@nativescript/core';
+import { CheckBoxInterface } from '.';
 export declare enum BoxType {
@@ -5,1 +7,13 @@ circle = "circle",
 }
+export declare const cssProperty: (target: Object, key: string | symbol) => void;
+export declare const tintColorProperty: CssProperty<Style, string>;
+export declare const fillColorProperty: CssProperty<Style, string>;
+export declare const checkedProperty: Property<CheckBoxBase, boolean>;
+export declare abstract class CheckBoxBase extends Button implements CheckBoxInterface {
+    checked: boolean;
+    boxType: any;
+    fillColor: string | Color;
+    tintColor: string | Color;
+    abstract toggle(): void;
+    _onCheckedPropertyChanged(checkbox: CheckBoxBase, oldValue: any, newValue: any): void;
+}

common.js

@@ -0,1 +1,2 @@
+import { Button, Color, CssProperty, Property, Style, booleanConverter } from '@nativescript/core';
 export var BoxType;
@@ -6,2 +7,46 @@ (function (BoxType) {
 })(BoxType || (BoxType = {}));
+export const cssProperty = (target, key) => {
+    Object.defineProperty(target, key, {
+        get() {
+            return this.style[key];
+        },
+        set(newVal) {
+            this.style[key] = newVal;
+        },
+        enumerable: true,
+        configurable: true
+    });
+};
+export const tintColorProperty = new CssProperty({
+    name: 'tintColor',
+    cssName: 'tint-color',
+    valueConverter: (v) => String(v)
+});
+export const fillColorProperty = new CssProperty({
+    name: 'fillColor',
+    cssName: 'fill-color',
+    valueConverter: (v) => String(v)
+});
+export const checkedProperty = new Property({
+    name: 'checked',
+    defaultValue: false,
+    valueConverter: booleanConverter
+});
+export class CheckBoxBase extends Button {
+    _onCheckedPropertyChanged(checkbox, oldValue, newValue) {
+        if (!this.nativeViewProtected) {
+            return;
+        }
+        checkedProperty.nativeValueChange(this, newValue);
+    }
+}
+__decorate([
+    cssProperty
+], CheckBoxBase.prototype, "fillColor", void 0);
+__decorate([
+    cssProperty
+], CheckBoxBase.prototype, "tintColor", void 0);
+checkedProperty.register(CheckBoxBase);
+fillColorProperty.register(Style);
+tintColorProperty.register(Style);
 //# sourceMappingURL=common.js.map

index.android.d.ts

@@ -1,35 +0,11 @@
-import { Color, CssProperty, Property, Style, View } from '@nativescript/core';
-export declare const checkedProperty: any;
-export declare const textProperty: Property<CheckBox, string>;
-export declare const fillColorProperty: CssProperty<Style, string>;
-export declare const tintColorProperty: CssProperty<Style, string>;
-export declare class CheckBox extends View {
-    checked: boolean;
-    fillColor: Color | string;
-    tintColor: Color | string;
+import { CheckBoxBase } from './common';
+export declare class CheckBox extends CheckBoxBase {
     nativeViewProtected: androidx.appcompat.widget.AppCompatCheckBox;
-    private _boxType;
-    private _checkStyle;
-    private _checkPadding;
-    private _checkPaddingLeft;
-    private _checkPaddingTop;
-    private _checkPaddingRight;
-    private _checkPaddingBottom;
-    constructor();
-    set boxType(value: string);
-    get boxType(): string;
-    get checkStyle(): string;
-    set checkStyle(style: string);
-    set checkPadding(padding: string);
-    get checkPadding(): string;
-    set checkPaddingLeft(padding: string);
-    get checkPaddingLeft(): string;
-    set checkPaddingTop(padding: string);
-    get checkPaddingTop(): string;
-    set checkPaddingRight(padding: string);
-    get checkPaddingRight(): string;
-    set checkPaddingBottom(padding: string);
-    get checkPaddingBottom(): string;
-    get fontSize(): number;
-    set fontSize(size: number);
+    checkStyle: string;
+    checkPadding: string;
+    checkPaddingLeft: string;
+    checkPaddingTop: string;
+    checkPaddingRight: string;
+    checkPaddingBottom: string;
+    ignoreChange: boolean;
     createNativeView(): androidx.appcompat.widget.AppCompatCheckBox | androidx.appcompat.widget.AppCompatRadioButton;
@@ -39,4 +15,2 @@ initNativeView(): void;
     toggle(): void;
-    _onCheckedPropertyChanged(checkbox: CheckBox, oldValue: any, newValue: any): void;
-    _onTextPropertyChanged(checkbox: CheckBox, oldValue: any, newValue: any): void;
 }

index.android.js

@@ -1,99 +0,13 @@
-import { Color, CssProperty, Property, Style, View, booleanConverter, fontSizeProperty } from '@nativescript/core';
-import { BoxType } from './common';
-export const checkedProperty = new Property({
-    name: 'checked',
-    defaultValue: false,
-    valueConverter: booleanConverter,
-    valueChanged: onCheckedPropertyChanged
-});
-export const textProperty = new Property({
-    name: 'text',
-    defaultValue: '',
-    valueChanged: onTextPropertyChanged
-});
-export const fillColorProperty = new CssProperty({
-    name: 'fillColor',
-    cssName: 'fill-color',
-    valueConverter: (v) => String(v)
-});
-export const tintColorProperty = new CssProperty({
-    name: 'tintColor',
-    cssName: 'tint-color',
-    valueConverter: (v) => String(v)
-});
-export class CheckBox extends View {
+import { Color } from '@nativescript/core';
+import { BoxType, CheckBoxBase, checkedProperty, fillColorProperty, tintColorProperty } from './common';
+export class CheckBox extends CheckBoxBase {
     constructor() {
-        super();
+        super(...arguments);
+        this.ignoreChange = false;
     }
-    set boxType(value) {
-        this._boxType = value;
-    }
-    get boxType() {
-        return this._boxType;
-    }
-    get checkStyle() {
-        return this._checkStyle;
-    }
-    set checkStyle(style) {
-        this._checkStyle = style;
-    }
-    set checkPadding(padding) {
-        this._checkPadding = padding;
-    }
-    get checkPadding() {
-        return this._checkPadding;
-    }
-    set checkPaddingLeft(padding) {
-        this._checkPaddingLeft = padding;
-    }
-    get checkPaddingLeft() {
-        return this._checkPaddingLeft;
-    }
-    set checkPaddingTop(padding) {
-        this._checkPaddingTop = padding;
-    }
-    get checkPaddingTop() {
-        return this._checkPaddingTop;
-    }
-    set checkPaddingRight(padding) {
-        this._checkPaddingRight = padding;
-    }
-    get checkPaddingRight() {
-        return this._checkPaddingRight;
-    }
-    set checkPaddingBottom(padding) {
-        this._checkPaddingBottom = padding;
-    }
-    get checkPaddingBottom() {
-        return this._checkPaddingBottom;
-    }
-    [checkedProperty.getDefault]() {
-        return false;
-    }
     [checkedProperty.setNative](value) {
-        this.nativeViewProtected.setChecked(Boolean(value));
+        this.ignoreChange = true;
+        this.nativeViewProtected.setChecked(value);
+        this.ignoreChange = false;
     }
-    [textProperty.getDefault]() {
-        return '';
-    }
-    [textProperty.setNative](value) {
-        this.nativeViewProtected.setText(java.lang.String.valueOf(value));
-    }
-    [fontSizeProperty.getDefault]() {
-        return { nativeSize: this.nativeViewProtected.getTextSize() };
-    }
-    [fontSizeProperty.setNative](value) {
-        if (typeof value === 'number') {
-            this.nativeViewProtected.setTextSize(value);
-        }
-        else {
-            this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
-        }
-    }
-    get fontSize() {
-        return this.style.fontSize;
-    }
-    set fontSize(size) {
-        this.style.fontSize = size;
-    }
     [fillColorProperty.setNative](value) {
@@ -107,9 +21,8 @@ const color = !value || value instanceof Color ? value : new Color(value);
     createNativeView() {
-        var _a;
         let view;
         if (BoxType[this.boxType] === BoxType.circle) {
-            view = new androidx.appcompat.widget.AppCompatRadioButton(this._context, null);
+            view = new androidx.appcompat.widget.AppCompatRadioButton(this._context);
         }
         else {
-            view = new androidx.appcompat.widget.AppCompatCheckBox(this._context, null);
+            view = new androidx.appcompat.widget.AppCompatCheckBox(this._context);
         }
@@ -145,15 +58,4 @@ if (this.checkPaddingLeft) {
         }
-        if (this.style.color) {
-            view.setTextColor(this.style.color.android);
-        }
-        if (!this.style.fontSize) {
-            this.style.fontSize = 14;
-        }
-        view.setTextSize(this.style.fontSize);
-        const typeface = (_a = this.style.fontInternal) === null || _a === void 0 ? void 0 : _a.getAndroidTypeface();
-        if (typeface) {
-            view.setTypeface(typeface);
-        }
-        if (this._checkStyle) {
-            const drawable = this._context.getResources().getIdentifier(this._checkStyle, 'drawable', this._context.getPackageName());
+        if (this.checkStyle) {
+            const drawable = this._context.getResources().getIdentifier(this.checkStyle, 'drawable', this._context.getPackageName());
             view.setButtonDrawable(drawable);
@@ -167,4 +69,6 @@ }
             onCheckedChanged: (sender, isChecked) => {
-                if (that.get()) {
-                    checkedProperty.nativeValueChange(that.get(), isChecked);
+                const owner = that.get();
+                if (owner && !owner.ignoreChange) {
+                    console.log('onCheckedChanged', isChecked);
+                    checkedProperty.nativeValueChange(owner, isChecked);
                 }
@@ -180,25 +84,3 @@ }
     }
-    _onCheckedPropertyChanged(checkbox, oldValue, newValue) {
-        if (!this.nativeViewProtected) {
-            return;
-        }
-        checkedProperty.nativeValueChange(this, newValue);
-    }
-    _onTextPropertyChanged(checkbox, oldValue, newValue) {
-        if (!this.nativeViewProtected) {
-            return;
-        }
-        textProperty.nativeValueChange(this, newValue);
-    }
 }
-function onCheckedPropertyChanged(checkbox, oldValue, newValue) {
-    checkbox._onCheckedPropertyChanged(checkbox, oldValue, newValue);
-}
-function onTextPropertyChanged(checkbox, oldValue, newValue) {
-    checkbox._onTextPropertyChanged(checkbox, oldValue, newValue);
-}
-checkedProperty.register(CheckBox);
-textProperty.register(CheckBox);
-fillColorProperty.register(Style);
-tintColorProperty.register(Style);
 //# sourceMappingURL=index.android.js.map

index.ios.d.ts

@@ -1,12 +0,9 @@
-import { Button } from '@nativescript/core';
-import { CheckBoxInterface } from '.';
-export declare class CheckBox extends Button implements CheckBoxInterface {
-    checked: boolean;
-    boxType: number;
-    _onCheckColor: string;
-    _checkBoxBackgroundColor: any;
-    _onTintColor: string;
-    _tintColor: string;
-    _onFillColor: string;
-    _fillColor: string;
+import { Color } from '@nativescript/core';
+import { CheckBoxBase } from './common';
+export declare class CheckBox extends CheckBoxBase {
+    boxType: BEMBoxType;
+    onCheckColor: string | Color;
+    checkBoxBackgroundColor: string | Color;
+    onTintColor: string | Color;
+    onFillColor: string | Color;
     _iosCheckbox: BEMCheckBox;
@@ -16,3 +13,2 @@ private _delegate;
     private _hideBox;
-    private _boxType;
     private _tint;
@@ -23,8 +19,2 @@ private _animationDuration;
     createNativeView(): UIButton;
-    set fillColor(color: string);
-    set onFillColor(color: string);
-    set tintColor(color: string);
-    set onTintColor(color: string);
-    set checkBoxBackgroundColor(color: any);
-    set onCheckColor(color: string);
     set checkedAnimated(value: boolean);
@@ -43,3 +33,2 @@ set lineWidth(value: number);
     private _getAnimationType;
-    _onCheckedPropertyChanged(checkbox: CheckBox, oldValue: any, newValue: any): void;
 }

index.ios.js

 import { Button, Color, CssProperty, Property, Style, booleanConverter } from '@nativescript/core';
-import { BoxType } from './common';
+import { BoxType, CheckBoxBase, checkedProperty, cssProperty, fillColorProperty, tintColorProperty } from './common';
 const checkBoxBackgroundColorProperty = new CssProperty({
@@ -14,7 +14,2 @@ name: 'checkBoxBackgroundColor',
 });
-const tintColorProperty = new CssProperty({
-    name: 'tintColor',
-    cssName: 'tint-color',
-    valueConverter: (v) => String(v)
-});
 const onTintColorProperty = new CssProperty({
@@ -25,13 +20,7 @@ name: 'onTintColor',
 });
-const fillColorProperty = new CssProperty({
-    name: 'fillColor',
-    cssName: 'fill-color',
+const onFillColorProperty = new CssProperty({
+    name: 'onFillColor',
+    cssName: 'on-fill-color',
     valueConverter: (v) => String(v)
 });
-const checkedProperty = new Property({
-    name: 'checked',
-    defaultValue: false,
-    valueConverter: booleanConverter,
-    valueChanged: onCheckedPropertyChanged
-});
 const boxTypeProperty = new Property({
@@ -41,3 +30,7 @@ name: 'boxType',
 });
-export class CheckBox extends Button {
+function getIOSColor(value) {
+    var _a;
+    return (_a = (!value || value instanceof Color ? value : new Color(value))) === null || _a === void 0 ? void 0 : _a.ios;
+}
+export class CheckBox extends CheckBoxBase {
     constructor() {
@@ -53,26 +46,17 @@ super(...arguments);
     }
-    set fillColor(color) {
-        this._fillColor = color;
-        this._iosCheckbox.onFillColor = new Color(color).ios;
+    [fillColorProperty.setNative](value) {
+        this._iosCheckbox.onFillColor = getIOSColor(value);
     }
-    set onFillColor(color) {
-        this._onFillColor = color;
-        this._iosCheckbox.onFillColor = new Color(color).ios;
+    [onFillColorProperty.setNative](value) {
+        this._iosCheckbox.onFillColor = getIOSColor(value);
     }
-    set tintColor(color) {
-        this._tintColor = color;
-        this._iosCheckbox.tintColor = new Color(color).ios;
+    [tintColorProperty.setNative](value) {
+        this._iosCheckbox.tintColor = getIOSColor(value);
     }
-    set onTintColor(color) {
-        this._onTintColor = color;
-        this._iosCheckbox.onTintColor = new Color(color).ios;
+    [onCheckColorProperty.setNative](value) {
+        this._iosCheckbox.onCheckColor = getIOSColor(value);
     }
-    set checkBoxBackgroundColor(color) {
-        this._checkBoxBackgroundColor = color;
-        this._iosCheckbox.offFillColor = new Color(color).ios;
+    [checkBoxBackgroundColorProperty.setNative](value) {
+        this._iosCheckbox.offFillColor = getIOSColor(value);
     }
-    set onCheckColor(color) {
-        this._onCheckColor = color;
-        this._iosCheckbox.onCheckColor = new Color(color).ios;
-    }
     [boxTypeProperty.setNative](value) {
@@ -83,5 +67,2 @@ if (this.nativeViewProtected) {
     }
-    [checkedProperty.getDefault]() {
-        return false;
-    }
     [checkedProperty.setNative](value) {
@@ -145,17 +126,2 @@ this._iosCheckbox.setOnAnimated(value, true);
         this.style.textAlignment = 'left';
-        if (this._onCheckColor) {
-            this._iosCheckbox.onCheckColor = new Color(this._onCheckColor).ios;
-        }
-        if (this._onFillColor) {
-            this._iosCheckbox.onFillColor = new Color(this._onFillColor).ios;
-        }
-        if (this._onTintColor) {
-            this._iosCheckbox.onTintColor = new Color(this._onTintColor).ios;
-        }
-        if (this._fillColor) {
-            this._iosCheckbox.onFillColor = new Color(this._fillColor).ios;
-        }
-        if (this._tintColor) {
-            this._iosCheckbox.tintColor = new Color(this._tintColor).ios;
-        }
         if (typeof this._lineWidth !== 'undefined') {
@@ -204,9 +170,15 @@ this.lineWidth = this._lineWidth;
     }
-    _onCheckedPropertyChanged(checkbox, oldValue, newValue) {
-        if (!this._iosCheckbox) {
-            return;
-        }
-        checkedProperty.nativeValueChange(this, newValue);
-    }
 }
+__decorate([
+    cssProperty
+], CheckBox.prototype, "onCheckColor", void 0);
+__decorate([
+    cssProperty
+], CheckBox.prototype, "checkBoxBackgroundColor", void 0);
+__decorate([
+    cssProperty
+], CheckBox.prototype, "onTintColor", void 0);
+__decorate([
+    cssProperty
+], CheckBox.prototype, "onFillColor", void 0);
 var BEMCheckBoxDelegateImpl = /** @class */ (function (_super) {
@@ -245,8 +217,5 @@ __extends(BEMCheckBoxDelegateImpl, _super);
 boxTypeProperty.register(CheckBox);
-checkedProperty.register(CheckBox);
-fillColorProperty.register(Style);
 onTintColorProperty.register(Style);
 onCheckColorProperty.register(Style);
 checkBoxBackgroundColorProperty.register(Style);
-tintColorProperty.register(Style);
 //# sourceMappingURL=index.ios.js.map

package.json

 {
     "name": "@nativescript-community/ui-checkbox",
-    "version": "2.0.7",
+    "version": "2.0.8",
     "description": "NativeScript plugin for checkbox.",
@@ -59,3 +59,3 @@ "main": "./index",
     "readmeFilename": "README.md",
-    "gitHead": "0387388a73add30cf49ca4535aa0dead97a64047"
+    "gitHead": "8e60798b9a3d882a8c1edcc731dd4a8ddf755d97"
 }

platforms/android/native-api-usage.json

 {
     "uses": [
-        "androidx.appcompat.widget:AppCompatCheckBox*"
+        "androidx.appcompat.widget:AppCompatCheckBox*",
+        "android.widget:CompoundButton*"
     ]
 }

No alert changes

Worsened metrics

Total package byte prevSize

81452

decreased by-7.77%

Lines of code

885

decreased by-12.46%

No dependency changes