Merge pull request #241 from Esri/rslibed/language-switcher-default

feat: provide option to set default locale in language switcher
Esri · Oct 6, 2023 · ef0c02f · ef0c02f
2 parents fdd0410 + b09d991
commit ef0c02f
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 deletions.
diff --git a/packages/instant-apps-components/CHANGELOG.md b/packages/instant-apps-components/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v1.0.0-beta.137
+
+### instant-apps-switcher
+
+- Expose option to set default language item in dropdown.
+
 ## v1.0.0-beta.136
 
 ### instant-apps-social-share

diff --git a/packages/instant-apps-components/package-lock.json b/packages/instant-apps-components/package-lock.json
diff --git a/packages/instant-apps-components/package.json b/packages/instant-apps-components/package.json
@@ -1,7 +1,7 @@
 {
   "homepage": "https://esri.github.io/instant-apps-components",
   "name": "@esri/instant-apps-components",
-  "version": "1.0.0-beta.136",
+  "version": "1.0.0-beta.137",
   "description": "Reusable ArcGIS Instant Apps web components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/instant-apps-components/src/components.d.ts b/packages/instant-apps-components/src/components.d.ts
@@ -391,6 +391,10 @@ export namespace Components {
         "titleText": string;
     }
     interface InstantAppsLanguageSwitcher {
+        /**
+          * Defines the default language of the language switcher. Set internally if not defined.
+         */
+        "defaultLocale"?: string;
         /**
           * Icon to display.
          */
@@ -1297,6 +1301,10 @@ declare namespace LocalJSX {
         "titleText": string;
     }
     interface InstantAppsLanguageSwitcher {
+        /**
+          * Defines the default language of the language switcher. Set internally if not defined.
+         */
+        "defaultLocale"?: string;
         /**
           * Icon to display.
          */

diff --git a/...mponents/src/components/instant-apps-language-switcher/instant-apps-language-switcher.tsx b/...mponents/src/components/instant-apps-language-switcher/instant-apps-language-switcher.tsx
@@ -47,6 +47,12 @@ export class InstantAppsLanguageSwitcher {
   @Prop()
   locales: { locale: string; webmap?: string }[] = [];
 
+  /**
+   Defines the default language of the language switcher dropdown. Set internally if not defined. 
+   */
+  @Prop()
+  defaultLocale?: string;
+
   @State()
   messages: typeof LanguageTranslator_t9n;
 
@@ -80,7 +86,7 @@ export class InstantAppsLanguageSwitcher {
       this.t9nData = {};
       console.error('NO PORTAL ITEM RESOURCE AVAILABLE.');
     } finally {
-      const lang = getDefaultLanguage(intl, this.portalItem.portal) as string;
+      const lang = this.defaultLocale ?? (getDefaultLanguage(intl, this.portalItem.portal) as string);
       if (lang) {
         this.userLocale = lang;
 
@@ -128,9 +134,7 @@ export class InstantAppsLanguageSwitcher {
 
   renderDefaultLocale(): HTMLCalciteDropdownItemElement {
     const { userLocale } = this;
-    const locales = this.locales.map(locale => locale.locale);
-    const doesNotExist = locales.indexOf(userLocale) === -1;
-    return doesNotExist ? (
+    return (
       <calcite-dropdown-item
         key={`default-${userLocale}`}
         value={userLocale}
@@ -139,7 +143,7 @@ export class InstantAppsLanguageSwitcher {
       >
         {this.getSelectedLanguageText(userLocale)}
       </calcite-dropdown-item>
-    ) : null;
+    );
   }
 
   renderTrigger(): HTMLCalciteActionElement {

diff --git a/...instant-apps-components/src/components/instant-apps-language-switcher/readme.md b/...instant-apps-components/src/components/instant-apps-language-switcher/readme.md
@@ -54,12 +54,13 @@ document.addEventListener("selectedLanguageUpdated", (e: CustomEvent) => {
 
 ## Properties
 
-| Property                  | Attribute | Description                                                                                                                                              | Type                                                  | Default      |
-| ------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------ |
-| `icon`                    | `icon`    | Icon to display.                                                                                                                                         | `string`                                              | `'language'` |
-| `locales`                 | --        | Data used to populate language switcher dropdown.                                                                                                        | `{ locale: string; webmap?: string \| undefined; }[]` | `[]`         |
-| `portalItem` _(required)_ | --        | Instant App portal item - used to fetch it's associated portal item resource. The portal item resource will contain the user defined translated strings. | `PortalItem`                                          | `undefined`  |
-| `view`                    | --        | Reference to map view to switch web maps if present in locales.                                                                                          | `MapView \| SceneView \| undefined`                   | `undefined`  |
+| Property                  | Attribute        | Description                                                                                                                                              | Type                                                  | Default      |
+| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------ |
+| `defaultLocale`           | `default-locale` | Defines the default language of the language switcher. Set internally if not defined.                                                                    | `string \| undefined`                                 | `undefined`  |
+| `icon`                    | `icon`           | Icon to display.                                                                                                                                         | `string`                                              | `'language'` |
+| `locales`                 | --               | Data used to populate language switcher dropdown.                                                                                                        | `{ locale: string; webmap?: string \| undefined; }[]` | `[]`         |
+| `portalItem` _(required)_ | --               | Instant App portal item - used to fetch it's associated portal item resource. The portal item resource will contain the user defined translated strings. | `PortalItem`                                          | `undefined`  |
+| `view`                    | --               | Reference to map view to switch web maps if present in locales.                                                                                          | `MapView \| SceneView \| undefined`                   | `undefined`  |
 
 
 ## Events