From 4144a97bdd2f3334bc5a35906e0afcd32193b9d9 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Thu, 19 Mar 2020 12:42:50 +0200 Subject: [PATCH] feat: tabs new features + version bunp --- app/ng-ui-widgets-category/tabs/end.md | 16 +++-- .../tabs/styling/styling.component.css | 2 +- .../tabs/styling/styling.component.html | 5 +- package.json | 13 +++-- webpack.config.js | 58 ++++++++++++++----- 5 files changed, 63 insertions(+), 31 deletions(-) diff --git a/app/ng-ui-widgets-category/tabs/end.md b/app/ng-ui-widgets-category/tabs/end.md index 855556a3..7d4c7d55 100644 --- a/app/ng-ui-widgets-category/tabs/end.md +++ b/app/ng-ui-widgets-category/tabs/end.md @@ -6,8 +6,12 @@ |:----------|:---------|:---------------| | `items` | `Array` | Gets or sets the items of the BottomNavigation. | | `selectedIndex` | `number` | Gets or sets the selectedIndex of the BottomNavigation. | +| `swipeEnabled` | `boolean` | Gets or sets the swipe enabled state of the Tabs. | +| `offscreenTabLimit` | `number` | Gets or sets the number of offscreen preloaded tabs of the Tabs. | | `tabStrip`| `TabStrip` | Gets or sets the tab strip of the BottomNavigation. | |` tabsPosition` | _"top"_, _"bottom"_ | Gets or sets the position state of the Tabs. Default value: **top** | +|` iOSTabBarItemsAlignment` | _"leading"_, _"justified"_, _"center"_, _"centerSelected"_ | **iOS Only:** Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: **justified** | + ### TabStrip Properties @@ -16,16 +20,18 @@ | `iosIconRenderingMode` | _"automatic"_, _"alwaysOriginal"_, _"alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. | | `isIconSizeFixed` | `boolean` | When set to `true` the icon will have fixed size following the platform-specific design guidelines. Default value: `true`. | | `items` | `Array` | Gets or sets an array of strip items of the TabStrip. | -| `highlightColor` | | Gets or sets the underline color of the selected TabStripItem. | +| `highlightColor` | `Color` | Gets or sets the underline color of the selected TabStripItem. | +| `selectedItemColor` | `Color` | Gets or sets the color of the selected items in the tab strip. | +| `unSelectedItemColor` | `Color` | Gets or sets the color of the non-selected items in the tab strip. | + ### TabStripItem Properties | Name | Type | Description | |-----------|----------|------------------------------------------------| | `title` | `string` | Gets or sets the title of the tab strip entry. | -| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`) | -| `image` | `Image` | Gets or sets the image of the tab strip entry. | -| `label` | `Label` | Gets or sets the label of the tab strip entry. | +| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`). **Note:** To be used for programmatic creation of Tabs | +| `iconClass` | `string` | Gets or sets the CSS class name of the icon in the tab strip entry. **Note:** To be used for programmatic creation of Tabs | ## Events @@ -67,4 +73,4 @@ | Android | iOS | |:----------------------|:---------| -| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [UITabViewController](https://developer.apple.com/documentation/uikit/uitabbarcontroller?language=objc) | +| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [MDCTabBar](https://material.io/develop/ios/components/tabs/api-docs/Classes/MDCTabBar.html) | diff --git a/app/ng-ui-widgets-category/tabs/styling/styling.component.css b/app/ng-ui-widgets-category/tabs/styling/styling.component.css index 427b5d8a..ac7eb89f 100644 --- a/app/ng-ui-widgets-category/tabs/styling/styling.component.css +++ b/app/ng-ui-widgets-category/tabs/styling/styling.component.css @@ -2,7 +2,7 @@ Tabs.bottom-nav { background-color: orangered; color: gold; - font-size: 24; + font-size: 18; } TabStripItem.tabstripitem-active { diff --git a/app/ng-ui-widgets-category/tabs/styling/styling.component.html b/app/ng-ui-widgets-category/tabs/styling/styling.component.html index 2b0dbb17..a80f095e 100644 --- a/app/ng-ui-widgets-category/tabs/styling/styling.component.html +++ b/app/ng-ui-widgets-category/tabs/styling/styling.component.html @@ -1,8 +1,7 @@ - - + - + diff --git a/package.json b/package.json index 8ad759f2..ae2c6897 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,10 @@ "nativescript": { "id": "org.nativescript.nativescriptsdkexamplesng", "tns-android": { - "version": "6.2.0-2019-10-16-170919-03" + "version": "6.5.0" }, "tns-ios": { - "version": "6.1.0" + "version": "6.5.0" } }, "dependencies": { @@ -36,14 +36,15 @@ "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", + "@nativescript/core": "^6.5.0", "@nativescript/theme": "^2.1.2", - "nativescript-angular": "8.3.0-next-2019-10-17-143908-01", + "nativescript-angular": "^8.21.0", "nativescript-camera": "^4.5.0", "nativescript-geolocation": "^5.1.0", "nativescript-intl": "~3.0.0", "reflect-metadata": "~0.1.12", "rxjs": "^6.4.0", - "tns-core-modules": "6.3.0-next-2019-10-17-174536-07", + "tns-core-modules": "^6.5.0", "zone.js": "^0.9.1" }, "devDependencies": { @@ -54,11 +55,11 @@ "glob": "^7.1.3", "lazy": "1.0.11", "markdown-snippet-injector": "^0.2.2", - "nativescript-dev-webpack": "1.4.0-next-2019-10-17-185549-03", + "nativescript-dev-webpack": "^1.5.1", "opener": "^1.4.1", "rimraf": "^2.5.3", "tar.gz": "^1.0.5", - "tns-platform-declarations": "6.0.1", + "tns-platform-declarations": "^6.4.2", "tslint": "^5.11.0", "typescript": "~3.5.3" }, diff --git a/webpack.config.js b/webpack.config.js index 593b27d0..f0b43bbe 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader"); const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng"); const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils"); -const { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils"); +const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils"); const CleanWebpackPlugin = require("clean-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); @@ -18,12 +18,13 @@ const hashSalt = Date.now().toString(); module.exports = env => { // Add your custom Activities, Services and other Android app components here. - const appComponents = [ + const appComponents = env.appComponents || []; + appComponents.push(...[ "tns-core-modules/ui/frame", "tns-core-modules/ui/frame/activity", - ]; + ]); - const platform = env && (env.android && "android" || env.ios && "ios"); + const platform = env && (env.android && "android" || env.ios && "ios" || env.platform); if (!platform) { throw new Error("You need to provide a target platform!"); } @@ -60,11 +61,32 @@ module.exports = env => { const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); - const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const tsConfigName = "tsconfig.tns.json"; + const tsConfigPath = join(__dirname, tsConfigName); + const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot }); + const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot }); + let coreModulesPackageName = "tns-core-modules"; + const alias = env.alias || {}; + alias['~'] = appFullPath; + + const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath); + if (hasRootLevelScopedModules) { + coreModulesPackageName = "@nativescript/core"; + alias["tns-core-modules"] = coreModulesPackageName; + nsWebpack.processTsPathsForScopedModules({ compilerOptions }); + } + + if (hasRootLevelScopedAngular) { + alias["nativescript-angular"] = "@nativescript/angular"; + nsWebpack.processTsPathsForScopedAngular({ compilerOptions }); + } + + const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; const entryPath = `.${sep}${entryModule}`; - const entries = { bundle: entryPath }; + const entries = env.entries || {}; + entries.bundle = entryPath; + const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1); if (platform === "ios" && !areCoreModulesExternal) { entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules"; @@ -98,10 +120,11 @@ module.exports = env => { hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]), platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)), mainPath: join(appFullPath, entryModule), - tsConfigPath: join(__dirname, tsConfigName), + tsConfigPath, skipCodeGeneration: !aot, sourceMap: !!isAnySourceMapEnabled, - additionalLazyModuleResources: additionalLazyModuleResources + additionalLazyModuleResources: additionalLazyModuleResources, + compilerOptions: { paths: compilerOptions.paths } }); let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist); @@ -141,14 +164,12 @@ module.exports = env => { extensions: [".ts", ".js", ".scss", ".css"], // Resolve {N} system modules from tns-core-modules modules: [ - resolve(__dirname, "node_modules/tns-core-modules"), + resolve(__dirname, `node_modules/${coreModulesPackageName}`), resolve(__dirname, "node_modules"), - "node_modules/tns-core-modules", + `node_modules/${coreModulesPackageName}`, "node_modules", ], - alias: { - '~': appFullPath - }, + alias, symlinks: true }, resolveLoader: { @@ -228,19 +249,24 @@ module.exports = env => { { test: /\.html$|\.xml$/, use: "raw-loader" }, - // tns-core-modules reads the app.css and its imports using css-loader { test: /[\/|\\]app\.css$/, use: [ "nativescript-dev-webpack/style-hot-loader", - { loader: "css-loader", options: { url: false } } + { + loader: "nativescript-dev-webpack/css2json-loader", + options: { useForImports: true } + } ] }, { test: /[\/|\\]app\.scss$/, use: [ "nativescript-dev-webpack/style-hot-loader", - { loader: "css-loader", options: { url: false } }, + { + loader: "nativescript-dev-webpack/css2json-loader", + options: { useForImports: true } + }, "sass-loader" ] },