feat(splitsheet): double paned view where the top can auto size based on movement of the bottom

README.md

@@ -21,6 +21,7 @@
 - [@nstudio/nativescript-persona](packages/nativescript-persona/README.md)
 - [@nstudio/nativescript-plaid](packages/nativescript-plaid/README.md)
 - [@nstudio/nativescript-qr](packages/nativescript-qr/README.md)
+- [@nstudio/nativescript-splitsheet](packages/nativescript-splitsheet/README.md)
 - [@nstudio/nativescript-tracking-transparency](packages/nativescript-tracking-transparency/README.md)
 - [@nstudio/nativescript-walletconnect](packages/nativescript-walletconnect/README.md)
 

apps/demo-angular/package.json

@@ -26,7 +26,8 @@
     "@nstudio/nativescript-plaid": "file:../../dist/packages/nativescript-plaid",
     "@nstudio/nativescript-qr": "file:../../dist/packages/nativescript-qr",
     "@nstudio/nativescript-tracking-transparency": "file:../../dist/packages/nativescript-tracking-transparency",
-    "@nstudio/nativescript-walletconnect": "file:../../dist/packages/nativescript-walletconnect"
+    "@nstudio/nativescript-walletconnect": "file:../../dist/packages/nativescript-walletconnect",
+    "@nstudio/nativescript-splitsheet": "file:../../dist/packages/nativescript-splitsheet"
   },
   "devDependencies": {
     "@nativescript/android": "~8.4.0",

apps/demo-angular/src/app-routing.module.ts

@@ -29,6 +29,7 @@ const routes: Routes = [
 	{ path: 'nativescript-persona', loadChildren: () => import('./plugin-demos/nativescript-persona.module').then(m => m.NativescriptPersonaModule) },
 	{ path: 'nativescript-plaid', loadChildren: () => import('./plugin-demos/nativescript-plaid.module').then(m => m.NativescriptPlaidModule) },
 	{ path: 'nativescript-qr', loadChildren: () => import('./plugin-demos/nativescript-qr.module').then(m => m.NativescriptQrModule) },
+	{ path: 'nativescript-splitsheet', loadChildren: () => import('./plugin-demos/nativescript-splitsheet.module').then(m => m.NativescriptSplitsheetModule) },
 	{ path: 'nativescript-tracking-transparency', loadChildren: () => import('./plugin-demos/nativescript-tracking-transparency.module').then(m => m.NativescriptTrackingTransparencyModule) },
 	{ path: 'nativescript-walletconnect', loadChildren: () => import('./plugin-demos/nativescript-walletconnect.module').then(m => m.NativescriptWalletconnectModule) }
 ];

apps/demo-angular/src/home.component.ts

@@ -75,6 +75,9 @@ export class HomeComponent {
 	{
 		name: 'nativescript-qr'
 	},
+	{
+		name: 'nativescript-splitsheet'
+	},
 	{
 		name: 'nativescript-tracking-transparency'
 	},

apps/demo-angular/src/plugin-demos/nativescript-splitsheet.component.html

@@ -0,0 +1,8 @@
+<ActionBar title="nativescript-splitsheet" class="action-bar"> </ActionBar>
+<StackLayout class="p-20">
+  <ScrollView class="h-full">
+    <StackLayout>
+      <Button text="Test nativescript-splitsheet" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+    </StackLayout>
+  </ScrollView>
+</StackLayout>

apps/demo-angular/src/plugin-demos/nativescript-splitsheet.component.ts

@@ -0,0 +1,19 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedNativescriptSplitsheet } from '@demo/shared';
+import { } from '@nstudio/nativescript-splitsheet';
+
+@Component({
+	selector: 'demo-nativescript-splitsheet',
+	templateUrl: 'nativescript-splitsheet.component.html',
+})
+export class NativescriptSplitsheetComponent {
+
+  demoShared: DemoSharedNativescriptSplitsheet;
+
+	constructor(private _ngZone: NgZone) {}
+
+  ngOnInit() {
+    this.demoShared = new DemoSharedNativescriptSplitsheet();
+  }
+
+}

apps/demo-angular/src/plugin-demos/nativescript-splitsheet.module.ts

@@ -0,0 +1,10 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { NativescriptSplitsheetComponent } from './nativescript-splitsheet.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: NativescriptSplitsheetComponent }])],
+  declarations: [NativescriptSplitsheetComponent],
+  schemas: [ NO_ERRORS_SCHEMA]
+})
+export class NativescriptSplitsheetModule {}

apps/demo-react/package.json

@@ -26,7 +26,8 @@
     "@nstudio/nativescript-plaid": "file:../../packages/nativescript-plaid",
     "@nstudio/nativescript-qr": "file:../../packages/nativescript-qr",
     "@nstudio/nativescript-tracking-transparency": "file:../../packages/nativescript-tracking-transparency",
-    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect"
+    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect",
+    "@nstudio/nativescript-splitsheet": "file:../../packages/nativescript-splitsheet"
   },
   "devDependencies": {
     "@nativescript/android": "~8.4.0",

apps/demo-react/src/plugin-demos/nativescript-splitsheet.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Dialogs } from '@nativescript/core';
+import { StyleSheet } from "react-nativescript";
+import { DemoSharedNativescriptSplitsheet } from '@demo/shared';
+import { } from '@nstudio/nativescript-splitsheet';
+
+export function HomeScreen() {
+    return (
+        <flexboxLayout style={styles.container}>
+            <button
+                style={styles.button}
+                onTap={() => Dialogs.alert("Test Plugin!")}
+            >
+                Test nativescript-splitsheet
+            </button>
+        </flexboxLayout>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: "100%",
+        flexDirection: "column",
+        justifyContent: "center",
+    },
+    button: {
+        fontSize: 24,
+        color: "#2e6ddf",
+    },
+});

apps/demo-svelte/app/plugin-demos/nativescript-splitsheet.svelte

@@ -0,0 +1,19 @@
+<page>
+    <actionBar title="nativescript-splitsheet" />
+    <gridLayout>
+        <button class="info" text="{message}" horizontalAlignment="center" verticalAlignment="middle" textWrap="true"/>
+    </gridLayout>
+</page>
+
+<script lang="typescript">
+    import { DemoSharedNativescriptSplitsheet } from '@demo/shared';
+    import { } from '@nstudio/nativescript-splitsheet';
+
+    let message: string = "Test nativescript-splitsheet"
+</script>
+
+<style>
+    .info {
+        font-size: 20;
+    }
+</style>

apps/demo-svelte/package.json

@@ -26,7 +26,8 @@
     "@nstudio/nativescript-plaid": "file:../../packages/nativescript-plaid",
     "@nstudio/nativescript-qr": "file:../../packages/nativescript-qr",
     "@nstudio/nativescript-tracking-transparency": "file:../../packages/nativescript-tracking-transparency",
-    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect"
+    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect",
+    "@nstudio/nativescript-splitsheet": "file:../../packages/nativescript-splitsheet"
   },
   "devDependencies": {
     "@nativescript/android": "~8.4.0",

apps/demo-vue/app/plugin-demos/nativescript-splitsheet.vue

@@ -0,0 +1,34 @@
+<template>
+  <Page>
+    <ActionBar>
+      <Label text="nativescript-splitsheet"/>
+    </ActionBar>
+
+    <GridLayout>
+      <Button class="info" :text="message"/>
+    </GridLayout>
+  </Page>
+</template>
+
+<script lang="ts">
+  import Vue from "nativescript-vue";
+  import { DemoSharedNativescriptSplitsheet } from '@demo/shared';
+  import { } from '@nstudio/nativescript-splitsheet';
+
+  export default Vue.extend({
+    computed: {
+      message() {
+        return "Test nativescript-splitsheet";
+      }
+    }
+  });
+</script>
+
+<style scoped lang="scss">
+
+  .info {
+    font-size: 20;
+    horizontal-align: center;
+    vertical-align: center;
+  }
+</style>

apps/demo-vue/package.json

@@ -27,7 +27,8 @@
     "@nstudio/nativescript-plaid": "file:../../packages/nativescript-plaid",
     "@nstudio/nativescript-qr": "file:../../packages/nativescript-qr",
     "@nstudio/nativescript-tracking-transparency": "file:../../packages/nativescript-tracking-transparency",
-    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect"
+    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect",
+    "@nstudio/nativescript-splitsheet": "file:../../packages/nativescript-splitsheet"
   },
   "devDependencies": {
     "@nativescript/android": "~8.4.0",

apps/demo/package.json

@@ -27,7 +27,8 @@
     "@nstudio/nativescript-plaid": "file:../../packages/nativescript-plaid",
     "@nstudio/nativescript-qr": "file:../../packages/nativescript-qr",
     "@nstudio/nativescript-tracking-transparency": "file:../../packages/nativescript-tracking-transparency",
-    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect"
+    "@nstudio/nativescript-walletconnect": "file:../../packages/nativescript-walletconnect",
+    "@nstudio/nativescript-splitsheet": "file:../../packages/nativescript-splitsheet"
   },
   "devDependencies": {
     "@nativescript/android": "~8.4.0",

apps/demo/src/main-page.xml

@@ -30,6 +30,7 @@
         <Button text="nativescript-qr" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="nativescript-tracking-transparency" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="nativescript-walletconnect" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+<Button text="nativescript-splitsheet" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/demo/src/plugin-demos/nativescript-splitsheet.ts

@@ -0,0 +1,12 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+import { DemoSharedNativescriptSplitsheet } from '@demo/shared';
+import { } from '@nstudio/nativescript-splitsheet';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new DemoModel();
+}
+
+export class DemoModel extends DemoSharedNativescriptSplitsheet {
+
+}

apps/demo/src/plugin-demos/nativescript-splitsheet.xml

@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="nativescript-splitsheet" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+    <StackLayout class="p-20">
+        <ScrollView class="h-full">
+          <StackLayout>
+            <Button text="Test nativescript-splitsheet" tap="{{ testIt }}" class="btn btn-primary"/>
+
+          </StackLayout>
+        </ScrollView>
+    </StackLayout>
+</Page>

packages/nativescript-splitsheet/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "node_modules/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/nativescript-splitsheet/README.md

@@ -0,0 +1,13 @@
+# @nstudio/nativescript-splitsheet
+
+```javascript
+npm install @nstudio/nativescript-splitsheet
+```
+
+## Usage
+
+// TODO
+
+## License
+
+Apache License Version 2.0

packages/nativescript-splitsheet/common.ts

@@ -0,0 +1,11 @@
+import { booleanConverter, LayoutBase, Property } from '@nativescript/core';
+
+export const scrollEnabledProperty = new Property<SplitSheetBase, boolean>({
+	name: 'scrollEnabled',
+	defaultValue: false,
+	valueConverter: booleanConverter,
+});
+
+export class SplitSheetBase extends LayoutBase {}
+
+scrollEnabledProperty.register(SplitSheetBase);

packages/nativescript-splitsheet/index.android.ts

@@ -0,0 +1,111 @@
+import { GridLayout, ViewBase } from '@nativescript/core';
+import { scrollEnabledProperty, SplitSheetBase } from './common';
+
+declare const io;
+
+export class SplitSheet extends SplitSheetBase {
+	private initCtrl = false;
+
+	private views: {
+		top?: android.view.View;
+		bottom?: android.view.View;
+	};
+
+	_listener;
+
+	createNativeView() {
+		const nativeView = new io.github.triniwiz.splitsheet.SplitSheet(this._context);
+		nativeView.setDisplaceContent(true);
+		nativeView.setShowHandle(false);
+		nativeView.setMinimumSheetHeight(400);
+		nativeView.setSnappingDistance(200);
+		nativeView.setAnimationDuration(0.2);
+		nativeView.setSwipeUpToShowAllowed(true);
+		nativeView.setMainViewBackgroundColor(java.lang.Integer.valueOf(android.graphics.Color.TRANSPARENT));
+		nativeView.setMainViewElevation(false);
+		const ref = new WeakRef(this);
+
+		this._listener = new io.github.triniwiz.splitsheet.SplitSheet.Events({
+			event(name, value) {
+				const owner = global.isIOS ? ref.deref?.() : ref.get?.();
+				owner?.notify?.({
+					eventName: name,
+					data: value ?? undefined,
+				});
+			},
+		});
+
+		return nativeView;
+	}
+
+	initNativeView(): void {
+		super.initNativeView();
+		this.nativeView.setEventListener(this._listener);
+	}
+
+	disposeNativeView(): void {
+		this.nativeView.setEventListener(null);
+		super.disposeNativeView();
+	}
+
+	[scrollEnabledProperty.setNative](value: boolean) {
+		if (this.nativeView) {
+			this.nativeView.setScrollEnabled(value);
+		}
+	}
+
+	openSheet(duration?: number) {
+		if (this.nativeView) {
+			if (duration) {
+				const originalDuration = this.nativeView.getAnimationDuration();
+				this.nativeView.setAnimationDuration(duration);
+
+				setTimeout(() => {
+					this.nativeView.setAnimationDuration(originalDuration);
+				}, duration * 1000);
+			}
+
+			this.nativeView.show(true);
+		}
+	}
+
+	closeSheet() {
+		this.nativeView?.show?.(false);
+	}
+
+	minimumHeight(value: number) {
+		if (this.nativeView) {
+			this.nativeView.setMinimumSheetHeight(value);
+		}
+	}
+
+	snappingDistance(value: number) {
+		if (this.nativeView) {
+			this.nativeView.setSnappingDistance(value);
+		}
+	}
+
+	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean {
+		// super._addViewToNativeVisualTree(view, atIndex);
+		// console.log('(view as any).position:', (view as any).position);
+
+		if (!this.views) {
+			this.views = {};
+		}
+		if (!this.views.top || !this.views.bottom) {
+			if ((view as any).position === 'top') {
+				this.views.top = view.nativeView;
+			} else if ((view as any).position === 'bottom') {
+				this.views.bottom = view.nativeView;
+			}
+		}
+		if (!this.initCtrl && this.views.top && this.views.bottom) {
+			this.initCtrl = true;
+			this.nativeView.setup(this.views.top, this.views.bottom);
+		}
+
+		return true;
+	}
+}
+
+export class AutoLayout extends GridLayout {}