Fixes for NS6 & NS7

NativeScript · Dec 5, 2020 · c503241 · c503241
1 parent 176b8e8
commit c503241
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+<a name="2.3.4"></a>
+## [2.3.4](https://github.com/NativeScript/theme/compare/v2.3.3...v2.3.4) (2020-12-05)
+
+### Fixes
+
+* setMode should work correctly in all cases
+* Disables system theme so that NS themes can work properly...
+* Theme should work on NS 6 & 7 properly
+
+
 <a name="2.3.3"></a>
 ## [2.3.3](https://github.com/NativeScript/theme/compare/v2.3.2...v2.3.3) (2020-03-17)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/theme",
-  "version": "3.0.0",
+  "version": "2.3.4",
   "description": "NativeScript Core Theme",
   "author": "NativeScript <[email protected]>",
   "homepage": "https://www.nativescript.org",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@nativescript/core": "rc",
+    "@nativescript/core": "latest",
     "@nativescript/theme": "./src",
     "bootstrap": "~4.5.2",
     "nativescript-picker": "~2.1.2",
@@ -34,10 +34,7 @@
     "nativescript-masked-text-field": "~4.0.3"
   },
   "devDependencies": {
-    "@babel/core": "7.7.7",
-    "@babel/parser": "7.7.5",
-    "@babel/plugin-transform-modules-commonjs": "7.7.5",
-    "babel-eslint": "10.0.3",
+    "babel-eslint": "^10.0.3",
     "cache-loader": "4.1.0",
     "eslint": "6.4.0",
     "glob": "7.1.4",

diff --git a/scripts/builder.js b/scripts/builder.js
@@ -9,7 +9,6 @@ const fs = require("fs");
 const sass = require("sass");
 const glob = require("glob");
 const pjs = require("../package.json");
-const babel = require("@babel/core");
 const parse = require("@nativescript/core/css").parse;
 
 // Kill The original folder, so that way it is a clean folder
@@ -41,12 +40,6 @@ async function createThemeFiles() {
 
     createPackageJson();
 
-    // Transform imports to commonjs
-    // const transform = babel.transform(fs.readFileSync("./src/index.js"), {
-    //     plugins: ["@babel/transform-modules-commonjs"]
-    // });
-
-    // fs.writeFile("./nativescript-theme-core/index.js", transform.code, {}, () => { });
     copyFile("./src/index.js", "./nativescript-theme-core/index.js");
 
     // Copy typings

diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,32 @@
-import { Application, CSSUtils, Device, isAndroid, Screen, View, Frame } from "@nativescript/core";
+// This is kinda Hacky, but to retain NS 6 & NS 7 Compatibility we have to use different locations
+// For some of the items.
+const Core = require("@nativescript/core");
 
-const removeClass = CSSUtils.removeFromRootViewCssClasses;
+const isNS6 = Core.CSSUtils == null;
+const Platform = require("@nativescript/core/platform");
 
-const display = Screen.mainScreen;
+// We have to pull these directly to be compatible with NS 6 & NS 7
+const Application = isNS6 ? require("@nativescript/core/application") : Core.Application;
+const removeClass = isNS6 ? require("@nativescript/core/css/system-classes").removeFromRootViewCssClasses : Core.CSSUtils.removeFromRootViewCssClasses;
+const View = isNS6 ?  require("@nativescript/core/ui/core/view").View : Core.View;
+const Frame = isNS6 ? require("@nativescript/core/ui/frame").Frame :  Core.Frame;
+
+const display = Platform.Screen ? Platform.Screen.mainScreen : Platform.screen.mainScreen;
+const Device = Platform.Device ? Platform.Device : Platform.device;
 const whiteSpaceRegExp = /\s+/;
-const platformClass = `ns-${isAndroid ? "android" : "ios"}`;
+const platformClass = `ns-${Platform.isAndroid ? "android" : "ios"}`;
 const sdkVersionClass = Device.sdkVersion.replace(".", "-");
 
 let started = false;
 
+if (Platform.isAndroid) {
+    // Force disabling the system Overriding Theme if on Android
+    // this will then allow our Theme.Dark, Theme.Auto, and Theme.Light to work correctly...
+    Application.on("launch", () => {
+        androidx.appcompat.app.AppCompatDelegate.setDefaultNightMode(androidx.appcompat.app.AppCompatDelegate.MODE_NIGHT_NO);
+    });
+}
+
 export class ClassList {
     constructor(className) {
         this.list = new Set();
@@ -34,14 +52,34 @@ export class ClassList {
 }
 
 export class Theme {
-    static setMode(mode, root = Application.getRootView()) {
-        Theme.currentMode = mode;
-        Theme.rootView = root;
+    static setMode(mode, root = null) {
 
-        if (!root || !mode) {
+        if (mode !== Theme.Auto && mode !== Theme.Light && mode !== Theme.Dark) {
+            console.error("Invalid Theme in setMode", mode);
             return;
         }
 
+        // Set the current Mode
+        Theme.currentMode = mode;
+
+        // If we come into setMode to change, while something else is waiting to change, ignore the prior change...
+        if (Theme._timer != null) {
+            clearTimeout(Theme._timer);
+            Theme._timer = null;
+        }
+
+        // If we have no root view, then we need to get it -- however there is the possibility the root view
+        // Won't be ready, so we need to throw this off until it is...
+        if (root == null) {
+            root = Application.getRootView();
+            if (root == null) {
+                Theme._timer = setTimeout( () => { Theme.setMode(mode); Theme._timer = null; });
+                return;
+            }
+        }
+
+        Theme.rootView = root;
+
         const classList = new ClassList(Theme.rootView.className);
 
         classList.remove(Theme.Light, Theme.Dark);
@@ -52,7 +90,7 @@ export class Theme {
             classList.add(Theme.currentMode);
         } else {
             // Reset to Auto system theme
-            setTimeout(Application.systemAppearanceChanged.bind(this, Theme.rootView, Application.systemAppearance()));
+            setTimeout(  Application.systemAppearanceChanged.bind(this, Theme.rootView, Application.systemAppearance()));
         }
 
         Theme.rootView.className = classList.get();
@@ -80,6 +118,7 @@ export class Theme {
 Theme.Light = "ns-light";
 Theme.Dark = "ns-dark";
 Theme.Auto = "auto";
+Theme.currentMode = Theme.Auto;
 
 export default Theme;
 
@@ -94,7 +133,7 @@ View._setupAsRootView = function() {
 const oldSystemAppearanceChanged = Application.systemAppearanceChanged;
 
 if (oldSystemAppearanceChanged) {
-  Application.systemAppearanceChanged = function () {
+    Application.systemAppearanceChanged = function () {
         if (Theme.currentMode === Theme.Auto) {
             oldSystemAppearanceChanged.call(this, ...arguments);
         }
@@ -105,7 +144,7 @@ if (oldSystemAppearanceChanged) {
 const oldSystemAppearance = Application.systemAppearance;
 
 if (oldSystemAppearance) {
-  Application.systemAppearance = function () {
+    Application.systemAppearance = function () {
         if (Theme.currentMode === Theme.Auto) {
             return oldSystemAppearance.call(this, ...arguments);
         }
@@ -128,7 +167,7 @@ function updateRootClasses(orientation, root = Application.getRootView(), classe
 function handleOrientation({ newValue: orientation }) {
     updateRootClasses(orientation);
 
-    var modalViews = View._getRootModalViews();
+    let modalViews = View._getRootModalViews();
     if (modalViews && modalViews.length) {
         const classList = new ClassList(Application.getRootView().className);
 

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/theme",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Telerik NativeScript Core Theme",
   "author": "Telerik <[email protected]>",
   "main": "index",