feat(auto-fit-text): added (#4)

.gitignore

@@ -42,3 +42,4 @@ Thumbs.db
 
 *.tgz
 packages/**/angular/dist
+*.aar

README.md

@@ -6,6 +6,7 @@ npm start
 ```
 
 - @nativescript/appavailability
+- @nativescript/auto-fit-text
 - @nativescript/background-http
 - @nativescript/brightness
 - @nativescript/camera

apps/demo-angular/package.json

@@ -29,11 +29,12 @@
 		"@nativescript/shared-notification-delegate": "file:../../dist/packages/shared-notification-delegate",
 		"@nativescript/zip": "file:../../dist/packages/zip",
 		"@nativescript/background-http": "file:../../dist/packages/background-http",
-		"@nativescript/social-share": "file:../../dist/packages/social-share"
+		"@nativescript/social-share": "file:../../dist/packages/social-share",
+		"@nativescript/auto-fit-text": "file:../../dist/packages/auto-fit-text"
 	},
 	"devDependencies": {
 		"@angular/compiler-cli": "file:../../node_modules/@angular/compiler-cli",
-		"@nativescript/android": "~7.0.0",
+		"@nativescript/android": "7.0.0",
 		"@nativescript/ios": "7.0.0",
 		"@nativescript/webpack": "~3.0.0",
 		"@ngtools/webpack": "file:../../node_modules/@ngtools/webpack",

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

@@ -8,6 +8,7 @@ const routes: Routes = [
 	{ path: '', redirectTo: '/home', pathMatch: 'full' },
 	{ path: 'home', component: HomeComponent },
 	{ path: 'appavailability', loadChildren: () => import('./plugin-demos/appavailability.module').then((m) => m.AppavailabilityModule) },
+	{ path: 'auto-fit-text', loadChildren: () => import('./plugin-demos/auto-fit-text.module').then((m) => m.AutoFitTextModule) },
 	{ path: 'background-http', loadChildren: () => import('./plugin-demos/background-http.module').then((m) => m.BackgroundHttpModule) },
 	{ path: 'brightness', loadChildren: () => import('./plugin-demos/brightness.module').then((m) => m.BrightnessModule) },
 	{ path: 'camera', loadChildren: () => import('./plugin-demos/camera.module').then((m) => m.CameraModule) },

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

@@ -9,6 +9,9 @@ export class HomeComponent {
 		{
 			name: 'appavailability',
 		},
+		{
+			name: 'auto-fit-text',
+		},
 		{
 			name: 'background-http',
 		},

apps/demo-angular/src/plugin-demos/auto-fit-text.component.html

@@ -0,0 +1,7 @@
+<ActionBar title="auto-fit-text" class="action-bar"> </ActionBar>
+<GridLayout rows="*, *, *, *" columns="*" class="p-20">
+	<Label row="0" fontSize="36" text="This is a standard NS Label with textWrap enabled." textWrap="true"></Label>
+	<AutoFitText row="1" text="Lorem Ipsum this is a long string of text that will shrink to fit this line." textWrap="false"></AutoFitText>
+	<AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AutoFitText>
+	<AutoFitText row="3" text="Another line of AutoFitText" textWrap="false"></AutoFitText>
+</GridLayout>

apps/demo-angular/src/plugin-demos/auto-fit-text.component.ts

@@ -0,0 +1,17 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedAutoFitText } from '@demo/shared';
+import { } from '@nativescript/auto-fit-text';
+
+@Component({
+	selector: 'demo-auto-fit-text',
+	templateUrl: 'auto-fit-text.component.html',
+})
+export class AutoFitTextComponent {
+	demoShared: DemoSharedAutoFitText;
+
+	constructor(private _ngZone: NgZone) {}
+
+	ngOnInit() {
+		this.demoShared = new DemoSharedAutoFitText();
+	}
+}

apps/demo-angular/src/plugin-demos/auto-fit-text.module.ts

@@ -0,0 +1,11 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';
+import { AutoFitTextComponent } from './auto-fit-text.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptAutoFitTextModule, NativeScriptRouterModule.forChild([{ path: '', component: AutoFitTextComponent }])],
+	declarations: [AutoFitTextComponent],
+	schemas: [NO_ERRORS_SCHEMA],
+})
+export class AutoFitTextModule {}

apps/demo-angular/src/plugin-demos/background-http.component.html

@@ -2,7 +2,7 @@
 <StackLayout class="p-20">
 	<ScrollView class="h-full">
 		<StackLayout>
-			<Button text="Test background-http" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+			<!-- <Button text="Test background-http" (tap)="demoShared.testIt()" class="btn btn-primary"></Button> -->
 		</StackLayout>
 	</ScrollView>
 </StackLayout>

apps/demo-angular/src/plugin-demos/brightness.component.html

@@ -2,7 +2,7 @@
 <StackLayout class="p-20">
 	<ScrollView class="h-full">
 		<StackLayout>
-			<Button text="Test brightness" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+			<!-- <Button text="Test brightness" (tap)="demoShared.testIt()" class="btn btn-primary"></Button> -->
 		</StackLayout>
 	</ScrollView>
 </StackLayout>

apps/demo-angular/src/plugin-demos/social-share.component.html

@@ -2,7 +2,7 @@
 <StackLayout class="p-20">
 	<ScrollView class="h-full">
 		<StackLayout>
-			<Button text="Test social-share" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+			<!-- <Button text="Test social-share" (tap)="demoShared.testIt()" class="btn btn-primary"></Button> -->
 		</StackLayout>
 	</ScrollView>
 </StackLayout>

apps/demo/package.json

@@ -20,10 +20,11 @@
 		"@nativescript/shared-notification-delegate": "file:../../packages/shared-notification-delegate",
 		"@nativescript/zip": "file:../../packages/zip",
 		"@nativescript/background-http": "file:../../packages/background-http",
-		"@nativescript/social-share": "file:../../packages/social-share"
+		"@nativescript/social-share": "file:../../packages/social-share",
+		"@nativescript/auto-fit-text": "file:../../packages/auto-fit-text"
 	},
 	"devDependencies": {
-		"@nativescript/android": "~7.0.0",
+		"@nativescript/android": "7.0.0",
 		"@nativescript/ios": "7.0.0",
 		"@nativescript/webpack": "3.0.0",
 		"typescript": "file:../../node_modules/typescript"

apps/demo/src/main-page.xml

@@ -18,8 +18,9 @@
         <Button text="local-notifications" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="shared-notification-delegate" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="zip" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
-<Button text="background-http" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
-<Button text="social-share" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+        <Button text="background-http" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+        <Button text="social-share" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+        <Button text="auto-fit-text" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/demo/src/plugin-demos/auto-fit-text.ts

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

apps/demo/src/plugin-demos/auto-fit-text.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+  xmlns:AFT="@nativescript/auto-fit-text" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="auto-fit-text" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+  <GridLayout rows="*, *, *, *" columns="*" class="p-20">
+    <Label row="0" fontSize="36" text="This is a standard NS Label with textWrap enabled." textWrap="true"></Label>
+    <AFT:AutoFitText row="1" text="Lorem Ipsum this is a long string of text that will shrink to fit this line." textWrap="false"></AFT:AutoFitText>
+    <AFT:AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AFT:AutoFitText>
+    <AFT:AutoFitText row="3" text="Another line of AutoFitText" textWrap="false"></AFT:AutoFitText>
+  </GridLayout>
+</Page>

nx.json

@@ -70,6 +70,9 @@
 		},
 		"social-share": {
 			"tags": []
+		},
+		"auto-fit-text": {
+			"tags": []
 		}
 	},
 	"workspaceLayout": {

package.json

@@ -4,8 +4,8 @@
 	"license": "MIT",
 	"scripts": {
 		"setup": "npx rimraf node_modules package-lock.json dist tmp && npm i && ts-patch install",
-    "start": "nps",
-    "add": "nx workspace-schematic add-package"
+		"start": "nps",
+		"add": "nx workspace-schematic add-package"
 	},
 	"private": true,
 	"devDependencies": {

packages/auto-fit-text/README.md

@@ -0,0 +1,50 @@
+# Nativescript auto-fit-text
+
+```bash
+ns plugin add @nativescript/auto-fit-text
+```
+
+This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width
+
+## Usage
+
+### Nativescript
+
+```xml
+<Page
+  xmlns="http://schemas.nativescript.org/tns.xsd"
+  loaded="pageLoaded"
+  class="page"
+  xmlns:AFT="@nativescript/auto-fit-text"
+>
+  <StackLayout class="p-20">
+    <AFT:AutoFitText
+      text="Testinggggggggggggggggg"
+      textWrap="false"
+    ></AFT:AutoFitText>
+  </StackLayout>
+</Page>
+```
+
+### Angular NativeScript
+
+```typescript
+import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';
+
+// Be sure to add the plugin module to your NgModule
+@NgModule({
+	imports: [NativeScriptAutoFitTextModule],
+})
+```
+
+```xml
+<AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AutoFitText>
+```
+
+## Credits
+
+[@grantland - android-autofittextview](https://github.com/grantland/android-autofittextview)
+
+## License
+
+Apache License Version 2.0, January 2004

packages/auto-fit-text/angular/index.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { registerElement } from '@nativescript/angular';
+import { AutoFitText } from '@nativescript/auto-fit-text';
+
+@NgModule()
+export class NativeScriptAutoFitTextModule {}
+
+registerElement('AutoFitText', () => AutoFitText);

packages/auto-fit-text/angular/package.json

@@ -0,0 +1,16 @@
+{
+	"name": "nativescript-auto-fit-text-angular",
+	"ngPackage": {
+		"lib": {
+			"entryFile": "index.ts",
+			"umdModuleIds": {
+				"@nativescript/core": "ns-core",
+				"@nativescript/angular": "ns-angular",
+				"@nativescript/auto-fit-text": "ns-auto-fit-text"
+			}
+		},
+		"whitelistedNonPeerDependencies": [
+			"."
+		]
+	}
+}

packages/auto-fit-text/angular/tsconfig.angular.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../node_modules/ng-packagr/lib/ts/conf/tsconfig.ngc.json",
+	"compilerOptions": {
+		"types": ["node"],
+		"baseUrl": ".",
+		"paths": {
+			"@nativescript/auto-fit-text": ["../../../dist/packages/auto-fit-text"]
+		}
+	}
+}

packages/auto-fit-text/index.android.ts

@@ -0,0 +1,28 @@
+import { Label } from '@nativescript/core';
+
+declare var me: any;
+
+export class AutoFitText extends Label {
+	public createNativeView(): Object {
+		const textField: android.widget.TextView = super.createNativeView() as android.widget.TextView;
+		textField.setMaxLines(1);
+		textField.setSingleLine();
+		textField.setMaxHeight(200);
+		textField.setTextSize(200);
+		textField.setMinHeight(40);
+		textField.setTextAlignment(android.widget.TextView.TEXT_ALIGNMENT_CENTER);
+
+		me.grantland.widget.AutofitHelper.create(textField);
+		return textField;
+	}
+
+	initNativeView(): void {
+		this.nativeView.owner = this;
+		super.initNativeView();
+	}
+
+	disposeNativeView(): void {
+		this.nativeView.owner = null;
+		super.disposeNativeView();
+	}
+}

packages/auto-fit-text/index.d.ts

@@ -0,0 +1,6 @@
+import { Label } from '@nativescript/core';
+export declare class AutoFitText extends Label {
+	createNativeView(): Object;
+	initNativeView(): void;
+	disposeNativeView(): void;
+}

packages/auto-fit-text/index.ios.ts

@@ -0,0 +1,28 @@
+import { Label } from '@nativescript/core';
+
+export class AutoFitText extends Label {
+	constructor() {
+		super();
+	}
+
+	initNativeView(): void {
+		this.nativeView.owner = this;
+
+		const label = this.ios as UILabel;
+		// label.font = label.font.fontWithSize(40);
+		label.adjustsFontSizeToFitWidth = true;
+		label.textAlignment = NSTextAlignment.Natural;
+
+		super.initNativeView();
+	}
+
+	disposeNativeView(): void {
+		// Remove reference from native view to this instance.
+		this.nativeView.owner = null;
+
+		// If you want to recycle nativeView and have modified the nativeView
+		// without using Property or CssProperty (e.g. outside our property system - 'setNative' callbacks)
+		// you have to reset it to its initial state here.
+		super.disposeNativeView();
+	}
+}

packages/auto-fit-text/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@nativescript/auto-fit-text",
+	"version": "1.0.0",
+	"description": "NativeScript plugin for a label that resizes on a single line to fit the screen.",
+	"main": "index",
+	"typings": "index.d.ts",
+	"nativescript": {
+		"platforms": {
+			"ios": "7.0.0",
+			"android": "7.0.0"
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/NativeScript/plugins.git"
+	},
+	"keywords": [
+		"NativeScript",
+		"JavaScript",
+		"TypeScript",
+		"iOS",
+		"Android",
+		"auto-fit-text"
+	],
+	"author": {
+		"name": "NativeScript",
+		"email": "oss@nativescript.org"
+	},
+	"bugs": {
+		"url": "https://github.com/NativeScript/plugins/issues"
+	},
+	"license": "Apache-2.0",
+	"homepage": "https://github.com/NativeScript/plugins",
+	"readmeFilename": "README.md",
+	"bootstrapper": "@nativescript/plugin-seed"
+}

packages/auto-fit-text/platforms/android/include.gradle

@@ -0,0 +1,9 @@
+/* Include.gradle configuration: http://docs.nativescript.org/plugins/plugins#includegradle-specification */
+
+android {
+
+}
+
+dependencies {
+	 compile 'me.grantland:autofittextview:0.2.+'
+}

packages/auto-fit-text/references.d.ts

@@ -0,0 +1 @@
+/// <reference path="../../references.d.ts" />

packages/auto-fit-text/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "../../dist/out-tsc",
+		"rootDir": "."
+	},
+	"exclude": ["**/*.spec.ts", "angular"],
+	"include": ["**/*.ts", "references.d.ts"]
+}