feat: new tabs component to replace N one

Author: farfromrefug

packages/nativescript-material-tabs/.npmignore

@@ -0,0 +1,8 @@
+node_modules/
+bin/
+src/
+hooks/
+*.ts
+*.old
+tsconfig.json
+!*.d.ts

packages/nativescript-material-tabs/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "nativescript-material-tabs",
+    "version": "3.1.17",
+    "description": "Material Tabs component",
+    "main": "./tabs",
+    "typings": "./tabs.d.ts",
+    "scripts": {
+        "tsc-win": "..\\..\\node_modules\\.bin\\tsc && copy ..\\..\\src\\tabs\\tabs.d.ts .\\",
+        "tsc": "cp ../../src/tabs/tabs.d.ts ./ && ../../node_modules/.bin/tsc --skipLibCheck",
+        "ngc-win": "..\\..\\node_modules\\.bin\\ngc",
+        "ngc": "NODE_OPTIONS=--max_old_space_size=8192 ../../node_modules/.bin/ngc",
+        "clean": "../../node_modules/.bin/rimraf ./*.d.ts ./*.js ./*.js.map"
+    },
+    "nativescript": {
+        "platforms": {
+            "android": "6.2.0",
+            "ios": "6.2.0"
+        }
+    },
+    "keywords": [
+        "NativeScript",
+        "JavaScript",
+        "Android",
+        "iOS"
+    ],
+    "author": {
+        "name": "Martin Guillon",
+        "email": "[email protected]"
+    },
+    "bugs": {
+        "url": "https://github.com/Akylas/nativescript-material-components/issues"
+    },
+    "license": "Apache-2.0",
+    "homepage": "https://github.com/Akylas/nativescript-material-components",
+    "readmeFilename": "README.md",
+    "dependencies": {
+        "nativescript-material-core": "^3.1.17"
+    }
+}

packages/nativescript-material-tabs/platforms/ios/Podfile

@@ -0,0 +1 @@
+pod 'MaterialComponents/Tabs+ColorThemer'

packages/nativescript-material-tabs/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "../../src/tabs",
+        "outDir": "./",
+        "paths": {
+            "tns-core-modules": ["./node_modules/@nativescript/core"],
+            "tns-core-modules/*": ["./node_modules/@nativescript/core/*"],
+            "*": ["node_modules/*", "packages/*"]
+        }
+    },
+    "include": ["../../src/tabs/**/*.ts", "../../references.d.ts", "../../src/references.d.ts"]
+}

src/tabs/angular/index.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { registerElement } from '@nativescript/angular/element-registry';
+
+import { Directive } from '@angular/core';
+
+@Directive({ selector: 'MDTabs' })
+export class MaterialTabsDirective {}
+
+@NgModule({
+    declarations: [MaterialTabsDirective],
+    exports: [MaterialTabsDirective]
+})
+export class NativeScriptMaterialTabsModule {}
+
+registerElement('MDTabs', () => require('../tabs').Tabs);

src/tabs/angular/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "index.js"
+}

src/tabs/tabs-common.ts

@@ -0,0 +1,73 @@
+// Types
+import { Tabs as TabsDefinition } from "./tabs";
+
+// Requires
+import { TabNavigationBase } from "@nativescript/core/ui/tab-navigation-base/tab-navigation-base";
+import { CSSType, booleanConverter } from "@nativescript/core/ui/core/view";
+import { Property } from "@nativescript/core/ui/core/properties";
+
+declare module '@nativescript/core/data/observable' {
+    interface Observable {
+        _emit(eventName: string);
+    }
+}
+declare module '@nativescript/core/ui/core/view/view' {
+    interface View {
+        callLoaded(): void;
+        _getFragmentManager();
+    }
+}
+declare module '@nativescript/core/ui/frame' {
+    interface Frame {
+        _pushInFrameStackRecursive();
+        _animationInProgress: boolean;
+    }
+}
+declare module '@nativescript/core/ui/tab-navigation-base/tab-strip-item' {
+    namespace TabStripItem {
+        const selectEvent: string;
+        const unselectEvent: string;
+    }
+    interface TabStripItem {
+        _index: number;
+    }
+}
+
+// export * from "@nativescript/core/ui/tab-navigation-base/tab-content-item";
+// export * from "@nativescript/core/ui/tab-navigation-base/tab-navigation-base";
+// export * from "@nativescript/core/ui/tab-navigation-base/tab-strip";
+// export * from "@nativescript/core/ui/tab-navigation-base/tab-strip-item";
+
+export const traceCategory = "TabView";
+
+export module knownCollections {
+    export const items = "items";
+}
+
+@CSSType("Tabs")
+export class TabsBase extends TabNavigationBase implements TabsDefinition {
+    public swipeEnabled: boolean;
+    public offscreenTabLimit: number;
+    public tabsPosition: "top" | "bottom";
+    public iOSTabBarItemsAlignment: IOSTabBarItemsAlignment;
+}
+
+// TODO: Add Unit tests
+export const swipeEnabledProperty = new Property<TabsBase, boolean>({
+    name: "swipeEnabled", defaultValue: true, valueConverter: booleanConverter
+});
+swipeEnabledProperty.register(TabsBase);
+
+// TODO: Add Unit tests
+// TODO: Coerce to max number of items?
+export const offscreenTabLimitProperty = new Property<TabsBase, number>({
+    name: "offscreenTabLimit", defaultValue: 1, valueConverter: (v) => parseInt(v)
+});
+offscreenTabLimitProperty.register(TabsBase);
+
+export const tabsPositionProperty = new Property<TabsBase, "top" | "bottom">({ name: "tabsPosition", defaultValue: "top" });
+tabsPositionProperty.register(TabsBase);
+
+export type IOSTabBarItemsAlignment = "leading" | "justified" | "center" | "centerSelected";
+export const iOSTabBarItemsAlignmentProperty = new Property<TabsBase, IOSTabBarItemsAlignment>({ name: "iOSTabBarItemsAlignment", defaultValue: "justified" });
+iOSTabBarItemsAlignmentProperty.register(TabsBase);