Skip to content

Commit 8a08aa8

Browse files
bradmartinbradmartin
authored
Merge pull request #1 from NathanWalker/ios-support
feat(iOS): wip support
2 parents 97e6184 + 0979850 commit 8a08aa8

File tree

10 files changed

+248
-35
lines changed

10 files changed

+248
-35
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*.log
44
demo/app/*.js
55
demo/*.d.ts
6+
demo/lib
67
demo/platforms
78
demo/node_modules
89
node_modules

‎checkbox.android.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,10 @@ function onTextPropertyChanged(data: PropertyChangeData) {
107107

108108

109109
export class CheckBoxStyler implements style.Styler {
110-
private static setColorProperty(view: View, newValue: any) {
110+
private static setColorProperty(view: any, newValue: any) {
111111
var cb = <android.widget.CheckBox>view._nativeView;
112112
if (cb) {
113-
cb.setButtonTintList(android.content.res.ColorStateList.valueOf(new Color(newValue).android));
113+
(<any>cb).setButtonTintList(android.content.res.ColorStateList.valueOf(new Color(newValue).android));
114114
}
115115
}
116116

‎checkbox.ios.ts‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import {ContentView} from "ui/content-view";
2+
import {Color} from "color";
3+
4+
declare var BEMCheckBox: any, CGRectMake: any, BEMBoxType: any, BEMAnimationType: any;
5+
6+
export class CheckBox extends ContentView {
7+
private _ios: any;
8+
private _checked: boolean;
9+
private _lineWidth: number;
10+
private _hideBox: boolean;
11+
private _boxType: number;
12+
private _tint: string;
13+
private _onCheckColor: string;
14+
private _onFillColor: string;
15+
private _onTintColor: string;
16+
private _animationDuration: number;
17+
private _onAnimationType: number;
18+
private _offAnimationType: number;
19+
20+
constructor() {
21+
super();
22+
// just create with any width/height as XML view width/height is undefined at this point
23+
// we modify width/height later below in onLoaded
24+
this._ios = BEMCheckBox.alloc().initWithFrame(CGRectMake(0, 0, 50, 50));
25+
}
26+
27+
get _nativeView(): any {
28+
return this._ios;
29+
}
30+
31+
get checked(): boolean {
32+
if (this._ios)
33+
return this._ios.on;
34+
else
35+
return false;
36+
}
37+
38+
set checked(value: boolean) {
39+
if (this._ios)
40+
this._ios.on = value;
41+
else
42+
this._checked = value;
43+
}
44+
45+
set checkedAnimated(value: boolean) {
46+
if (this._ios)
47+
this._ios.setOnAnimated(value, true);
48+
}
49+
50+
set lineWidth(value: number) {
51+
if (this._ios)
52+
this._ios.lineWidth = value;
53+
else
54+
this._lineWidth = value;
55+
}
56+
57+
set hideBox(value: boolean) {
58+
if (this._ios)
59+
this._ios.hideBox = value;
60+
else
61+
this._hideBox = value;
62+
}
63+
64+
set boxType(value: number) {
65+
let type = BEMBoxType.BEMBoxTypeCircle;
66+
if (value === 2) {
67+
type = BEMBoxType.BEMBoxTypeSquare;
68+
}
69+
if (this._ios)
70+
this._ios.boxType = type;
71+
else
72+
this._boxType = value;
73+
}
74+
75+
set tint(color: string) {
76+
if (this._ios)
77+
this._ios.tintColor = new Color(color).ios;
78+
else
79+
this._tint = color;
80+
}
81+
82+
set onCheckColor(color: string) {
83+
if (this._ios)
84+
this._ios.onCheckColor = new Color(color).ios;
85+
else
86+
this._onCheckColor = color;
87+
}
88+
89+
set onFillColor(color: string) {
90+
if (this._ios)
91+
this._ios.onFillColor = new Color(color).ios;
92+
else
93+
this._onFillColor = color;
94+
}
95+
96+
set onTintColor(color: string) {
97+
if (this._ios)
98+
this._ios.onTintColor = new Color(color).ios;
99+
else
100+
this._onTintColor = color;
101+
}
102+
103+
set animationDuration(value: number) {
104+
if (this._ios)
105+
this._ios.animationDuration = value;
106+
else
107+
this._animationDuration = value;
108+
}
109+
110+
set onAnimationType(value: number) {
111+
if (this._ios)
112+
this._ios.onAnimationType = this.getAnimationType(value);
113+
else
114+
this._onAnimationType = value;
115+
}
116+
117+
set offAnimationType(value: number) {
118+
if (this._ios)
119+
this._ios.offAnimationType = this.getAnimationType(value);
120+
else
121+
this._offAnimationType = value;
122+
}
123+
124+
public reload(value: boolean) {
125+
this._ios.reload();
126+
}
127+
128+
public onLoaded() {
129+
console.log(`onLoaded`);
130+
// Only here is where the view xml width/height is defined
131+
console.log(this.width + ', ' + this.height);
132+
this._ios.frame.size.width = this.width;
133+
this._ios.frame.size.height = this.height;
134+
// console.log(this._ios);
135+
136+
if (typeof this._checked !== 'undefined') {
137+
this.checked = this._checked;
138+
}
139+
if (typeof this._lineWidth !== 'undefined') {
140+
this.lineWidth = this._lineWidth;
141+
}
142+
if (typeof this._hideBox !== 'undefined') {
143+
this.hideBox = this._hideBox;
144+
}
145+
if (typeof this._boxType !== 'undefined') {
146+
this.boxType = this._boxType;
147+
}
148+
if (typeof this._tint !== 'undefined') {
149+
this.tint = this._tint;
150+
}
151+
if (typeof this._onCheckColor !== 'undefined') {
152+
this.onCheckColor = this._onCheckColor;
153+
}
154+
if (typeof this._onFillColor !== 'undefined') {
155+
this.onFillColor = this._onFillColor;
156+
}
157+
if (typeof this._onTintColor !== 'undefined') {
158+
this.onTintColor = this._onTintColor;
159+
}
160+
if (typeof this._animationDuration !== 'undefined') {
161+
this.animationDuration = this._animationDuration;
162+
}
163+
if (typeof this._onAnimationType !== 'undefined') {
164+
this.onAnimationType = this._onAnimationType;
165+
}
166+
if (typeof this._offAnimationType !== 'undefined') {
167+
this.offAnimationType = this._offAnimationType;
168+
}
169+
}
170+
171+
private getAnimationType(value: number) {
172+
switch (value) {
173+
case 1:
174+
return BEMAnimationType.BEMAnimationTypeStroke;
175+
case 2:
176+
return BEMAnimationType.BEMAnimationTypeFill;
177+
case 3:
178+
return BEMAnimationType.BEMAnimationTypeBounce;
179+
case 4:
180+
return BEMAnimationType.BEMAnimationTypeFlat;
181+
case 5:
182+
return BEMAnimationType.BEMAnimationTypeOneStroke;
183+
case 6:
184+
return BEMAnimationType.BEMAnimationTypeFade;
185+
}
186+
}
187+
}

‎demo/app/main-page.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ActionBar title="Native Checkbox" />
55
<StackLayout padding="10">
66
<Button text="Toggle" tap="{{ toggleCheck }}" />
7-
<CheckBox:CheckBox checked="{{ checkProp }}" text="{{ myCheckText }}" color="{{ myCheckColor }}" id="myCheckbox" />
8-
<CheckBox:CheckBox text="CheckBox Label" checked="false" />
7+
<CheckBox:CheckBox checked="{{ checkProp }}" text="{{ myCheckText }}" color="{{ myCheckColor }}" id="myCheckbox" width="50" height="50" marginBottom="10" lineWidth="3" onAnimationType="3" />
8+
<CheckBox:CheckBox text="CheckBox Label" checked="false" width="100" height="100" boxType="2" />
99
</StackLayout>
1010
</Page>

‎demo/app/main-view-model.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
11
import { Page } from 'ui/page';
22
import { Color } from 'color';
33
import { Observable } from 'data/observable';
4+
import * as app from 'application';
45
import { CheckBox } from 'nativescript-checkbox';
56

67
export class HelloWorldModel extends Observable {
78
public checkProp: boolean;
89
public myCheckText: string;
910
public myCheckColor: string;
10-
private _myCheckbox: CheckBox;
11+
private _myCheckbox: any;
1112

1213
constructor(mainPage: Page) {
1314
super();
1415
this.checkProp = false;
1516
this.myCheckText = 'Remember Me?';
1617
this.myCheckColor = '#3489db';
17-
this._myCheckbox = <CheckBox>mainPage.getViewById('myCheckbox');
18+
this._myCheckbox = <any>mainPage.getViewById('myCheckbox');
1819
}
1920

2021
public toggleCheck() {
2122
if (this._myCheckbox.checked === true) {
22-
this._myCheckbox.checked = false;
23+
if (app.ios) {
24+
this._myCheckbox.checkedAnimated = false;
25+
} else {
26+
this._myCheckbox.checked = false;
27+
}
2328
this.set('myCheckText', 'Remember Me?');
2429
this.set('myCheckColor', '#ff4801');
2530
} else {
26-
this._myCheckbox.checked = true;
31+
if (app.ios) {
32+
this._myCheckbox.checkedAnimated = true;
33+
} else {
34+
this._myCheckbox.checked = false;
35+
}
2736
this.set('myCheckText', 'That\'s better :)');
2837
this.set('myCheckColor', '#009688');
2938
}

‎demo/package.json‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
{
2-
"nativescript": {
3-
"id": "org.nativescript.demo",
4-
"tns-ios": {
5-
"version": "2.0.0"
6-
},
7-
"tns-android": {
8-
"version": "2.1.1"
9-
}
10-
},
11-
"dependencies": {
12-
"nativescript-checkbox": "file:..",
13-
"tns-core-modules": "^2.0.0"
14-
},
15-
"devDependencies": {
16-
"babel-traverse": "6.7.6",
17-
"babel-types": "6.7.7",
18-
"babylon": "6.7.0",
19-
"filewalker": "0.1.2",
20-
"lazy": "1.0.11",
21-
"nativescript-dev-typescript": "^0.3.2",
22-
"typescript": "^1.8.10"
23-
}
24-
}
2+
"nativescript": {
3+
"id": "org.nativescript.demo",
4+
"tns-ios": {
5+
"version": "2.1.1"
6+
},
7+
"tns-android": {
8+
"version": "2.1.1"
9+
}
10+
},
11+
"dependencies": {
12+
"nativescript-checkbox": "file:..",
13+
"tns-core-modules": "^2.0.0"
14+
},
15+
"devDependencies": {
16+
"babel-traverse": "6.7.6",
17+
"babel-types": "6.7.7",
18+
"babylon": "6.7.0",
19+
"filewalker": "0.1.2",
20+
"lazy": "1.0.11",
21+
"nativescript-dev-typescript": "^0.3.2",
22+
"typescript": "^1.8.10"
23+
}
24+
}

‎demo/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"target": "es5",
55
"sourceMap": true,
66
"experimentalDecorators": true,
7-
"noEmitHelpers": true
7+
"noEmitHelpers": true,
8+
"noEmitOnError": false
89
},
910
"exclude": [
1011
"node_modules",

‎package.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "checkbox.js",
66
"nativescript": {
77
"platforms": {
8-
"android": "2.0.0"
8+
"android": "2.1.1",
9+
"ios": "2.1.1"
910
}
1011
},
1112
"scripts": {
@@ -33,6 +34,13 @@
3334
"name": "Brad Martin",
3435
"email": "[email protected]"
3536
},
37+
"contributors": [
38+
{
39+
"name": "Nathan Walker",
40+
"email": "[email protected]",
41+
"url": "https://github.com/NathanWalker"
42+
}
43+
],
3644
"bugs": {
3745
"url": "https://github.com/bradmartin/nativescript-checkbox/issues"
3846
},
@@ -43,6 +51,7 @@
4351
"homepage": "https://github.com/bradmartin/nativescript-checkbox",
4452
"readmeFilename": "README.md",
4553
"devDependencies": {
54+
"tns-platform-declarations": "^2.0.0",
4655
"typescript": "^1.8.10"
4756
}
4857
}

‎platforms/ios/Podfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
pod 'BEMCheckBox'

‎tsconfig.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@
44
"module": "commonjs",
55
"removeComments": true,
66
"experimentalDecorators": true,
7-
"sourceMap": true
7+
"sourceMap": false,
8+
"noEmitHelpers": true,
9+
"noEmitOnError": false
810
},
911
"files": [
1012
"demo/node_modules/tns-core-modules/tns-core-modules.d.ts",
11-
"checkbox.android.ts"
13+
"node_modules/tns-platform-declarations/android17.d.ts",
14+
"node_modules/tns-platform-declarations/ios.d.ts",
15+
"checkbox.android.ts",
16+
"checkbox.ios.ts"
1217
],
1318
"compileOnSave": false
1419
}

0 commit comments

Comments
 (0)