fix: checks navigator language for rtl enabling (#253)

- RTL is now set from the configuration by priority. If no configuration for
rtl or language is provided - navigator language is checked.
- getEffectiveRTL module is added as an util.

Author: MapTo0

packages/base/src/Configuration.js

@@ -1,18 +1,12 @@
 import CalendarType from "@ui5/webcomponents-core/dist/sap/ui/core/CalendarType";
-
-const getDesigntimePropertyAsArray = sValue => {
-	const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(sValue);
-	return (m && m[2]) ? m[2].split(/,/) : null;
-};
-
-const supportedLanguages = getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
+import getDesigntimePropertyAsArray from "./util/getDesigntimePropertyAsArray";
 
 const CONFIGURATION = {
 	theme: "sap_fiori_3",
 	rtl: null,
 	language: null,
 	compactSize: false,
-	supportedLanguages,
+	supportedLanguages: null,
 	calendarType: null,
 	derivedRTL: null,
 	"xx-wc-no-conflict": false, // no URL
@@ -24,7 +18,7 @@ const getTheme = () => {
 };
 
 const getRTL = () => {
-	return CONFIGURATION.rtl === null ? CONFIGURATION.derivedRTL : CONFIGURATION.rtl;
+	return CONFIGURATION.rtl;
 };
 
 const getLanguage = () => {
@@ -36,7 +30,7 @@ const getCompactSize = () => {
 };
 
 const getSupportedLanguages = () => {
-	return CONFIGURATION.supportedLanguages;
+	return getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
 };
 
 const getWCNoConflict = () => {

packages/base/src/Locale.js

@@ -1,18 +1,6 @@
-const rLocale = /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
-
-const M_ISO639_OLD_TO_NEW = {
-	"iw": "he",
-	"ji": "yi",
-	"in": "id",
-	"sh": "sr",
-};
+import getDesigntimePropertyAsArray from "./util/getDesigntimePropertyAsArray";
 
-function getDesigntimePropertyAsArray(sValue) {
-	const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(sValue);
-	return m && m[2] ? m[2].split(/,/) : null;
-}
-
-const A_RTL_LOCALES = getDesigntimePropertyAsArray("$cldr-rtl-locales:ar,fa,he$") || [];
+const rLocale = /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
 
 class Locale {
 	constructor(sLocaleId) {
@@ -101,19 +89,6 @@ class Locale {
 		return r.join("-");
 	}
 
-	static _impliesRTL(vLanguage) {
-		const oLocale = vLanguage instanceof Locale ? vLanguage : new Locale(vLanguage);
-		let sLanguage = oLocale.getLanguage() || "";
-
-		sLanguage = (sLanguage && M_ISO639_OLD_TO_NEW[sLanguage]) || sLanguage;
-
-		const sRegion = oLocale.getRegion() || "";
-		if (sRegion && A_RTL_LOCALES.indexOf(`${sLanguage}_${sRegion}`) >= 0) {
-			return true;
-		}
-		return A_RTL_LOCALES.indexOf(sLanguage) >= 0;
-	}
-
 	static get _cldrLocales() {
 		return getDesigntimePropertyAsArray("$cldr-locales:ar,ar_EG,ar_SA,bg,br,ca,cs,da,de,de_AT,de_CH,el,el_CY,en,en_AU,en_GB,en_HK,en_IE,en_IN,en_NZ,en_PG,en_SG,en_ZA,es,es_AR,es_BO,es_CL,es_CO,es_MX,es_PE,es_UY,es_VE,et,fa,fi,fr,fr_BE,fr_CA,fr_CH,fr_LU,he,hi,hr,hu,id,it,it_CH,ja,kk,ko,lt,lv,ms,nb,nl,nl_BE,nn,pl,pt,pt_PT,ro,ru,ru_UA,sk,sl,sr,sv,th,tr,uk,vi,zh_CN,zh_HK,zh_SG,zh_TW$");
 	}

packages/base/src/LocaleProvider.js

@@ -1,4 +1,5 @@
 import Locale from "./Locale";
+import detectNavigatorLanguage from "./util/detectNavigatorLanguage";
 import { getLanguage as getConfigLanguage } from "./Configuration";
 
 const convertToLocaleOrNull = lang => {
@@ -11,21 +12,6 @@ const convertToLocaleOrNull = lang => {
 	}
 };
 
-/**
- * Detects the language based on locale of the browser
- */
-const detectLanguage = () => {
-	const browserLanguages = navigator.languages;
-
-	const navigatorLanguage = () => {
-		return navigator.language;
-	};
-
-	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
-
-	return rawLocale || "en";
-};
-
 /**
  * Returns the locale based on the configured language Configuration#getLanguage
  * If no language has been configured - a new locale based on browser language is returned
@@ -35,7 +21,7 @@ const getLocale = () => {
 		return new Locale(getConfigLanguage());
 	}
 
-	return convertToLocaleOrNull(detectLanguage());
+	return convertToLocaleOrNull(detectNavigatorLanguage());
 };
 
 /**

packages/base/src/compatibility/ShadowDOM.js

@@ -1,4 +1,5 @@
-import { getTheme, getRTL, getCompactSize } from "../Configuration";
+import { getTheme, getCompactSize } from "../Configuration";
+import getEffectiveRTL from "../util/getEffectiveRTL";
 
 import { injectWebComponentStyle } from "../theming/StyleInjection";
 import { registerStyle } from "../theming/ThemeBundle";
@@ -34,7 +35,7 @@ class ShadowDOM {
 		const theme = getTheme();
 		const styleUrls = ElementClass.getMetadata().getStyleUrl();
 		const tag = ElementClass.getMetadata().getTag();
-		const isRTL = getRTL();
+		const isRTL = getEffectiveRTL();
 		const isCompact = getCompactSize();
 
 		let shadowDOM,

packages/base/src/util/detectNavigatorLanguage.js

@@ -0,0 +1,11 @@
+export default () => {
+	const browserLanguages = navigator.languages;
+
+	const navigatorLanguage = () => {
+		return navigator.language;
+	};
+
+	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
+
+	return rawLocale || "en";
+};

packages/base/src/util/getDesigntimePropertyAsArray.js

@@ -0,0 +1,4 @@
+export default value => {
+	const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(value);
+	return m && m[2] ? m[2].split(/,/) : null;
+};

packages/base/src/util/getEffectiveRTL.js

@@ -0,0 +1,30 @@
+import { getRTL, getLanguage } from "../Configuration";
+import getDesigntimePropertyAsArray from "./getDesigntimePropertyAsArray";
+import detectNavigatorLanguage from "./detectNavigatorLanguage";
+
+const M_ISO639_OLD_TO_NEW = {
+	"iw": "he",
+	"ji": "yi",
+	"in": "id",
+	"sh": "sr",
+};
+
+const A_RTL_LOCALES = getDesigntimePropertyAsArray("$cldr-rtl-locales:ar,fa,he$") || [];
+
+const impliesRTL = language => {
+	language = (language && M_ISO639_OLD_TO_NEW[language]) || language;
+
+	return A_RTL_LOCALES.indexOf(language) >= 0;
+};
+
+const getEffectiveRTL = () => {
+	const configurationRTL = getRTL();
+
+	if (configurationRTL !== null) {
+		return !!configurationRTL;
+	}
+
+	return impliesRTL(getLanguage() || detectNavigatorLanguage());
+};
+
+export default getEffectiveRTL;