NativeScript · farfromrefug · Feb 7, 2024 · Feb 9, 2024 · Feb 11, 2024 · Feb 11, 2024
diff --git a/.gitignore b/.gitignore
@@ -8,9 +8,8 @@
 
 # dependencies
 **/node_modules
-**/yarn.lock
-**/pnpm-lock.yaml
 .npmrc
+.yarn
 
 # IDEs and editors
 .idea

diff --git a/apps/automated/src/pages/page11.ts b/apps/automated/src/pages/page11.ts
@@ -51,7 +51,7 @@ export function createPage() {
 	//page.content = GridLayout;
 	page.content = StackLayout;
 	var x = 1;
-	btn1.on(button.Button.tapEvent, function () {
+	btn1.on(button.tapEvent, function () {
 		x++;
 		var gravity;
 		//btn1.android.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT));

diff --git a/apps/automated/src/pages/page7.ts b/apps/automated/src/pages/page7.ts
@@ -13,7 +13,7 @@ export function createPage() {
 	var vAligns: CoreTypes.VerticalAlignmentType[] = ['stretch', 'top', 'middle', 'bottom'];
 	//var hAligns = ["stretch", "left", "center", "right"];
 	var count = 0;
-	btn.on(buttons.Button.tapEvent, function () {
+	btn.on(buttons.tapEvent, function () {
 		//page.css = "button { vertical-align:" + vAligns[(count++) % 4] + " }";
 		btn.verticalAlignment = vAligns[count++ % 4];
 	});

diff --git a/apps/automated/src/pages/page8.ts b/apps/automated/src/pages/page8.ts
@@ -41,7 +41,7 @@ export function createPage() {
 	var counter = 0;
 	var btn = new btns.Button();
 	btn.text = 'tap';
-	btn.on(btns.Button.tapEvent, function () {
+	btn.on(btns.tapEvent, function () {
 		btn.text = 'hi: ' + counter++;
 	});
 	btn.isEnabled = false;
@@ -52,7 +52,7 @@ export function createPage() {
 	var info = new btns.Button();
 	info.text = 'info';
 	info.className = 'info';
-	info.on(btns.Button.tapEvent, function () {
+	info.on(btns.tapEvent, function () {
 		info.text = 'hi: ' + counter++;
 		btn.isEnabled = true;
 	});

diff --git a/apps/automated/src/pages/property-bindings.ts b/apps/automated/src/pages/property-bindings.ts
@@ -41,7 +41,7 @@ export function createPage() {
 	var count = 0;
 	var control = new btns.Button();
 	control.text = 'test control';
-	control.on(btns.Button.tapEvent, (data) => {
+	control.on(btns.tapEvent, (data) => {
 		control.text = 'count: ' + count++;
 	});
 	grid.addChild(control);

diff --git a/apps/automated/src/tk-unit.ts b/apps/automated/src/tk-unit.ts
@@ -378,7 +378,7 @@ export function waitUntilReady(isReady: () => boolean, timeoutSec: number = 5, s
 
 // Setup for the Android modal loop implementation
 // TODO: If these platform-specific implementations continue to grow, think of per-platform separation (TKUnit.android)
-let nextMethod;
+let nextMethod: java.lang.reflect.Method;
 let targetField;
 let prepared;
 

diff --git a/apps/automated/src/ui/button/button-tests.ts b/apps/automated/src/ui/button/button-tests.ts
@@ -2,6 +2,7 @@ import * as TKUnit from '../../tk-unit';
 import * as helper from '../../ui-helper';
 import { View, EventData, Button, Observable, Color, Page, FormattedString, BindingOptions, Span } from '@nativescript/core';
 import * as buttonTestsNative from './button-tests-native';
+import * as button from '@nativescript/core/ui/button';
 
 export function test_recycling() {
 	helper.nativeView_recycling_test(() => new Button());
@@ -95,7 +96,7 @@ var _testOnClick = function (views: Array<View>) {
 
 	var actualValue = false;
 	// >> button-tap
-	button.on(Button.tapEvent, function (args: EventData) {
+	button.on(button.tapEvent, function (args: EventData) {
 		// Do something
 		// >> (hide)
 		actualValue = true;

diff --git a/apps/automated/src/ui/root-view/mymodule/MyControl.ts b/apps/automated/src/ui/root-view/mymodule/MyControl.ts
@@ -13,7 +13,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
 		lbl.id = 'my-test-label';
 		var btn = new button.Button();
 		btn.text = 'Tap me!';
-		btn.on(button.Button.tapEvent, (args: EventData) => {
+		btn.on(button.tapEvent, (args: EventData) => {
 			lbl.text = 'Tap ' + counter++;
 		});
 

diff --git a/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts b/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts
@@ -1,6 +1,7 @@
 import * as TKUnit from '../../tk-unit';
 import * as helper from '../../ui-helper';
 import { isIOS, isAndroid, Label, StackLayout, Frame, Page, ListView, ItemEventData, TabView, TabViewItem, Button } from '@nativescript/core';
+import * as button from '@nativescript/core/ui/button';
 
 var ASYNC = 2;
 
@@ -37,7 +38,7 @@ function _createListView(): ListView {
 		var button = <Button>args.view;
 		if (!button) {
 			button = new Button();
-			button.on(Button.tapEvent, _clickHandlerFactory(args.index));
+			button.on(button.tapEvent, _clickHandlerFactory(args.index));
 			args.view = button;
 		}
 

diff --git a/apps/automated/src/xml-declaration/mymodule/MyControl.ts b/apps/automated/src/xml-declaration/mymodule/MyControl.ts
@@ -1,4 +1,5 @@
 import { StackLayout, Label, Button, EventData } from '@nativescript/core';
+import * as button from '@nativescript/core/ui/button';
 
 export class MyControl extends StackLayout {
 	constructor() {
@@ -9,7 +10,7 @@ export class MyControl extends StackLayout {
 		var lbl = new Label();
 		var btn = new Button();
 		btn.text = 'Tap me!';
-		btn.on(Button.tapEvent, (args: EventData) => {
+		btn.on(button.tapEvent, (args: EventData) => {
 			lbl.text = 'Tap ' + counter++;
 		});
 

diff --git a/apps/toolbox/src/pages/animation-curves-page.ts b/apps/toolbox/src/pages/animation-curves-page.ts
@@ -0,0 +1,68 @@
+import { getViewById, View, Page, Button, SegmentedBar, SegmentedBarItem, Label, Animation, AnimationDefinition } from '@nativescript/core';
+
+export function easeAnimate(args) {
+	const clicked = args.object as Button;
+	const page: Page = clicked.page;
+	const target = getViewById(page, 'target') as Label;
+	const select = getViewById(page, 'select') as SegmentedBar;
+	const item: SegmentedBarItem = select.items[select.selectedIndex];
+	const easeType: string = clicked.text;
+	const extent = 128;
+	let duration = easeType === 'spring' ? 800 : 500;
+	let delay = easeType === 'spring' ? 0 : 200;
+	let animateKey: string = null;
+	let animateValueTo: any = null;
+	let animateValueFrom: any = null;
+
+	switch (item.title) {
+		case 'height':
+			animateKey = 'height';
+			target.originX = target.originY = 0;
+			animateValueTo = 0;
+			animateValueFrom = extent;
+			break;
+		case 'width':
+			animateKey = 'width';
+			target.originX = target.originY = 0;
+			animateValueTo = 0;
+			animateValueFrom = extent;
+			break;
+		case 'opacity':
+			animateKey = 'opacity';
+			animateValueTo = 0;
+			animateValueFrom = 1;
+			break;
+		case 'color':
+			animateKey = 'backgroundColor';
+			animateValueTo = 'blue';
+			animateValueFrom = 'purple';
+			break;
+		case 'rotate':
+			animateKey = 'rotate';
+			target.originX = target.originY = 0.5;
+			animateValueTo = 180;
+			animateValueFrom = 0;
+			break;
+		case 'scale':
+			animateKey = 'scale';
+			target.originX = target.originY = 0.5;
+			animateValueTo = { x: 1.5, y: 1.5 };
+			animateValueFrom = { x: 1, y: 1 };
+			break;
+	}
+	target
+		.animate({
+			[animateKey]: animateValueTo,
+			duration,
+			curve: easeType,
+		})
+		.then(() => {
+			return target.animate({
+				[animateKey]: animateValueFrom,
+				delay,
+				duration,
+				curve: easeType,
+			});
+		})
+		.catch((e) => console.log(e));
+}
diff --git a/apps/toolbox/src/pages/animation-curves-page.xml b/apps/toolbox/src/pages/animation-curves-page.xml
@@ -0,0 +1,31 @@
+<Page>
+    <AbsoluteLayout>
+        <GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
+
+            <Label row="0" colSpan="3" text="Animate"/>
+            <SegmentedBar row="1" colSpan="3" id="select">
+                <SegmentedBar.items>
+                    <SegmentedBarItem title="height"/>
+                    <SegmentedBarItem title="width"/>
+                    <SegmentedBarItem title="opacity"/>
+                    <SegmentedBarItem title="color"/>
+                    <SegmentedBarItem title="rotate"/>
+                    <SegmentedBarItem title="scale"/>
+                </SegmentedBar.items>
+            </SegmentedBar>
+
+            <Label row="2" colSpan="3" text="Easing"/>
+            <Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
+            <Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
+            <Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
+            <Button row="4" col="0" text="spring" tap="easeAnimate"/>
+            <Button row="4" col="1" text="linear" tap="easeAnimate"/>
+            <Button row="4" col="2" text="ease" tap="easeAnimate"/>
+        </GridLayout>
+
+        <Label top="300" left="96" height="128" width="128"
+               borderColor="purple" borderWidth="1"/>
+        <Label top="300" left="96" height="128" width="128"
+               id="target" backgroundColor="purple"/>
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/box-shadow.ts b/apps/toolbox/src/pages/box-shadow.ts
@@ -1,4 +1,4 @@
-import { Observable, EventData, Page } from '@nativescript/core';
+import { Observable, EventData, Page, CoreTypes } from '@nativescript/core';
 
 export function navigatingTo(args: EventData) {
 	const page = <Page>args.object;
@@ -123,17 +123,20 @@ export class BoxShadowModel extends Observable {
 	toggleAnimation(args) {
 		const view = args.object;
 		const animationDuration = 500;
+		let curve;
 		if (this._selectedAnimation === 'width') {
 			const originalWidth = args.object.getActualSize().width;
 			view
 				.animate({
 					width: originalWidth / 2,
 					duration: animationDuration,
+					curve,
 				})
 				.then(() =>
 					view.animate({
 						width: originalWidth,
 						duration: animationDuration,
+						curve,
 					}),
 				)
 				.catch((err) => {
@@ -145,11 +148,13 @@ export class BoxShadowModel extends Observable {
 				.animate({
 					height: originalHeight / 2,
 					duration: animationDuration,
+					curve,
 				})
 				.then(() =>
 					view.animate({
 						height: originalHeight,
 						duration: animationDuration,
+						curve,
 					}),
 				)
 				.catch((err) => {
@@ -162,15 +167,17 @@ export class BoxShadowModel extends Observable {
 					scale: this._selectedAnimation === 'scale' ? { x: 0.5, y: 0.6 } : { x: 1, y: 1 },
 					rotate: this._selectedAnimation === 'rotate' ? 180 : 0,
 					translate: this._selectedAnimation === 'translate' ? { x: 100, y: 100 } : { x: 0, y: 0 },
-					duration: 500,
+					duration: animationDuration,
+					curve,
 				})
 				.then(() =>
 					view.animate({
 						opacity: 1,
 						scale: { x: 1, y: 1 },
 						rotate: 0,
 						translate: { x: 0, y: 0 },
-						duration: 500,
+						duration: animationDuration,
+						curve,
 					}),
 				)
 				.catch((err) => {

diff --git a/apps/toolbox/src/pages/css-animations.css b/apps/toolbox/src/pages/css-animations.css
@@ -0,0 +1,79 @@
+.fade-blink {
+    animation-name: fadeAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.scale-blink {
+    animation-name: scaleAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.slide-blink {
+    animation-name: slideAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.color-blink {
+    animation-name: colorAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeAndBack {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes colorAndBack {
+    0% {
+        background-color: blue;
+    }
+
+    50% {
+        background-color: yellow;
+    }
+
+    100% {
+        background-color: blue;
+    }
+}
+
+@keyframes slideAndBack {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(100%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes scaleAndBack {
+    0% {
+        transform: scale(1, 1);
+    }
+
+    50% {
+        transform: scale(0, 0);
+    }
+
+    100% {
+        transform: scale(1, 1);
+    }
+}
diff --git a/apps/toolbox/src/pages/css-animations.ts b/apps/toolbox/src/pages/css-animations.ts
@@ -0,0 +1,7 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { Page } from '@nativescript/core/ui/page';
+
+export function onLoaded(args: EventData) {
+	var page = <Page>args.object;
+
+}
diff --git a/apps/toolbox/src/pages/css-animations.xml b/apps/toolbox/src/pages/css-animations.xml
@@ -0,0 +1,7 @@
+<Page loaded="onLoaded">
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <Button class="s0 fade-blink" row="0" col="0" text="Button"/>
+        <Label color="black" class="s0 color-blink" row="1" col="0" text="This is a test" backgroundColor="red"/>
+        <Button class="s0 slide-blink" row="2" col="0" text="Button"/>
+    </GridLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/layout-stack-height-page.ts b/apps/toolbox/src/pages/layout-stack-height-page.ts
@@ -0,0 +1,14 @@
+import { View } from '@nativescript/core';
+
+export function tapLabel(args) {
+	const clicked: View = args.object;
+	const graffiti = clicked as any;
+	clicked.animate({
+		height: graffiti.toggle ? 'auto' : 128,
+		color: graffiti.toggle ? 'red': 'yellow',
+		borderRadius: graffiti.toggle ? 0: 40,
+		duration: 700,
+		curve: 'ease',
+	});
+	graffiti.toggle = !graffiti.toggle;
+}