Boxtype fix [IOS]

Author: triniwiz

checkbox.ios.ts

@@ -57,6 +57,13 @@ const checkedProperty = new Property<CheckBox, boolean>({
   valueChanged: onCheckedPropertyChanged
 });
 
+const boxTypeProperty = new Property<CheckBox, number>({
+  name: "boxType",
+  valueConverter: v => {
+    return parseInt(v, 10);
+  }
+});
+
 export class CheckBox extends Button implements CheckBoxInterface {
   _onCheckColor: string;
   _checkBoxBackgroundColor: any;
@@ -74,7 +81,7 @@ export class CheckBox extends Button implements CheckBoxInterface {
   private _onAnimationType: number;
   private _offAnimationType: number;
   public checked: boolean;
-
+  public boxType: number;
   constructor() {
     super();
     // just create with any width/height as XML view width/height is undefined at this point
@@ -114,6 +121,18 @@ 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;
+    }
+    this._iosCheckbox.boxType = type;
+  }
+
   [checkedProperty.getDefault](): boolean {
     return false;
   }
@@ -136,15 +155,6 @@ export class CheckBox extends Button implements CheckBoxInterface {
     this._hideBox = value;
   }
 
-  set boxType(value: number) {
-    let type = BEMBoxType.Circle;
-    if (value === 2) {
-      type = BEMBoxType.Square;
-    }
-    if (this._iosCheckbox) this._iosCheckbox.boxType = type;
-    else this._boxType = value;
-  }
-
   set animationDuration(value: number) {
     this._iosCheckbox.animationDuration = value;
     this._animationDuration = value;
@@ -306,7 +316,7 @@ class BEMCheckBoxDelegateImpl extends NSObject implements BEMCheckBoxDelegate {
 function onCheckedPropertyChanged(checkbox: CheckBox, oldValue, newValue) {
   checkbox._onCheckedPropertyChanged(checkbox, oldValue, newValue);
 }
-
+boxTypeProperty.register(CheckBox);
 checkedProperty.register(CheckBox);
 fillColorProperty.register(Style);
 onTintColorProperty.register(Style);

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

@@ -7,11 +7,11 @@
     <StackLayout *tabItem="{title: 'Checkboxes'}">
         <StackLayout class="page">
             <StackLayout orientation="horizontal" class="p-10">
-                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox" (checkedChange)="checkedChange(modelCheck)"></CheckBox>
+                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox" boxType="2" (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" class="checkbox"></CheckBox>
+                <CheckBox #reactiveCheck class="checkbox" formControlName="testCheck" boxType="2" class="checkbox"></CheckBox>
                 <Label text="Test Reactive FormGroup" (tap)="reactiveCheck.toggle()"></Label>
             </StackLayout>