Skip to content

Commit c8cd581

Browse files
author
vakrilov
committed
Migrate to NS 3 and Typescript
1 parent 6c7a241 commit c8cd581

14 files changed

+263
-348
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,4 +206,6 @@ nativescript-fab.sln
206206

207207
# Demo application build files
208208
demo/platforms/*
209-
demo/lib/*
209+
demo/lib/*
210+
211+
/*.js

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ nativescript-fab.sln
77
demo/
88
screens/
99

10+
*.ts
11+
!*.d.ts

‎demo/app/app.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
var application = require("application");
2-
application.mainModule = "main-page";
3-
//application.mainModule = "multifab";
4-
application.cssFile = "./app.css";
5-
application.start();
2+
// application.start("multifab");
3+
application.start("main-page");

‎demo/app/main-page.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ var users = [
2424
{ name: 'William' },
2525
{ name: 'Franklin' }
2626
];
27-
var viewModel = new observable.Observable({
27+
var viewModel = observable.fromObject({
2828
users: new observableArrayModule.ObservableArray(users)
2929
});
3030

‎demo/package.json

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
{
22
"nativescript": {
33
"id": "org.nativescript.floatingactionbutton",
4-
"tns-android": {
5-
"version": "2.5.0"
6-
},
74
"tns-ios": {
8-
"version": "2.5.0"
5+
"version": "3.0.0-rc.1-2017-3-28-2"
96
}
107
},
118
"dependencies": {
129
"nativescript-floatingactionbutton": "file:..",
13-
"tns-core-modules": "latest"
10+
"tns-core-modules": "^3.0.0 || ^3.0.0-rc.1"
1411
},
1512
"devDependencies": {
1613
"babel-traverse": "6.24.1",
1714
"babel-types": "6.24.1",
1815
"babylon": "6.17.0",
1916
"lazy": "1.0.11"
2017
}
21-
}
18+
}

‎fab-common.js renamed to ‎fab-common.ts

Lines changed: 48 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,44 @@
77
* https://github.com/bradmartin
88
* Pull requests are welcome. Enjoy!
99
*************************************************************************************/
10-
11-
var view = require("ui/core/view");
12-
var color = require("color");
13-
var frameModule = require("ui/frame");
14-
var dObservable = require("ui/core/dependency-observable");
15-
var proxy = require("ui/core/proxy");
16-
17-
var FloatingActionButton = (function (_super) {
18-
global.__extends(FloatingActionButton, _super);
19-
20-
function FloatingActionButton() {
21-
_super.call(this);
22-
23-
this.swipeEventAttached = false;
24-
25-
this.getDurationDefault = function (animationType) {
26-
switch (animationType) {
27-
case "scale":
28-
return 100;
29-
default:
30-
return 300;
31-
}
32-
};
10+
import * as definitions from "./index";
11+
import { View, Property } from "ui/core/view";
12+
import { Color } from "color";
13+
import { PanGestureEventData } from "ui/gestures";
14+
15+
export class FloatingActionButtonBase extends View implements definitions.Fab {
16+
17+
private swipeEventAttached: boolean = false;
18+
public hideOnSwipeOfView: string;
19+
public swipeAnimation: "slideUp" | "slideDown" | "slideRight" | "slideLeft" | "scale";
20+
public hideAnimationDuration: number;
21+
22+
public rippleColor: Color;
23+
public icon: string;
24+
public backColor: Color;
25+
26+
getDurationDefault(animationType: string) {
27+
switch (animationType) {
28+
case "scale":
29+
return 100;
30+
default:
31+
return 300;
32+
}
3333
}
3434

35-
36-
FloatingActionButton.prototype.onLoaded = function () {
37-
_super.prototype.onLoaded.call(this);
35+
onLoaded() {
36+
super.onLoaded()
3837

3938
if (this.swipeEventAttached === false) {
4039
var fab = this;
41-
var viewToAttachTo = this.hideOnSwipeOfView;
42-
if (viewToAttachTo !== undefined) {
43-
var swipeItem = this.page.getViewById(viewToAttachTo);
40+
if (this.hideOnSwipeOfView !== undefined) {
41+
var swipeItem = this.page.getViewById(this.hideOnSwipeOfView);
4442
var animationType = (this.swipeAnimation) ? this.swipeAnimation : "slideDown"
4543

4644
if (swipeItem !== undefined) {
4745
var duration = (this.hideAnimationDuration) ? this.hideAnimationDuration : this.getDurationDefault(animationType);
4846

49-
swipeItem.on("pan", function (args) {
47+
swipeItem.on("pan", (args: PanGestureEventData) => {
5048
//Swipe up
5149
if (args.deltaY < -10) {
5250
switch (animationType) {
@@ -163,40 +161,25 @@ var FloatingActionButton = (function (_super) {
163161
}
164162
}
165163
};
164+
}
166165

167-
Object.defineProperty(FloatingActionButton.prototype, "rippleColor", {
168-
get: function () {
169-
return this._getValue(FloatingActionButton.rippleColorProperty);
170-
},
171-
set: function (value) {
172-
this._setValue(FloatingActionButton.rippleColorProperty, value);
173-
}
174-
});
175166

176-
Object.defineProperty(FloatingActionButton.prototype, "backColor", {
177-
get: function () {
178-
return this._getValue(FloatingActionButton.backColorProperty);
179-
},
180-
set: function (value) {
181-
this._setValue(FloatingActionButton.backColorProperty, value);
182-
}
183-
});
184-
185-
Object.defineProperty(FloatingActionButton.prototype, "icon", {
186-
get: function () {
187-
return this._getValue(FloatingActionButton.iconProperty);
188-
},
189-
set: function (value) {
190-
this._setValue(FloatingActionButton.iconProperty, value);
191-
}
192-
});
193-
194-
FloatingActionButton.backColorProperty = new dObservable.Property("backColor", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
195-
FloatingActionButton.iconProperty = new dObservable.Property("icon", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
196-
FloatingActionButton.rippleColorProperty = new dObservable.Property("rippleColor", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
197-
198-
199-
return FloatingActionButton;
200-
})(view.View);
201-
202-
exports.Fab = FloatingActionButton;
167+
export const backColorProperty = new Property<FloatingActionButtonBase, Color>({
168+
name: "backColor",
169+
equalityComparer: Color.equals,
170+
valueConverter: (v) => new Color(v),
171+
valueChanged: (fab, oldValue, newValue) => {
172+
fab.style.backgroundColor = newValue
173+
}
174+
});
175+
backColorProperty.register(FloatingActionButtonBase);
176+
177+
export const iconProperty = new Property<FloatingActionButtonBase, string>({
178+
name: "icon", affectsLayout: true
179+
});
180+
iconProperty.register(FloatingActionButtonBase);
181+
182+
export const rippleColorProperty = new Property<FloatingActionButtonBase, Color>({
183+
name: "rippleColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v)
184+
});
185+
rippleColorProperty.register(FloatingActionButtonBase);

‎fab.android.js

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎fab.android.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { FloatingActionButtonBase, backColorProperty, rippleColorProperty, iconProperty } from "./fab-common";
2+
import * as style from "ui/styling/style";
3+
import * as utils from "utils/utils";
4+
import { Color } from "color";
5+
import * as ImageSource from "image-source";
6+
import { backgroundColorProperty, backgroundInternalProperty } from "ui/core/view";
7+
8+
declare var android: any;
9+
10+
export class Fab extends FloatingActionButtonBase {
11+
public static tapEvent = "tap";
12+
13+
public createNativeView() {
14+
const btn = new android.support.design.widget.FloatingActionButton(this._context);
15+
let that = new WeakRef(this);
16+
btn.setOnClickListener(new android.view.View.OnClickListener({
17+
get owner() {
18+
return that.get();
19+
},
20+
21+
onClick: function (v) {
22+
if (this.owner) {
23+
this.owner._emit("tap");
24+
}
25+
}
26+
}));
27+
28+
return btn;
29+
};
30+
31+
[backColorProperty.setNative](value: Color) {
32+
this.nativeView.setBackgroundTintList(android.content.res.ColorStateList.valueOf(value.android));
33+
}
34+
35+
[backgroundColorProperty.getDefault](): android.content.res.ColorStateList {
36+
return this.nativeView.getBackgroundTintList();
37+
}
38+
39+
[backgroundColorProperty.setNative](value: Color | android.content.res.ColorStateList) {
40+
let newValue: android.content.res.ColorStateList;
41+
if (value instanceof Color) {
42+
newValue = android.content.res.ColorStateList.valueOf(value.android);
43+
} else {
44+
// Resetting with the default value;
45+
newValue = value;
46+
}
47+
this.nativeView.setBackgroundTintList(newValue);
48+
}
49+
50+
[backgroundInternalProperty.setNative](value: any) {
51+
//NOOP
52+
}
53+
54+
[rippleColorProperty.setNative](value: Color) {
55+
this.nativeView.setRippleColor(value.android);
56+
}
57+
58+
[iconProperty.setNative](value: any) {
59+
let iconDrawable = null;
60+
61+
if (ImageSource.isFileOrResourcePath(value)) {
62+
iconDrawable = ImageSource.fromFileOrResource(value);
63+
if (iconDrawable) {
64+
this.nativeView.setImageBitmap(iconDrawable.android);
65+
} else {
66+
console.log("The icon: " + value + " was not found. Check your XML icon property.");
67+
}
68+
} else {
69+
const drawableId = android.content.res.Resources.getSystem().getIdentifier(value, "drawable", "android");
70+
iconDrawable = android.content.res.Resources.getSystem().getDrawable(drawableId);
71+
72+
if (iconDrawable) {
73+
this.nativeView.setImageDrawable(iconDrawable);
74+
} else {
75+
console.log("The icon: " + value + " was not found. Check your XML icon property.");
76+
}
77+
}
78+
}
79+
}

0 commit comments

Comments
 (0)