Merge pull request #63 from EddyVerbruggen/boxType

boxType iOS-Android alignment

Author: EddyVerbruggen

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. Still want `circle` on iOS and `square` on Android? Just make the `boxType` value conditional.
 
 ## 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:
 
 <img src="./screens/radiobuttons.png" width="225px"/>
 

checkbox-common.ts

@@ -0,0 +1,4 @@
+export enum BoxType {
+  circle = <any>"circle",
+  square = <any>"square"
+}

checkbox.android.ts

@@ -1,14 +1,16 @@
 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,
   CssProperty,
   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<CheckBox, boolean>({
@@ -41,14 +43,9 @@ export const tintColorProperty = new CssProperty<Style, string>({
   }
 });
 
-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);

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<CheckBox, boolean>({
   valueChanged: onCheckedPropertyChanged
 });
 
-const boxTypeProperty = new Property<CheckBox, number>({
+const boxTypeProperty = new Property<CheckBox, BEMBoxType>({
   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;

demo-ng/app/item/items.component.html

@@ -7,11 +7,12 @@
     <StackLayout *tabItem="{title: 'Checkboxes'}">
         <StackLayout class="page">
             <StackLayout orientation="horizontal" class="p-10">
-                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox" boxType="2" (checkedChange)="checkedChange(modelCheck)"></CheckBox>
+                <!-- boxType="square" is the default, just testing this works as well -->
+                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox" boxType="square" (checkedChange)="checkedChange(modelCheck)"></CheckBox>
                 <Label text="Test NgModel" (tap)="modelCheck.toggle()"></Label>
             </StackLayout>
             <StackLayout class="form-group" [formGroup]="formGroup" orientation="horizontal" class="p-10">
-                <CheckBox #reactiveCheck class="checkbox" formControlName="testCheck" boxType="2" class="checkbox"></CheckBox>
+                <CheckBox #reactiveCheck class="checkbox" formControlName="testCheck" class="checkbox"></CheckBox>
                 <Label text="Test Reactive FormGroup" (tap)="reactiveCheck.toggle()"></Label>
             </StackLayout>
 
@@ -33,7 +34,7 @@
         <Label class="p-10" text="Tap either the buttons or the labels. You can even unselect the radiobutton selection." textWrap="true"></Label>
         <StackLayout class="p-10" *ngFor="let option of radioOptions">
             <StackLayout orientation="horizontal" verticalAlignment="center">
-                <CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox"></CheckBox>
+                <CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox" boxType="circle"></CheckBox>
                 <StackLayout verticalAlignment="center">
                     <Label [text]="option.text" textWrap="true" (tap)="changeCheckedRadio(option)"></Label>
                 </StackLayout>

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"
   }

demo/app/main-page.css

@@ -20,5 +20,5 @@ ListView{
 
 
 .fontBig {
-    font-size: 40;
+    font-size: 30;
 }

demo/app/main-page.xml

@@ -8,11 +8,11 @@
                 <TabViewItem.view>
                     <ScrollView>
                         <StackLayout id="wrapper">
-                            <CheckBox:CheckBox id="fontSizeTest" boxType="2" fillColor="#fff000" onCheckColor="green" text="Font Size Test" tint="red" tintColor="red" checked="false" class="fontBig" />
+                            <CheckBox:CheckBox boxType="circle" id="fontSizeTest" fillColor="#fff000" onCheckColor="green" text="Font Size Circle Test" tint="red" tintColor="red" checked="false" class="fontBig" />
                             <Label text="Functions" class="title" />
                             <StackLayout class="listitem">
                                 <GridLayout columns="*, auto" class="demosection">
-                                    <CheckBox:CheckBox checkPadding="36" checkStyle="checkbox_grey" id="toggleTest" col="0" text="toggle()" checked="false" style="margin-right: 10" />
+                                    <CheckBox:CheckBox boxType="square" checkPadding="36" checkStyle="checkbox_grey" id="toggleTest" col="0" text="toggle()" checked="false" style="margin-right: 10" />
                                     <Button col="1" text="GO" tap="onToggleTest" class="button" />
                                 </GridLayout>
                             </StackLayout>

index.d.ts

@@ -1,34 +1,32 @@
-
 import { View } from "tns-core-modules/ui/core/view";
+
 /**
  * Represents a CheckBox component.
  */
 export declare class CheckBox extends View {
-
-    /**
+  /**
      * Gets the native [android widget](https://developer.android.com/reference/android/widget/CheckBox.html) that represents the user interface for this component. Valid only when running on Android OS.
      */
-    android: any /* android.widget.CheckBox */;
+  android: any /* android.widget.CheckBox */;
 
-    /**
+  /**
      * Gets the ios Label with the checkbox as a subview
      */
-    ios: any /* Label */;
+  ios: any /* Label */;
 
-    /**
+  /**
      * Gets or sets if a switch is checked or not.
      */
-    checked: boolean;
+  checked: boolean;
 
-    /**
+  /**
      * Change the checked state of the view to the inverse of its current state.
      */
-    toggle(): void;
-
+  toggle(): void;
 }
 
 export interface CheckBoxInterface {
-    text?: string;
-    checked: boolean;
-    toggle(): void;
-}
+  text?: string;
+  checked: boolean;
+  toggle(): void;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-checkbox",
-  "version": "2.1.15",
+  "version": "3.0.0",
   "description": "NativeScript plugin for checkbox widget.",
   "main": "checkbox",
   "typings": "index.d.ts",