Skip to content

Commit 6c71394

Browse files
vchimevmanoldonev
vchimev
authored and
manoldonev
committed
fix: UIUserInterfaceStyle is undefined for iOS <= 11 (#7931)
1 parent ce96dad commit 6c71394

File tree

6 files changed

+103
-7
lines changed

6 files changed

+103
-7
lines changed

‎tests/app/application/application-tests-common.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ export function testDisplayedEvent() {
2323
}
2424

2525
export function testOrientation() {
26-
TKUnit.assert(app.orientation, "Orientation not initialized.");
26+
TKUnit.assert(app.orientation(), "Orientation not initialized.");
2727
}

‎tests/app/application/application-tests.android.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,9 @@ export function testAndroidApplicationInitialized() {
4646
TKUnit.assert(app.android.nativeApp, "Android nativeApp not initialized.");
4747
TKUnit.assert(app.android.orientation, "Android orientation not initialized.");
4848
TKUnit.assert(app.android.packageName, "Android packageName not initialized.");
49+
TKUnit.assert(app.android.systemAppearance, "Android system appearance not initialized.");
50+
}
51+
52+
export function testSystemAppearance() {
53+
TKUnit.assert(app.systemAppearance(), "System appearance not initialized.");
4954
}

‎tests/app/application/application-tests.ios.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* tslint:disable:no-unused-variable */
22
import * as app from "tns-core-modules/application";
3+
import { ios } from "tns-core-modules/utils/utils";
34
import * as TKUnit from "../tk-unit";
45

56
export * from "./application-tests-common";
@@ -46,6 +47,21 @@ export function testIOSApplicationInitialized() {
4647
TKUnit.assert(app.ios.delegate, "iOS delegate not initialized.");
4748
TKUnit.assert(app.ios.nativeApp, "iOS nativeApp not initialized.");
4849
TKUnit.assert(app.ios.orientation, "iOS orientation not initialized.");
50+
51+
if (ios.MajorVersion <= 11) {
52+
TKUnit.assertNull(app.ios.systemAppearance, "iOS system appearance should be `null` on iOS <= 11.");
53+
} else {
54+
TKUnit.assert(app.ios.systemAppearance, "iOS system appearance not initialized.");
55+
}
56+
4957
TKUnit.assert(app.ios.window, "iOS window not initialized.");
5058
TKUnit.assert(app.ios.rootController, "iOS root controller not initialized.");
5159
}
60+
61+
export function testSystemAppearance() {
62+
if (ios.MajorVersion <= 11) {
63+
TKUnit.assertNull(app.systemAppearance(), "System appearance should be `null` on iOS <= 11.");
64+
} else {
65+
TKUnit.assert(app.systemAppearance(), "System appearance not initialized.");
66+
}
67+
}

‎tests/app/ui/styling/root-views-css-classes-tests.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from "tns-core-modules/application";
99
import {
1010
isAndroid,
11+
isIOS,
1112
device
1213
} from "tns-core-modules/platform";
1314
import { Button } from "tns-core-modules/ui/button/button";
@@ -21,6 +22,7 @@ import {
2122
_rootModalViews
2223
} from "tns-core-modules/ui/core/view/view-common";
2324
import { DeviceType } from "tns-core-modules/ui/enums/enums";
25+
import { ios as iosUtils } from "tns-core-modules/utils/utils";
2426

2527
const CLASS_NAME = "class-name";
2628
const ROOT_CSS_CLASS = "ns-root";
@@ -32,6 +34,8 @@ const TABLET_DEVICE_TYPE_CSS_CLASS = "ns-tablet";
3234
const PORTRAIT_ORIENTATION_CSS_CLASS = "ns-portrait";
3335
const LANDSCAPE_ORIENTATION_CSS_CLASS = "ns-landscape";
3436
const UNKNOWN_ORIENTATION_CSS_CLASS = "ns-unknown";
37+
const DARK_SYSTEM_APPEARANCE_CSS_CLASS = "ns-dark";
38+
const LIGHT_SYSTEM_APPEARANCE_CSS_CLASS = "ns-light";
3539

3640
function _test_root_view_root_css_class(shouldSetClassName: boolean) {
3741
const rootView = getRootView();
@@ -221,6 +225,66 @@ export function test_root_view_class_name_preserve_orientation_css_class() {
221225
_test_root_view_orientation_css_class(true);
222226
}
223227

228+
function _test_root_view_system_appearance_css_class(shouldSetClassName: boolean) {
229+
const rootView = getRootView();
230+
if (shouldSetClassName) {
231+
rootView.className = CLASS_NAME;
232+
}
233+
234+
const rootViewCssClasses = rootView.cssClasses;
235+
let systemAppearance;
236+
237+
if (isAndroid) {
238+
systemAppearance = android.systemAppearance;
239+
} else {
240+
systemAppearance = ios.systemAppearance;
241+
}
242+
243+
if (isIOS && iosUtils.MajorVersion <= 12) {
244+
TKUnit.assertFalse(rootViewCssClasses.has(
245+
DARK_SYSTEM_APPEARANCE_CSS_CLASS),
246+
`${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
247+
);
248+
TKUnit.assertFalse(rootViewCssClasses.has(
249+
LIGHT_SYSTEM_APPEARANCE_CSS_CLASS),
250+
`${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
251+
);
252+
} else if (systemAppearance === "dark") {
253+
TKUnit.assertTrue(rootViewCssClasses.has(
254+
DARK_SYSTEM_APPEARANCE_CSS_CLASS),
255+
`${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is missing`
256+
);
257+
TKUnit.assertFalse(rootViewCssClasses.has(
258+
LIGHT_SYSTEM_APPEARANCE_CSS_CLASS),
259+
`${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
260+
);
261+
} else if (systemAppearance === "light") {
262+
TKUnit.assertTrue(rootViewCssClasses.has(
263+
LIGHT_SYSTEM_APPEARANCE_CSS_CLASS),
264+
`${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is missing`
265+
);
266+
TKUnit.assertFalse(rootViewCssClasses.has(
267+
DARK_SYSTEM_APPEARANCE_CSS_CLASS),
268+
`${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
269+
);
270+
}
271+
272+
if (shouldSetClassName) {
273+
TKUnit.assertTrue(rootViewCssClasses.has(
274+
CLASS_NAME),
275+
`${CLASS_NAME} CSS class is missing`
276+
);
277+
}
278+
}
279+
280+
export function test_root_view_system_appearance_css_class() {
281+
_test_root_view_system_appearance_css_class(false);
282+
}
283+
284+
export function test_root_view_class_name_preserve_system_appearance_css_class() {
285+
_test_root_view_system_appearance_css_class(true);
286+
}
287+
224288
function _test_modal_root_view_modal_css_class(shouldSetClassName: boolean) {
225289
let modalClosed = false;
226290

‎tns-core-modules/application/application.d.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -311,9 +311,10 @@ export function orientation(): "portrait" | "landscape" | "unknown";
311311

312312
/**
313313
* Gets the operating system appearance.
314-
* Available values: "dark", "light".
314+
* Available values: "dark", "light", null.
315+
* Null for iOS <= 11.
315316
*/
316-
export function systemAppearance(): "dark" | "light";
317+
export function systemAppearance(): "dark" | "light" | null;
317318

318319
/**
319320
* This is the Android-specific application object instance.
@@ -636,9 +637,10 @@ export interface iOSApplication {
636637

637638
/**
638639
* Gets the system appearance.
639-
* Available values: "dark", "light".
640+
* Available values: "dark", "light", null.
641+
* Null for iOS <= 11.
640642
*/
641-
systemAppearance: "dark" | "light";
643+
systemAppearance: "dark" | "light" | null;
642644

643645
/**
644646
* The [UIApplication](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIApplication_Class/index.html).

‎tns-core-modules/application/application.ios.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,13 @@ class IOSApplication implements IOSApplicationDefinition {
120120
return this._window.rootViewController;
121121
}
122122

123-
get systemAppearance(): "light" | "dark" {
123+
get systemAppearance(): "light" | "dark" | null {
124+
125+
// userInterfaceStyle is available on UITraitCollection since iOS 12.
126+
if (majorVersion <= 11) {
127+
return null;
128+
}
129+
124130
if (!this._systemAppearance) {
125131
const userInterfaceStyle = this.rootController.traitCollection.userInterfaceStyle;
126132
this._systemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@@ -482,7 +488,10 @@ function setupRootViewCssClasses(rootView: View): void {
482488
pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
483489
pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
484490
pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
485-
pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.systemAppearance}`);
491+
492+
if (majorVersion >= 13) {
493+
pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.systemAppearance}`);
494+
}
486495

487496
const rootViewCssClasses = getRootViewCssClasses();
488497
rootViewCssClasses.forEach(c => rootView.cssClasses.add(c));

0 commit comments

Comments
 (0)