Migrate to NS 3 and Typescript

Author: vakrilov

.gitignore

@@ -206,4 +206,6 @@ nativescript-fab.sln
 
 # Demo application build files
 demo/platforms/*
-demo/lib/*
+demo/lib/*
+
+/*.js

.npmignore

@@ -7,3 +7,5 @@ nativescript-fab.sln
 demo/
 screens/
 
+*.ts
+!*.d.ts

demo/app/app.js

@@ -1,5 +1,3 @@
 var application = require("application");
-application.mainModule = "main-page";
-//application.mainModule = "multifab";
-application.cssFile = "./app.css";
-application.start();
+// application.start("multifab");
+application.start("main-page");

demo/app/main-page.js

@@ -24,7 +24,7 @@ var users = [
     { name: 'William' },
     { name: 'Franklin' }
 ];
-var viewModel = new observable.Observable({
+var viewModel = observable.fromObject({
     users: new observableArrayModule.ObservableArray(users)
 });
 

demo/package.json

@@ -1,21 +1,18 @@
 {
   "nativescript": {
     "id": "org.nativescript.floatingactionbutton",
-    "tns-android": {
-      "version": "2.5.0"
-    },
     "tns-ios": {
-      "version": "2.5.0"
+      "version": "3.0.0-rc.1-2017-3-28-2"
     }
   },
   "dependencies": {
     "nativescript-floatingactionbutton": "file:..",
-    "tns-core-modules": "latest"
+    "tns-core-modules": "^3.0.0 || ^3.0.0-rc.1"
   },
   "devDependencies": {
     "babel-traverse": "6.24.1",
     "babel-types": "6.24.1",
     "babylon": "6.17.0",
     "lazy": "1.0.11"
   }
-}
+}

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

@@ -7,46 +7,44 @@
  * https://github.com/bradmartin
  * Pull requests are welcome. Enjoy!
  *************************************************************************************/
-
-var view = require("ui/core/view");
-var color = require("color");
-var frameModule = require("ui/frame");
-var dObservable = require("ui/core/dependency-observable");
-var proxy = require("ui/core/proxy");
-
-var FloatingActionButton = (function (_super) {
-    global.__extends(FloatingActionButton, _super);
-
-    function FloatingActionButton() {
-        _super.call(this);
-
-        this.swipeEventAttached = false;
-
-        this.getDurationDefault = function (animationType) {
-            switch (animationType) {
-                case "scale":
-                    return 100;
-                default:
-                    return 300;
-            }
-        };
+import * as definitions from "./index";
+import { View, Property } from "ui/core/view";
+import { Color } from "color";
+import { PanGestureEventData } from "ui/gestures";
+
+export class FloatingActionButtonBase extends View implements definitions.Fab {
+
+    private swipeEventAttached: boolean = false;
+    public hideOnSwipeOfView: string;
+    public swipeAnimation: "slideUp" | "slideDown" | "slideRight" | "slideLeft" | "scale";
+    public hideAnimationDuration: number;
+
+    public rippleColor: Color;
+    public icon: string;
+    public backColor: Color;
+
+    getDurationDefault(animationType: string) {
+        switch (animationType) {
+            case "scale":
+                return 100;
+            default:
+                return 300;
+        }
     }
 
-
-    FloatingActionButton.prototype.onLoaded = function () {
-        _super.prototype.onLoaded.call(this);
+    onLoaded() {
+        super.onLoaded()
 
         if (this.swipeEventAttached === false) {
             var fab = this;
-            var viewToAttachTo = this.hideOnSwipeOfView;
-            if (viewToAttachTo !== undefined) {
-                var swipeItem = this.page.getViewById(viewToAttachTo);
+            if (this.hideOnSwipeOfView !== undefined) {
+                var swipeItem = this.page.getViewById(this.hideOnSwipeOfView);
                 var animationType = (this.swipeAnimation) ? this.swipeAnimation : "slideDown"
 
                 if (swipeItem !== undefined) {
                     var duration = (this.hideAnimationDuration) ? this.hideAnimationDuration : this.getDurationDefault(animationType);
 
-                    swipeItem.on("pan", function (args) {
+                    swipeItem.on("pan", (args: PanGestureEventData) => {
                         //Swipe up
                         if (args.deltaY < -10) {
                             switch (animationType) {
@@ -163,40 +161,25 @@ var FloatingActionButton = (function (_super) {
             }
         }
     };
+}
 
-    Object.defineProperty(FloatingActionButton.prototype, "rippleColor", {
-        get: function () {
-            return this._getValue(FloatingActionButton.rippleColorProperty);
-        },
-        set: function (value) {
-            this._setValue(FloatingActionButton.rippleColorProperty, value);
-        }
-    });
 
-    Object.defineProperty(FloatingActionButton.prototype, "backColor", {
-        get: function () {
-            return this._getValue(FloatingActionButton.backColorProperty);
-        },
-        set: function (value) {
-            this._setValue(FloatingActionButton.backColorProperty, value);
-        }
-    });
-
-    Object.defineProperty(FloatingActionButton.prototype, "icon", {
-        get: function () {
-            return this._getValue(FloatingActionButton.iconProperty);
-        },
-        set: function (value) {
-            this._setValue(FloatingActionButton.iconProperty, value);
-        }
-    });
-
-    FloatingActionButton.backColorProperty = new dObservable.Property("backColor", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
-    FloatingActionButton.iconProperty = new dObservable.Property("icon", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
-    FloatingActionButton.rippleColorProperty = new dObservable.Property("rippleColor", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
-
-
-    return FloatingActionButton;
-})(view.View);
-
-exports.Fab = FloatingActionButton;
+export const backColorProperty = new Property<FloatingActionButtonBase, Color>({
+    name: "backColor",
+    equalityComparer: Color.equals,
+    valueConverter: (v) => new Color(v),
+    valueChanged: (fab, oldValue, newValue) => {
+        fab.style.backgroundColor = newValue
+    }
+});
+backColorProperty.register(FloatingActionButtonBase);
+
+export const iconProperty = new Property<FloatingActionButtonBase, string>({
+    name: "icon", affectsLayout: true
+});
+iconProperty.register(FloatingActionButtonBase);
+
+export const rippleColorProperty = new Property<FloatingActionButtonBase, Color>({
+    name: "rippleColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v)
+});
+rippleColorProperty.register(FloatingActionButtonBase);

fab.android.js

@@ -0,0 +1,79 @@
+import { FloatingActionButtonBase, backColorProperty, rippleColorProperty, iconProperty } from "./fab-common";
+import * as style from "ui/styling/style";
+import * as utils from "utils/utils";
+import { Color } from "color";
+import * as ImageSource from "image-source";
+import { backgroundColorProperty, backgroundInternalProperty } from "ui/core/view";
+
+declare var android: any;
+
+export class Fab extends FloatingActionButtonBase {
+    public static tapEvent = "tap";
+
+    public createNativeView() {
+        const btn = new android.support.design.widget.FloatingActionButton(this._context);
+        let that = new WeakRef(this);
+        btn.setOnClickListener(new android.view.View.OnClickListener({
+            get owner() {
+                return that.get();
+            },
+
+            onClick: function (v) {
+                if (this.owner) {
+                    this.owner._emit("tap");
+                }
+            }
+        }));
+
+        return btn;
+    };
+
+    [backColorProperty.setNative](value: Color) {
+        this.nativeView.setBackgroundTintList(android.content.res.ColorStateList.valueOf(value.android));
+    }
+
+    [backgroundColorProperty.getDefault](): android.content.res.ColorStateList {
+        return this.nativeView.getBackgroundTintList();
+    }
+
+    [backgroundColorProperty.setNative](value: Color | android.content.res.ColorStateList) {
+        let newValue: android.content.res.ColorStateList;
+        if (value instanceof Color) {
+            newValue = android.content.res.ColorStateList.valueOf(value.android);
+        } else {
+            // Resetting with the default value;
+            newValue = value;
+        }
+        this.nativeView.setBackgroundTintList(newValue);
+    }
+
+    [backgroundInternalProperty.setNative](value: any) {
+        //NOOP
+    }
+
+    [rippleColorProperty.setNative](value: Color) {
+        this.nativeView.setRippleColor(value.android);
+    }
+
+    [iconProperty.setNative](value: any) {
+        let iconDrawable = null;
+
+        if (ImageSource.isFileOrResourcePath(value)) {
+            iconDrawable = ImageSource.fromFileOrResource(value);
+            if (iconDrawable) {
+                this.nativeView.setImageBitmap(iconDrawable.android);
+            } else {
+                console.log("The icon: " + value + " was not found. Check your XML icon property.");
+            }
+        } else {
+            const drawableId = android.content.res.Resources.getSystem().getIdentifier(value, "drawable", "android");
+            iconDrawable = android.content.res.Resources.getSystem().getDrawable(drawableId);
+
+            if (iconDrawable) {
+                this.nativeView.setImageDrawable(iconDrawable);
+            } else {
+                console.log("The icon: " + value + " was not found. Check your XML icon property.");
+            }
+        }
+    }
+}