@nativescript-community/gesturehandler 0.2.0 → 2.0.0

package/README.md

@@ -1,66 +1,23 @@
-<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
-<!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead.
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<h1 align="center">@nativescript-community/gesturehandler</h1>
-<p align="center">
-		<a href="https://npmcharts.com/compare/@nativescript-community/gesturehandler?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/gesturehandler.svg" height="20"/></a>
-<a href="https://www.npmjs.com/package/@nativescript-community/gesturehandler"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/gesturehandler.svg" height="20"/></a>
-	</p>
+[![npm](https://img.shields.io/npm/v/@nativescript-community/gesturehandler.svg)](https://www.npmjs.com/package/@nativescript-community/gesturehandler)
+[![npm](https://img.shields.io/npm/dt/@nativescript-community/gesturehandler.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/gesturehandler)
+[![GitHub forks](https://img.shields.io/github/forks/nativescript-community/gesturehandler.svg)](https://github.com/nativescript-community/gesturehandler/network)
+[![GitHub stars](https://img.shields.io/github/stars/nativescript-community/gesturehandler.svg)](https://github.com/nativescript-community/gesturehandler/stargazers)
 
-<p align="center">
-  <b>Declarative API exposing platform native touch and gesture system to NativeScript.</b></br>
-  <sub><sub>
-</p>
 
-<br />
+## Installation
 
+```shell
+tns plugin add @nativescript-community/gesturehandler
+```
 
-
-[](#table-of-contents)
-
-## Table of Contents
+Be sure to run a new build after adding plugins to avoid any issues.
 
-* [Installation](#installation)
-* [API](#api)
-			* [TypeScript](#typescript)
-* [GestureRootView](#gesturerootview)
-* [Overriding Nativescript gestures](#overriding-nativescript-gestures)
-* [Credits](#credits)
-	* [Examples:](#examples)
-* [Demos and Development](#demos-and-development)
-	* [Setup](#setup)
-	* [Build](#build)
-	* [Demos](#demos)
-* [Questions](#questions)
+---
 
-
-[](#installation)
-
-## Installation
-Run the following command from the root of your project:
+This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/).
+The source is based on the source code by [Krzysztof Magiera](https://github.com/kmagiera). Dont hesitate to go and thank him for his work!
 
-`ns plugin add @nativescript-community/gesturehandler`
 
-
-[](#api)
-
 ## API
 
 We need to do some wiring when your app starts, so open `app.ts` and add this before creating any View/App/Frame:
@@ -97,80 +54,3 @@ Right now you must not forget to store the ```gestureHandler``` somewhere or the
 
 Now about the API. All the gestures for the react counterpart exist with the same options and the same event ```extraData```.
 
-
-[](#gesturerootview)
-
-## GestureRootView
-
-For the gestures to work correctly we need a `root` view which knows how to handle the gestures.
-If using `Page` (thus `Frame`) you don't need to do anything.
-In case you don't (drawer root view, modals, ...) then you can wrap your views in a `GestureRootView` which inherits `GridLayout`
-
-
-[](#overriding-nativescript-gestures)
-
-## Overriding Nativescript gestures
-
-This plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes `tap` and `longpress`
-
-To do that 
-
-
-[](#credits)
-
-## Credits
-
-This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/).
-The source is based on the source code by [Krzysztof Magiera](https://github.com/kmagiera). Dont hesitate to go and thank him for his work!
-
-
-
-### Examples:
-
-- [Basic](demo-snippets/vue/Basic.vue)
-  - A basic example showing that overriding N gestures works, even in modals
-
-
-[](#demos-and-development)
-
-## Demos and Development
-
-
-### Setup
-
-To run the demos, you must clone this repo **recursively**.
-
-```
-git clone https://github.com/@nativescript-community/gesturehandler.git --recursive
-```
-
-**Install Dependencies:**
-```bash
-npm i # or 'yarn install' or 'pnpm install'
-```
-
-**Interactive Menu:**
-
-To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
-
-### Build
-
-```bash
-npm run build
-
-npm run build.angular # or for Angular
-```
-
-### Demos
-
-```bash
-npm run demo.[ng|react|svelte|vue].[ios|android]
-
-npm run demo.svelte.ios # Example
-```
-
-[](#questions)
-
-## Questions
-
-If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

package/build.gradle

@@ -0,0 +1,22 @@
+apply plugin: 'java'
+
+// Use maven repository
+repositories {
+    mavenCentral()
+    google()
+    flatDir {
+        dirs "$rootDir/node_modules/@nativescript/core/platforms/android"
+    }
+}
+dependencies {
+    implementation files("${System.getenv('ANDROID_HOME')}/platforms/android-32/android.jar")
+    implementation(name:'widgets-release', ext:'aar')
+    implementation "androidx.annotation:annotation:1.1.0"
+}
+sourceSets {
+    main {
+        java {
+            srcDirs = ["plugin/platforms/android/java"]
+        }
+    }
+}

package/config.json

@@ -0,0 +1,7 @@
+{
+    "readme": true,
+    "angular": true,
+    "demos": [
+        "ng"
+    ]
+}

package/demo-snippets/node_modules/.package-lock.json

@@ -0,0 +1,20 @@
+{
+    "name": "@nativescript-community/template-snippet",
+    "version": "0.0.1",
+    "lockfileVersion": 2,
+    "requires": true,
+    "packages": {
+        "../packages/gesturehandler": {
+            "name": "@nativescript-community/gesturehandler",
+            "version": "0.2.1",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@nativescript-community/observable": "^2.0.10"
+            }
+        },
+        "node_modules/@nativescript-community/gesturehandler": {
+            "resolved": "../packages/gesturehandler",
+            "link": true
+        }
+    }
+}

package/demo-snippets/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "@nativescript-community/template-snippet",
+    "version": "0.0.1",
+    "dependencies": {
+        "@nativescript-community/gesturehandler": "file:../packages/gesturehandler"
+    }
+}

package/demo-snippets/vue/Basic.vue

@@ -0,0 +1,48 @@
+<template>
+    <Page>
+        <ActionBar>
+            <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
+            <Label text="Basic Pager" />
+        </ActionBar>
+
+        <StackLayout class="page">
+            <Button text="test modal view" @tap="openModal" />
+        </StackLayout>
+    </Page>
+</template>
+
+<script>
+import ModalView from './ModalView.vue';
+export default {
+    data() {
+        return {
+            items: [
+                { title: 'First', color: '#e67e22' },
+                { title: 'Second', color: '#3498db' },
+                { title: 'Third', color: '#e74c3c' },
+                { title: 'Fourth', color: '#9b59b6' },
+            ],
+        };
+    },
+    methods: {
+        openModal() {
+            console.log('openModal');
+            console.log('openModal', ModalView);
+            this.$showModal(ModalView, {
+                fullscreen: false,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.page Label {
+    font-size: 35;
+    text-align: center;
+    width: 100%;
+    vertical-alignment: center;
+    color: #ffffff;
+    text-transform: uppercase;
+}
+</style>

package/demo-snippets/vue/ModalView.vue

@@ -0,0 +1,17 @@
+<template>
+    <StackLayout class="page">
+        <GestureRootView>
+            <Button text="should work" @tap="buttonTest" />
+        </GestureRootView>
+    </StackLayout>
+</template>
+
+<script>
+export default {
+    methods: {
+        buttonTest() {
+            alert('test');
+        },
+    },
+};
+</script>

package/demo-snippets/vue/install.ts

@@ -0,0 +1,10 @@
+import Vue from 'nativescript-vue';
+import { GestureRootView, install } from '@nativescript-community/gesturehandler';
+import Basic from './Basic.vue';
+
+export function installPlugin() {
+    install(true);
+    Vue.registerElement('GestureRootView', () => GestureRootView);
+}
+
+export const demos = [{ name: 'Basic', path: 'basic', component: Basic }];

package/demo-vue/App_Resources/Android/app.gradle

@@ -0,0 +1,20 @@
+// Add your native dependencies here:
+
+// Uncomment to add recyclerview-v7 dependency
+//dependencies {
+//	implementation 'com.android.support:recyclerview-v7:+'
+//}
+
+// If you want to add something to be applied before applying plugins' include.gradle files
+// e.g. project.ext.googlePlayServicesVersion = "15.0.1"
+// create a file named before-plugins.gradle in the current directory and place it there
+
+android {
+  defaultConfig {
+    minSdkVersion 17
+    generatedDensities = []
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

package/demo-vue/App_Resources/Android/src/main/AndroidManifest.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="10000"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+
+	<application
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@mipmap/ic_launcher"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme">
+
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
+			android:theme="@style/LaunchScreenTheme"
+			android:launchMode="singleTask"
+			android:exported="true">
+
+			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity" android:exported="false"/>
+	</application>
+</manifest>

package/demo-vue/App_Resources/Android/src/main/res/drawable/ic_launcher_foreground.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+  <group android:scaleX="0.07382812"
+      android:scaleY="0.07382812"
+      android:translateX="16.2"
+      android:translateY="16.2">
+    <path
+        android:pathData="M843,511.86L843,512.96C843,513.22 842.8,513.43 842.55,513.46C809.18,516.58 783.07,543.69 783.07,577.86L783.07,714.8C783.07,724.37 781.06,733.6 777.43,742.03C767.08,766.1 743.59,783.6 716.27,783.6L647.07,783.6L646.59,783L377.41,445.68L377.41,783.6L307.73,783.6C270.84,783.6 240.93,753.7 240.93,716.8L240.93,577.86C240.93,543.69 214.82,516.58 181.45,513.46C181.2,513.43 181,513.22 181,512.96L181,511.86C181,511.61 181.19,511.4 181.45,511.37C214.69,508.14 240.67,480.35 240.67,446.26L240.67,307.2C240.67,297.91 242.57,289.05 246,281.01C256.18,257.14 279.87,240.39 307.47,240.39L377.13,240.39L377.41,240.74L646.59,578.07L646.59,240.39L716.53,240.39C753.42,240.39 783.33,270.3 783.33,307.2L783.33,446.26C783.33,480.35 809.31,508.14 842.55,511.37C842.81,511.4 843,511.61 843,511.86"
+        android:fillColor="#65ADF1"
+        android:fillType="nonZero"/>
+  </group>
+</vector>

package/demo-vue/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml

@@ -0,0 +1,8 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background" />
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/logo" />
+    </item>
+</layer-list>

package/demo-vue/App_Resources/Android/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

package/demo-vue/App_Resources/Android/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ns_primary">#F5F5F5</color>
+	<color name="ns_primaryDark">#757575</color>
+	<color name="ns_accent">#65ADF1</color>
+    <color name="ns_blue">#272734</color>
+</resources>

package/demo-vue/App_Resources/Android/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

package/demo-vue/App_Resources/Android/src/main/res/values/styles.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- theme to use FOR launch screen-->
+    <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+
+        <item name="android:windowBackground">@drawable/splash_screen</item>
+
+        <item name="android:windowActionBarOverlay">true</item>
+        <item name="android:windowTranslucentStatus">true</item>
+    </style>
+
+    <style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">
+    </style>
+
+    <!-- theme to use AFTER launch screen is loaded-->
+    <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+    </style>
+
+    <style name="AppTheme" parent="AppThemeBase">
+    </style>
+
+    <!-- theme for action-bar -->
+    <style name="NativeScriptToolbarStyleBase" parent="Widget.AppCompat.Toolbar">
+        <item name="android:background">@color/ns_primary</item>
+        <item name="theme">@style/ThemeOverlay.AppCompat.ActionBar</item>
+        <item name="popupTheme">@style/ThemeOverlay.AppCompat</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+    </style>
+</resources>

package/demo-vue/App_Resources/Android/src/main/res/values-v21/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<color name="ns_accent">#65ADF1</color>
+</resources>

package/demo-vue/App_Resources/Android/src/main/res/values-v21/styles.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Application theme -->
+    <style name="AppThemeBase21" parent="AppThemeBase">
+        <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
+        <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
+    </style>
+
+    <style name="AppTheme" parent="AppThemeBase21">
+    </style>
+
+    <!-- Default style for DatePicker - in spinner mode -->
+    <style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
+        <item name="android:datePickerMode">spinner</item>
+    </style>
+
+    <!-- Default style for TimePicker - in spinner mode -->
+    <style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
+        <item name="android:timePickerMode">spinner</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+        <item name="android:elevation">4dp</item>
+        <item name="android:paddingTop">24dp</item>
+    </style>
+</resources>

package/demo-vue/App_Resources/Android/src/main/res/values-v29/styles.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Application theme -->
+    <style name="AppThemeBase29" parent="AppThemeBase21">
+        <item name="android:forceDarkAllowed">true</item>
+    </style>
+
+    <style name="AppTheme" parent="AppThemeBase29">
+    </style>
+
+</resources>