fix(nstudio#29): implement a carousel friendly swipe refresh layout

nativescript-community · Apr 1, 2019 · d0bb135 · d0bb135
1 parent 2c8934c
commit d0bb135
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 98 deletions.
diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -1,13 +1,36 @@
-<page xmlns="http://schemas.nativescript.org/tns.xsd" 
-    xmlns:PullRefresh="nativescript-pulltorefresh" loaded="pageLoaded">
+<page
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:PullRefresh="nativescript-pulltorefresh"
+    xmlns:ns="nativescript-carousel"
+    loaded="pageLoaded">
     <action-bar title="Pull To Refresh :)" backgroundColor="#2196F3" color="#f1f1f1" />
     <stack-layout>
         <PullRefresh:PullToRefresh loaded="swipeLoaded" refresh="refreshList" backgroundColor="#fff000" color="#3489db">
-            <list-view items="{{ users }}" backgroundColor="white">
-                <list-view.itemTemplate>
-                    <label text="{{ name }}" row="0" col="1" textWrap="true" class="message" />
-                </list-view.itemTemplate>
+            <list-view items="{{ users }}" backgroundColor="white" itemTemplateSelector="$index === 0 ? 'carousel' : 'label'">
+                <list-view.itemTemplates>
+                    <template key="carousel">
+                        <GridLayout rows="200" columns="*">
+                            <ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
+                                <ns:CarouselItem id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
+                                    <Label text="Slide 1" backgroundColor="#50000000" horizontalAlignment="center"/>
+                                </ns:CarouselItem>
+                                <ns:CarouselItem id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
+                                    <Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center"/>
+                                </ns:CarouselItem>
+                                <ns:CarouselItem id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
+                                    <Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center"/>
+                                </ns:CarouselItem>
+                                <ns:CarouselItem id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
+                                    <Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center"/>
+                                </ns:CarouselItem>
+                            </ns:Carousel>
+                        </GridLayout>
+                    </template>
+                    <template key="label">
+                        <label text="{{ name }}" row="0" col="1" textWrap="true" class="message" />
+                    </template>
+                </list-view.itemTemplates>
             </list-view>
         </PullRefresh:PullToRefresh>
     </stack-layout>
-</page>
+</page>
diff --git a/demo/package.json b/demo/package.json
@@ -3,9 +3,13 @@
     "id": "org.nativescript.pulltorefresh",
     "tns-ios": {
       "version": "5.2.0"
+    },
+    "tns-android": {
+      "version": "5.2.1"
     }
   },
   "dependencies": {
+    "nativescript-carousel": "^4.1.0",
     "nativescript-pulltorefresh": "file:../src",
     "nativescript-theme-core": "^1.0.4",
     "nativescript-unit-test-runner": "^0.5.0",

diff --git a/src/pulltorefresh.android.ts b/src/pulltorefresh.android.ts
@@ -1,91 +1,122 @@
-/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
-
-import { Color } from 'tns-core-modules/color';
-import {
-  PullToRefreshBase,
-  backgroundColorProperty,
-  colorProperty,
-  refreshingProperty
-} from './pulltorefresh-common';
-
-export * from './pulltorefresh-common';
-
-export class PullToRefresh extends PullToRefreshBase {
-  private _androidViewId: number;
-
-  public nativeView: any; // android.support.v4.widget.SwipeRefreshLayout;
-
-  get android(): any {
-    return this.nativeView; // android.support.v4.widget.SwipeRefreshLayout
-  }
-
-  public createNativeView() {
-    const swipeRefreshLayout = new (android.support.v4
-      .widget as any).SwipeRefreshLayout(this._context);
-
-    if (!this._androidViewId) {
-      this._androidViewId = android.view.View.generateViewId();
-    }
-    swipeRefreshLayout.setId(this._androidViewId);
-
-    const refreshListener = new TNS_SwipeRefreshListener(new WeakRef(this));
-    swipeRefreshLayout.setOnRefreshListener(refreshListener);
-    (swipeRefreshLayout as any).refreshListener = refreshListener;
-
-    return swipeRefreshLayout;
-  }
-
-  public initNativeView() {
-    super.initNativeView();
-
-    const nativeView = this.nativeView as any;
-    nativeView.refreshListener.owner = new WeakRef(this);
-  }
-
-  public disposeNativeView() {
-    const nativeView = this.nativeView as any;
-    nativeView.refreshListener.owner = null;
-
-    super.disposeNativeView();
-  }
-
-  [refreshingProperty.getDefault](): boolean {
-    return false;
-  }
-  [refreshingProperty.setNative](value: boolean) {
-    this.nativeView.setRefreshing(value);
-  }
-
-  [colorProperty.setNative](value: Color | number) {
-    const color = value instanceof Color ? value.android : value;
-    this.nativeView.setColorSchemeColors([color]);
-  }
-
-  [backgroundColorProperty.setNative](value: Color | number) {
-    const color = value instanceof Color ? value.android : value;
-    this.nativeView.setProgressBackgroundColorSchemeColor(color);
-  }
-}
-
-@Interfaces([
-  (android.support.v4.widget as any).SwipeRefreshLayout.OnRefreshListener
-])
-class TNS_SwipeRefreshListener extends java.lang.Object {
-  constructor(private owner: WeakRef<PullToRefresh>) {
-    super();
-
-    return global.__native(this);
-  }
-
-  public onRefresh(v) {
-    const owner = this.owner.get();
-
-    if (owner) {
-      owner.refreshing = true;
-      owner.notify({
-        eventName: PullToRefreshBase.refreshEvent,
-        object: owner
-      });
-    }
-  }
-}
+/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
+
+import { Color } from 'tns-core-modules/color';
+import {
+  PullToRefreshBase,
+  backgroundColorProperty,
+  colorProperty,
+  refreshingProperty
+} from './pulltorefresh-common';
+
+export * from './pulltorefresh-common';
+
+class CarouselFriendlySwipeRefreshLayout extends android.support.v4.widget.SwipeRefreshLayout {
+  private _touchSlop: number;
+  private _previousX: number;
+
+  public constructor(context: android.content.Context, attrs: android.util.AttributeSet) {
+    super(context, attrs);
+
+    this._touchSlop = android.view.ViewConfiguration.get(context).getScaledTouchSlop();
+  }
+
+  public onInterceptTouchEvent(event: android.view.MotionEvent): boolean {
+    switch (event.getAction()) {
+      case android.view.MotionEvent.ACTION_DOWN: {
+        this._previousX = android.view.MotionEvent.obtain(event).getX();
+        break;
+      }
+      case android.view.MotionEvent.ACTION_MOVE: {
+        const eventX = event.getX();
+        const xDifference = Math.abs(eventX - this._previousX);
+
+        if (xDifference > this._touchSlop) {
+          return false;
+        }
+
+        break;
+      }
+    }
+
+    return super.onInterceptTouchEvent(event);
+  }
+}
+
+export class PullToRefresh extends PullToRefreshBase {
+  private _androidViewId: number;
+
+  public nativeView: any; // android.support.v4.widget.SwipeRefreshLayout;
+
+  get android(): any {
+    return this.nativeView; // android.support.v4.widget.SwipeRefreshLayout
+  }
+
+  public createNativeView() {
+    const swipeRefreshLayout = new (CarouselFriendlySwipeRefreshLayout as any)(this._context);
+
+    if (!this._androidViewId) {
+      this._androidViewId = android.view.View.generateViewId();
+    }
+    swipeRefreshLayout.setId(this._androidViewId);
+
+    const refreshListener = new TNS_SwipeRefreshListener(new WeakRef(this));
+    swipeRefreshLayout.setOnRefreshListener(refreshListener);
+    (swipeRefreshLayout as any).refreshListener = refreshListener;
+
+    return swipeRefreshLayout;
+  }
+
+  public initNativeView() {
+    super.initNativeView();
+
+    const nativeView = this.nativeView as any;
+    nativeView.refreshListener.owner = new WeakRef(this);
+  }
+
+  public disposeNativeView() {
+    const nativeView = this.nativeView as any;
+    nativeView.refreshListener.owner = null;
+
+    super.disposeNativeView();
+  }
+
+  [refreshingProperty.getDefault](): boolean {
+    return false;
+  }
+  [refreshingProperty.setNative](value: boolean) {
+    this.nativeView.setRefreshing(value);
+  }
+
+  [colorProperty.setNative](value: Color | number) {
+    const color = value instanceof Color ? value.android : value;
+    this.nativeView.setColorSchemeColors([color]);
+  }
+
+  [backgroundColorProperty.setNative](value: Color | number) {
+    const color = value instanceof Color ? value.android : value;
+    this.nativeView.setProgressBackgroundColorSchemeColor(color);
+  }
+}
+
+@Interfaces([
+  (android.support.v4.widget as any).SwipeRefreshLayout.OnRefreshListener
+])
+class TNS_SwipeRefreshListener extends java.lang.Object {
+  constructor(private owner: WeakRef<PullToRefresh>) {
+    super();
+
+    return global.__native(this);
+  }
+
+  public onRefresh(v) {
+    const owner = this.owner.get();
+
+    if (owner) {
+      owner.refreshing = true;
+      owner.notify({
+        eventName: PullToRefreshBase.refreshEvent,
+        object: owner
+      });
+    }
+  }
+}