Merge pull request nstudio#3 from PeterStaev/ios-implementation

iOS implementation

Author: bradmartin

README.md

@@ -1,8 +1,6 @@
 # NativeScript-PullToRefresh :recycle:
 NativeScript plugin to use Pull to Refresh on any view. 
 
-**Android Only - PRs welcome for iOS**.
-
 #### [Android SwipeRefreshLayout](http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html)
 ##### [Material Design Indicators Spec](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
 
@@ -44,14 +42,14 @@ function refreshList(args) {
     // Get reference to the PullToRefresh;
     var pullRefresh = args.object;
 
-    // Do work here... and when done call .setRefreshing(false) to stop the refreshing
+    // Do work here... and when done call set refreshing property to false to stop the refreshing
     loadItems().then(function (resp) {
         // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
         setTimeout(function () {
-            pullRefresh.setRefreshing(false);
+            pullRefresh.refreshing = false;
         }, 1000);
     }, function (err) {
-        pullRefresh.setRefreshing(false);
+        pullRefresh.refreshing = false;
     });
 }
 exports.refreshList = refreshList;
@@ -63,6 +61,6 @@ exports.refreshList = refreshList;
 
 ## API
 
-### setRefreshing
+### refreshing
 
-Notifies the widget that the refresh state has changed.
+Property. Notifies the widget that the refresh state has changed.

demo/app/main-page.js

@@ -2,8 +2,8 @@ var app = require("application");
 var Observable = require("data/observable").Observable;
 var ObservableArray = require("data/observable-array").ObservableArray;
 var platformModule = require("platform");
-var color = require("color");
-
+var color = require("color");
+
 var users = [
     { name: 'Billy Bob' },
     { name: 'Tweeder' },
@@ -16,21 +16,21 @@ var users = [
 ];
 var viewModel = new Observable({
     users: new ObservableArray(users)
-});
-
-function pageLoaded(args) {
-    var page = args.object;
+});
+
+function pageLoaded(args) {
+    var page = args.object;
     // Change statusbar color on Lollipop
-
+
     if (app.android && platformModule.device.sdkVersion >= "21") {
         var window = app.android.startActivity.getWindow();
         window.setStatusBarColor(new color.Color("#1976D2").android);
-    }
-    page.bindingContext = viewModel; 
-    loadItems();
-}
-exports.pageLoaded = pageLoaded;
-
+    }
+    page.bindingContext = viewModel; 
+    loadItems();
+}
+exports.pageLoaded = pageLoaded;
+
 function loadItems() {
     return new Promise(function (resolve, reject) {
         try { 
@@ -44,8 +44,8 @@ function loadItems() {
             reject(ex);
         }
     });
-}
-
+}
+
 function refreshList(args) {
 
     var pullRefresh = args.object;
@@ -54,16 +54,16 @@ function refreshList(args) {
         console.log(response);
         // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
         setTimeout(function () {
-            pullRefresh.setRefreshing(false);
+            pullRefresh.refreshing = false;
         }, 1000);
     }, function (err) {
-        pullRefresh.setRefreshing(false);
+        pullRefresh.refreshing = false;
         alert(err);
     });
-}
-exports.refreshList = refreshList;
-
-
+}
+exports.refreshList = refreshList;
+
+
 
 Number.prototype.times = function (func) {
     for (var i = 0; i < Number(this) ; i++) {

package.json

@@ -1,11 +1,12 @@
 {
   "name": "nativescript-pulltorefresh",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "A NativeScript plugin to provide the Pull to Refresh control on any view.",
   "main": "pulltorefresh.js",
   "nativescript": {
     "platforms": {
-      "android": "1.6.0"
+      "android": "1.6.0", 
+      "ios": "1.6.0"
     }
   },
   "repository": {
@@ -19,7 +20,9 @@
     "Pull Refresh",
     "SwipeRefreshLayout",
     "Material Design",
+    "UIRefreshControl",
     "android",
+    "ios",
     "bradmartin",
     "Thorum"
   ],
@@ -31,7 +34,7 @@
     }, 
     {
       "name": "Peter Staev",
-      "email": "peter.staev@gmail.com",
+      "email": "peter@tangrasoft.com",
       "url": "https://github.com/PeterStaev"
     }
   ],

pulltorefresh-common.js

@@ -6,6 +6,7 @@ var __extends = (this && this.__extends) || function (d, b) {
 };
 var contentView = require("ui/content-view");
 var dependencyObservable = require("ui/core/dependency-observable");
+var view = require("ui/core/view");
 var proxy = require("ui/core/proxy");
 var PullToRefresh = (function (_super) {
     __extends(PullToRefresh, _super);
@@ -22,6 +23,13 @@ var PullToRefresh = (function (_super) {
         enumerable: true,
         configurable: true
     });
+    PullToRefresh.prototype._addChildFromBuilder = function (name, value) {
+        var originalColor = value.style.color || null;
+        if (value instanceof view.View) {
+            this.content = value;
+        }
+        value.style.color = originalColor;
+    };
     PullToRefresh.refreshEvent = "refresh";
     PullToRefresh.refreshingProperty = new dependencyObservable.Property("refreshing", "PullToRefresh", new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.None));
     return PullToRefresh;

pulltorefresh-common.ts

@@ -24,5 +24,16 @@ export class PullToRefresh extends contentView.ContentView implements definition
     set refreshing(value: boolean) {
         this._setValue(PullToRefresh.refreshingProperty, value);
     }
-
+    
+    public _addChildFromBuilder(name: string, value: any) {
+        // Copy inheirtable style property values
+        var originalColor = value.style.color || null;
+        
+        if (value instanceof view.View) {
+            this.content = value;
+        }
+        
+        // Reset inheritable style property values as we do not want those to be inherited
+        value.style.color = originalColor;
+    }
 }

pulltorefresh.android.js

@@ -5,7 +5,6 @@ var __extends = (this && this.__extends) || function (d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
 var common = require("./pulltorefresh-common");
-var view = require("ui/core/view");
 var style = require("ui/styling/style");
 function refreshingPropertyChanged(data) {
     var pullRefresh = data.object;
@@ -35,13 +34,6 @@ var PullToRefresh = (function (_super) {
         enumerable: true,
         configurable: true
     });
-    PullToRefresh.prototype._addChildFromBuilder = function (name, value) {
-        var originalColor = value.style.color || null;
-        if (value instanceof view.View) {
-            this.content = value;
-        }
-        value.style.color = originalColor;
-    };
     PullToRefresh.prototype.setRefreshing = function (newValue) {
         this._android.setRefreshing(newValue);
     };
@@ -59,6 +51,7 @@ var PullToRefresh = (function (_super) {
             onRefresh: function (v) {
                 var owner = that.get();
                 if (owner) {
+                    owner.refreshing = true;
                     owner._emit(common.PullToRefresh.refreshEvent);
                 }
             }

pulltorefresh.android.ts

@@ -35,23 +35,6 @@ export class PullToRefresh extends common.PullToRefresh {
     get _nativeView(): android.support.v4.widget.SwipeRefreshLayout {
         return this._android;
     }
-    
-    public _addChildFromBuilder(name: string, value: any) {
-        // Copy inheirtable style property values
-        var originalColor = value.style.color || null;
-        
-        if (value instanceof view.View) {
-            this.content = value;
-        }
-        
-        // Reset inheritable style property values as we do not want those to be inherited
-        value.style.color = originalColor;
-    }
-    
-    //Visibility methods
-    public setRefreshing(newValue: boolean) {
-        this._android.setRefreshing(newValue);
-    }
 
     public _createUI() { 
 
@@ -72,6 +55,7 @@ export class PullToRefresh extends common.PullToRefresh {
             onRefresh: function (v) {
                 var owner = that.get();
                 if (owner) {
+                    owner.refreshing = true;
                     owner._emit(common.PullToRefresh.refreshEvent);
                 }
             }

pulltorefresh.d.ts

@@ -1,7 +1,7 @@
 /**
  * Contains the PullToRefresh class, which represents a Layout that contains the UI pattern for pull-to-refresh
  */
-declare module "pulltorefresh" {
+declare module "nativescript-pulltorefresh" {
     import dependencyObservable = require("ui/core/dependency-observable");
     import view = require("ui/core/view");
     import observable = require("data/observable");
@@ -22,17 +22,22 @@ declare module "pulltorefresh" {
          * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
         android: any /* android.support.v4.widget.SwipeRefreshLayout */;
-
+        
+        /**
+         * Because of iOS specific this returns the basic UIView. In order to access UIRefreshControl use the refreshControl property!
+         */
+        ios: any
+        
+        /**
+         * Returns the native iOS UIRefreshControl
+         */
+        refreshControl: UIRefreshControl
+        
         /*
         * Gets or sets if the view is refreshing
         */
         refreshing: boolean;
 
-        /*
-        //* Notify the widget that refresh state has changed.
-        //*/
-        //setRefreshing: boolean;
-
         /**
          * Raised when a refresh event occurs.
          */

pulltorefresh.ios.js

@@ -0,0 +1,98 @@
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var common = require("./pulltorefresh-common");
+var style = require("ui/styling/style");
+function refreshingPropertyChanged(data) {
+    var pullRefresh = data.object;
+    if (!pullRefresh.refreshControl) {
+        return;
+    }
+    if (data.newValue) {
+        pullRefresh.refreshControl.beginRefreshing();
+    }
+    else {
+        pullRefresh.refreshControl.endRefreshing();
+    }
+}
+common.PullToRefresh.refreshingProperty.metadata.onSetNativeValue = refreshingPropertyChanged;
+global.moduleMerge(common, exports);
+var PullToRefreshHandler = (function (_super) {
+    __extends(PullToRefreshHandler, _super);
+    function PullToRefreshHandler() {
+        _super.apply(this, arguments);
+    }
+    PullToRefreshHandler.initWithOnwer = function (owner) {
+        var impl = PullToRefreshHandler.new();
+        impl._owner = owner;
+        return impl;
+    };
+    PullToRefreshHandler.prototype.handleRefresh = function (refreshControl) {
+        var pullToRefresh = this._owner.get();
+        pullToRefresh.refreshing = true;
+        pullToRefresh._emit(common.PullToRefresh.refreshEvent);
+    };
+    PullToRefreshHandler.ObjCExposedMethods = {
+        "handleRefresh": { returns: interop.types.void, params: [UIRefreshControl] }
+    };
+    return PullToRefreshHandler;
+}(NSObject));
+var PullToRefresh = (function (_super) {
+    __extends(PullToRefresh, _super);
+    function PullToRefresh() {
+        _super.call(this);
+        this._refreshControl = new UIRefreshControl();
+        this._handler = PullToRefreshHandler.initWithOnwer(new WeakRef(this));
+        this._refreshControl.addTargetActionForControlEvents(this._handler, "handleRefresh", UIControlEvents.ValueChanged);
+    }
+    Object.defineProperty(PullToRefresh.prototype, "refreshControl", {
+        get: function () {
+            return this._refreshControl;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PullToRefresh.prototype.onLoaded = function () {
+        _super.prototype.onLoaded.call(this);
+        if (this.content.ios instanceof UIScrollView) {
+            this.content.ios.alwaysBounceVertical = true;
+            this.content.ios.addSubview(this._refreshControl);
+        }
+        else {
+            throw new Error("Content must inherit from UIScrollView!");
+        }
+    };
+    return PullToRefresh;
+}(common.PullToRefresh));
+exports.PullToRefresh = PullToRefresh;
+var PullToRefreshStyler = (function () {
+    function PullToRefreshStyler() {
+    }
+    PullToRefreshStyler.setBackgroundColor = function (pullToRefresh, value) {
+        var native = pullToRefresh.refreshControl;
+        native.backgroundColor = value;
+    };
+    PullToRefreshStyler.resetBackgroundColor = function (pullToRefresh, value) {
+        var native = pullToRefresh.refreshControl;
+        native.backgroundColor = value;
+    };
+    PullToRefreshStyler.setColor = function (pullToRefresh, value) {
+        var native = pullToRefresh.refreshControl;
+        native.tintColor = value;
+    };
+    PullToRefreshStyler.resetColor = function (pullToRefresh, value) {
+        var native = pullToRefresh.refreshControl;
+        native.tintColor = value;
+    };
+    PullToRefreshStyler.registerHandlers = function () {
+        style.registerHandler(style.backgroundColorProperty, new style.StylePropertyChangedHandler(PullToRefreshStyler.setBackgroundColor, PullToRefreshStyler.resetBackgroundColor), "PullToRefresh");
+        style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "PullToRefresh");
+        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(PullToRefreshStyler.setColor, PullToRefreshStyler.resetColor), "PullToRefresh");
+    };
+    return PullToRefreshStyler;
+}());
+exports.PullToRefreshStyler = PullToRefreshStyler;
+PullToRefreshStyler.registerHandlers();