Merge pull request #212 from Esri/rslibed/language-switcher-updates

Language switcher bug fixes

packages/instant-apps-components-react/src/components/stencil-generated/react-component-lib/utils/attachProps.ts

@@ -62,6 +62,17 @@ export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: a
   return finalClassNames.join(' ');
 };
 
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
 /**
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
@@ -70,7 +81,7 @@ export const isCoveredByReact = (eventNameSuffix: string) => {
   if (typeof document === 'undefined') {
     return true;
   } else {
-    const eventName = 'on' + eventNameSuffix;
+    const eventName = 'on' + transformReactEventName(eventNameSuffix);
     let isSupported = eventName in document;
 
     if (!isSupported) {

packages/instant-apps-components/CHANGELOG.md

@@ -5,8 +5,51 @@ 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.116
+
+### instant-apps-language-translator & instant-apps-language-switcher
+
+- fix: selected translator-item on input change
+- fix: portal item resource access
+- fix: portal item resource data on create
+
+## v1.0.0-beta.115
+
+- Fix build issue
+
+## v1.0.0-beta.114
+
+### instant-apps-language-translator & instant-apps-language-switcher
+
+- Bust cache when requesting t9n data from portal item resource to get latest data within instant apps config
+
+## v1.0.0-beta.113
+
+- Updated doc with typings and examples for language-translator and langauge-switcher comoponents
+
+## v1.0.0-beta.112
+
+### instant-apps-language-translator & instant-apps-language-switcher
+
+- Update language translator/switcher doc.
+- Render switcher dropdown with or without portal item resource.
+
+## v1.0.0-beta.111
+
+- T9N updates
+
 ## v1.0.0-beta.110
 
+- Created `getMessages` utility function to be used in all components to listen for `onLocaleChange`.
+
+### instant-apps-language-translator
+
+- Component to translate strings in different languages
+
+### instant-apps-language-switcher
+
+- Component to switch between different languages via
+
 ### instant-apps-export
 
 - Update export icon

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.115",
+  "version": "1.0.0-beta.116",
   "description": "Reusable ArcGIS Instant Apps web components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

packages/instant-apps-components/src/components/instant-apps-language-translator/instant-apps-language-translator.tsx

@@ -97,11 +97,13 @@ export class InstantAppsLanguageTranslator {
   @Watch('locales')
   handleLocaleChange() {
     this.initUIData();
+    this.initSelectLanguage();
   }
 
   @Watch('appSettings')
   handleAppSettings() {
     this.initUIData();
+    this.initSelectLanguage();
   }
 
   /**
@@ -156,7 +158,7 @@ export class InstantAppsLanguageTranslator {
       const portalItemResource = await getPortalItemResource(this.portalItem) as __esri.PortalItemResource;
       store.set('portalItemResource', portalItemResource as __esri.PortalItemResource);
       const t9nData = await fetchResourceData(this.request, portalItemResource);
-      store.set('portalItemResourceT9n', t9nData);
+      store.set('portalItemResourceT9n', t9nData ?? {});
     } catch {}
   }
 

packages/instant-apps-components/src/components/instant-apps-language-translator/support/utils.ts

@@ -7,6 +7,7 @@ import { languageTranslatorState, store } from './store';
 
 export function generateUIData(appSettings, locales: LocaleItem[]): LocaleUIData | void {
   if (!appSettings) return;
+  const existingUIData = store.get("uiData");
   const settingKeys = Object.keys(appSettings).filter(settingKey => settingKey !== 'translatedLanguageLabels');
   const uiData = {
     locales,
@@ -21,7 +22,7 @@ export function generateUIData(appSettings, locales: LocaleItem[]): LocaleUIData
     uiData[key] = {
       userLocaleData: { type, label, value },
       expanded: true,
-      selected: false,
+      selected: existingUIData?.[key]?.["selected"] ?? false,
       uiLocation,
       tip: appSetting?.tip,
     };
@@ -30,7 +31,7 @@ export function generateUIData(appSettings, locales: LocaleItem[]): LocaleUIData
   const noneSelected = settingKeys.every(key => !uiData[key].selected);
 
   if (noneSelected && uiData[settingKeys[0]]) {
-    uiData[settingKeys[0]].selected = true;
+    uiData[settingKeys[0]].selected = existingUIData?.[settingKeys[0]]?.["selected"] ?? true;
   }
 
   return uiData;
@@ -58,7 +59,11 @@ export async function getPortalItemResourceT9nData(resource: __esri.PortalItemRe
 
 export function getT9nData(locale: string, data: { [key: string]: string }) {
   const portalItemResourceT9n = store.get('portalItemResourceT9n');
-  const dataToWrite = { ...portalItemResourceT9n, [locale]: { ...portalItemResourceT9n[locale], ...data } };
+  let dataToWrite: { [locale: string]: string; };
+  if (!portalItemResourceT9n?.[locale]) {
+    portalItemResourceT9n[locale] = {};
+  }
+  dataToWrite = { ...portalItemResourceT9n, [locale]: { ...portalItemResourceT9n[locale], ...data } };
   return dataToWrite;
 }
 

packages/instant-apps-components/src/utils/languageSwitcher.ts

@@ -3,7 +3,9 @@ import { loadModules } from "esri-loader";
 
 export async function fetchResourceData(request, resource: __esri.PortalItemResource): Promise<any> {
   try {
-    const reqConfig = { responseType: 'json' };
+    const token = resource?.portalItem?.portal?.["credential"]?.["token"];
+    const reqConfig: __esri.RequestOptions = { responseType: 'json'} ;
+    if (token) reqConfig.query = { token };
     var cacheBuster = "cacheBuster=" + Date.now();
     const url = `${resource.url}?${cacheBuster}`;
     const reqRes = await request(url, reqConfig);
@@ -27,7 +29,11 @@ export async function getPortalItemResource(portalItem: __esri.PortalItem): Prom
     const content = new Blob([JSON.stringify({})], { type });
     try {
       await portalItem.addResource(resource, content);
-      return Promise.resolve(resource);
+      const existingResourcesRes = await portalItem.fetchResources();
+      const path = `t9n/${portalItem?.id}.json`;
+      const existingResourceArr = existingResourcesRes.resources.filter(resourceItem => resourceItem.resource.path === path);
+      const existingResource = existingResourceArr[0].resource;
+      return Promise.resolve(existingResource);
     } catch (err) {
       console.error('ERROR: ', err);
       return Promise.reject(null);