From e1f0bea515e332f86f918c1fd17ce9e1aa8ea8e5 Mon Sep 17 00:00:00 2001 From: EddyVerbruggen Date: Thu, 5 Oct 2017 09:11:26 +0200 Subject: [PATCH 1/2] boxType --- README.md | 4 ++-- checkbox-common.ts | 4 ++++ checkbox.android.ts | 15 ++++++-------- checkbox.ios.ts | 24 ++++++++++------------- demo-ng/app/item/items.component.html | 7 ++++--- demo-ng/package.json | 7 +++++++ demo/app/main-page.css | 2 +- demo/app/main-page.xml | 4 ++-- index.d.ts | 28 +++++++++++++-------------- package.json | 2 +- 10 files changed, 50 insertions(+), 47 deletions(-) create mode 100644 checkbox-common.ts diff --git a/README.md b/README.md index f0c4b62..4876349 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ export class SomeComponent { - **checked** - boolean - **text** - text to use with the checkbox - **fillColor** - Color of the checkbox element +- **boxType** - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. ## Events @@ -130,8 +131,7 @@ Add the following to `app/App_Resources/Android/drawable/checkbox_grey.xml` ## Radiobuttons, anyone? Want to use radiobutton behavior for your checkboxes (only one option possible within a group)? - -Check out the second tab in the [Angular demo](demo-ng/), here's a screenshot: +Set `boxType="circle"` and check out the second tab in the [Angular demo](demo-ng/), here's a screenshot: diff --git a/checkbox-common.ts b/checkbox-common.ts new file mode 100644 index 0000000..c1f3cf1 --- /dev/null +++ b/checkbox-common.ts @@ -0,0 +1,4 @@ +export enum BoxType { + circle = "circle", + square = "square" +} diff --git a/checkbox.android.ts b/checkbox.android.ts index 0fe4236..541e600 100644 --- a/checkbox.android.ts +++ b/checkbox.android.ts @@ -1,7 +1,6 @@ import { Color } from "tns-core-modules/color"; import { device } from "tns-core-modules/platform"; import app = require("tns-core-modules/application"); -import { CheckBoxInterface } from "."; import { View, Property, @@ -9,6 +8,9 @@ import { Style, booleanConverter } from "tns-core-modules/ui/core/view"; +import { CheckBoxInterface } from "."; +import { BoxType } from "./checkbox-common"; + declare const android: any, java: any; export const checkedProperty = new Property({ @@ -41,14 +43,9 @@ export const tintColorProperty = new CssProperty({ } }); -export const enum BoxType { - Circle = 1, - Square = 2 -} - export class CheckBox extends View implements CheckBoxInterface { private _android: any; /// android.widget.CheckBox - private _boxType: number; + private _boxType: string; private _checkStyle: string; private _checkPadding: string; private _checkPaddingLeft: string; @@ -64,7 +61,7 @@ export class CheckBox extends View implements CheckBoxInterface { return this._android; } - set boxType(value: number) { + set boxType(value: string) { this._boxType = value; } @@ -155,7 +152,7 @@ export class CheckBox extends View implements CheckBoxInterface { public createNativeView() { this._android = new android.support.v7.widget[ - this.boxType == BoxType.Circle + BoxType[this.boxType] === BoxType.circle ? "AppCompatRadioButton" : "AppCompatCheckBox" ](this._context, null); diff --git a/checkbox.ios.ts b/checkbox.ios.ts index 9a40e88..818e8fe 100644 --- a/checkbox.ios.ts +++ b/checkbox.ios.ts @@ -1,4 +1,5 @@ import { CheckBoxInterface } from "./index"; +import { BoxType } from "./checkbox-common"; import { Property, CssProperty, @@ -57,10 +58,12 @@ const checkedProperty = new Property({ valueChanged: onCheckedPropertyChanged }); -const boxTypeProperty = new Property({ +const boxTypeProperty = new Property({ name: "boxType", valueConverter: v => { - return parseInt(v, 10); + return BoxType[v] === BoxType.circle + ? BEMBoxType.Circle + : BEMBoxType.Square; } }); @@ -121,16 +124,10 @@ export class CheckBox extends Button implements CheckBoxInterface { this._iosCheckbox.onCheckColor = new Color(color).ios; } - [boxTypeProperty.getDefault](): number { - return 1; - } - - [boxTypeProperty.setNative](value: number) { - let type = BEMBoxType.Circle; - if (value === 2) { - type = BEMBoxType.Square; + [boxTypeProperty.setNative](value: any) { + if (this._iosCheckbox) { + this._iosCheckbox.boxType = value; } - this._iosCheckbox.boxType = type; } [checkedProperty.getDefault](): boolean { @@ -236,9 +233,8 @@ export class CheckBox extends Button implements CheckBoxInterface { if (typeof this._hideBox !== "undefined") { this.hideBox = this._hideBox; } - if (typeof this._boxType !== "undefined") { - this.boxType = this._boxType; - } + + this.boxType = this.boxType === 0 ? BEMBoxType.Circle : BEMBoxType.Square; if (typeof this._animationDuration !== "undefined") { this.animationDuration = this._animationDuration; diff --git a/demo-ng/app/item/items.component.html b/demo-ng/app/item/items.component.html index 011c732..a6eca58 100644 --- a/demo-ng/app/item/items.component.html +++ b/demo-ng/app/item/items.component.html @@ -7,11 +7,12 @@ - + + - + @@ -33,7 +34,7 @@ - + diff --git a/demo-ng/package.json b/demo-ng/package.json index d832d44..9e39bbb 100644 --- a/demo-ng/package.json +++ b/demo-ng/package.json @@ -7,6 +7,9 @@ "id": "org.nativescript.demong", "tns-ios": { "version": "3.0.1" + }, + "tns-android": { + "version": "3.2.0" } }, "dependencies": { @@ -27,6 +30,10 @@ "zone.js": "~0.8.2" }, "devDependencies": { + "babel-traverse": "6.26.0", + "babel-types": "6.26.0", + "babylon": "6.18.0", + "lazy": "1.0.11", "nativescript-dev-typescript": "~0.4.0", "typescript": "~2.2.1" } diff --git a/demo/app/main-page.css b/demo/app/main-page.css index e193322..b67a194 100644 --- a/demo/app/main-page.css +++ b/demo/app/main-page.css @@ -20,5 +20,5 @@ ListView{ .fontBig { - font-size: 40; + font-size: 30; } \ No newline at end of file diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml index bd6b3bd..119884b 100644 --- a/demo/app/main-page.xml +++ b/demo/app/main-page.xml @@ -8,11 +8,11 @@ - +