@wavemaker/rn-codegen 12.0.0-next.45752 → 12.0.0-next.47809

package/src/templates/app.template

@@ -0,0 +1,524 @@
+import 'react-native-gesture-handler';
+
+import * as POLLYFILL from './polyfills';
+import React, { useState, useCallback, useEffect } from 'react';
+import "setimmediate";
+{{#if enableDesignTokens}}
+import merge from 'lodash/merge';
+import { variants } from './app.designtokens';
+{{/if}}
+
+import { Alert, View, ImageBackground, PanResponder, Linking,  LogBox, Appearance } from 'react-native';
+import axios from 'axios';
+import moment from 'moment';
+import * as _ from 'lodash';
+import * as Font from 'expo-font';
+import { createIconSet } from '@expo/vector-icons';
+import * as Localization from 'expo-localization';
+import BaseApp from '@wavemaker/app-rn-runtime/runtime/App';
+import { WmMemo } from '@wavemaker/app-rn-runtime/runtime/memo.component';
+{{#if sslPinning}}
+import { initializeSslPinning, isSslPinningAvailable } from 'react-native-ssl-public-key-pinning';
+import { getPublicHashKey } from '@wavemaker/react-native-ssl-publickey';
+{{/if}}
+{{#each supportedLocales}}
+import 'moment/locale/{{this}}';
+{{/each}}
+
+import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import NetworkService from '@wavemaker/app-rn-runtime/core/network.service';
+import StorageService from '@wavemaker/app-rn-runtime/core/storage.service';
+import { ThemeEvent } from '@wavemaker/app-rn-runtime/styles/theme';
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import themeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
+import SecurityService from '@wavemaker/app-rn-runtime/runtime/services/app-security.service';
+import AppI18nService from '@wavemaker/app-rn-runtime/runtime/services/app-i18n.service';
+import WM from '@wavemaker/app-rn-runtime/runtime/platform.api';
+
+import { getThemes, getSelectedTheme, hasAppTheme, setAppTheme, resolveThemeAsset } from './app.theme';
+import styles from './app.style';
+import fontConfig from './font.config';
+import { resetTheme } from './revert-to-1.0.styles';
+import LocaleResolver from './src/resolve/locale.resolver';
+import ResourceResolver from './src/resolve/resource.resolver';
+import WM_CUSTOM_FORMATTERS from './src/extensions/formatters';
+import getAppVariables from './src/app.variables';
+import bootstrap, { appConfig } from './bootstrap';
+{{#if enableWavePulse}}
+import { createWavePulseAgent } from './wavepulse/wavepulse.agent';
+{{/if}}
+import CommonPartial from './src/partials/Common/Common.component';
+import { initialize as initializeDeviceOperations } from './src/device-operation-loader';
+import Lottie from 'lottie-react-native';
+import RNRestart from 'react-native-restart';
+import * as SplashScreen from 'expo-splash-screen';
+import { UIPreferencesProvider } from "@wavemaker/app-rn-runtime/core/ui-preferences.context";
+
+let _reloadApp = null;
+
+class App extends BaseApp {
+  constructor(props) {
+      super(props);
+      this.reload = () => {
+        _reloadApp();
+      };
+      WM.App = this;
+      this.timerId = false;
+      this.panResponder = PanResponder.create({
+        onStartShouldSetPanResponderCapture: () => {
+          this.resetInactivityTimeout();
+        },
+      });
+      this.userIdleTimeout = 60 * 60 * 1000;
+      this.uiPreferences = { enableRipple: appConfig.preferences.enableRipple, appLoader: appConfig.preferences.appLoader };
+      {{#if enableDesignTokens}}
+      this.cleanup.push(Appearance.addChangeListener((preferences) => {
+        this.setColorScheme(preferences.colorScheme);
+      }));
+      {{/if}}
+      {{#if enableWavePulse}}
+      this.tryToconnectWavepulse();
+      {{/if}}
+  }
+
+  getSecurityInfo() {
+    {{#if profile.useLocalMetadata}}
+    const  defaultSecurityConfig = require('./metadata/app/security-config.json');
+    SecurityService.defaultSecurityConfig = defaultSecurityConfig;
+    {{/if}}
+    return SecurityService.getLoggedInUserDetails(this.appConfig.url);
+  } 
+
+  getServiceDefinitions() {
+    {{#if profile.useLocalMetadata}}
+      return Promise.resolve(require('./metadata/app/service-definitions.json'))
+    {{else}}
+    return axios.get(this.baseUrl + '/services/servicedefs')
+      .then((response) => response?.data || {})
+        .catch(() => ({}))
+      {{/if}}
+      .then(data => {
+          this.serviceDefinitions = data?.serviceDefs || {};
+          Object.keys(this.serviceDefinitions).forEach((key) => {
+            var sv = this.serviceDefinitions[key]['wmServiceOperationInfo'];
+            if (sv) {
+              sv.proxySettings.mobile = sv.proxySettings.web;
+            }
+          });
+          return this.serviceDefinitions;
+      });
+  }
+
+  triggerStartupVariables() {
+    return this.startUpVariables.map(s => this.Variables[s] && this.Variables[s].invoke());
+  }
+
+  loadWmProperties() {
+    {{#if profile.useLocalMetadata}}
+      return Promise.resolve(require('./src/wmProperties').default)
+    {{else}}
+    return axios.get(this.baseUrl + '/services/application/wmProperties.js')
+      .then((response) => {
+          const data = response.data;
+          return JSON.parse(data.substring(data.indexOf('{'), data.length - 1));
+      })
+    {{/if}}
+      .then(appProperties => {
+        this.appConfig.appProperties = appProperties;
+        this.appConfig.landingPage = appProperties.homePage;
+      });
+  }
+
+ loadFonts() {
+    fontConfig.fonts.map((f) => f.path = ResourceResolver.resolve(f.path, this.baseUrl));
+    const fonts = [...themeVariables.INSTANCE.fontConfig?.fonts, ...fontConfig.fonts];
+    themeVariables.INSTANCE.fontConfig?.fonts.filter((f) => f.csspath).map((f) => {
+        const iconStyle = f.csspath?.default;
+        Object.keys(iconStyle).forEach((s) => this.appConfig.theme.addStyle(s, null, iconStyle[s]));
+    });
+    fontConfig.fonts.filter((f) => f.csspath).map((f) => {
+        f.csspath = f.csspath.replace('.css', '.js');
+        const iconStyle = ResourceResolver.resolve(f.csspath, this.baseUrl)?.default;
+        Object.keys(iconStyle).forEach((s) => this.appConfig.theme.addStyle(s, null, iconStyle[s]));
+    });
+    return Promise.all(
+      fonts.map(fc => {
+        const params = {};
+        params[fc.name] = fc.path;
+        return Font.loadAsync(params).catch(() => {
+          console.error(`Not able to load Font ${fc}. `)
+        });
+      }));
+  }
+
+  set activeTheme(themeName) {
+    this.setTheme(themeName);
+  }
+
+  get activeTheme() {
+    return getSelectedTheme();
+  }
+
+  setTheme(name, variables, colorScheme) {
+    StorageService.setItem('activeTheme', name);
+    setAppTheme(name, variables).then(() => {
+        return this.loadFonts();
+    }).then(() => {
+      this.refresh();
+    });
+  }
+
+  setThemeVariables(variables) {
+    this.setTheme(this.activeTheme, variables);
+  }
+
+
+  {{#if enableDesignTokens}}
+  setColorScheme(colorScheme) {
+    this.setTheme(this.activeTheme, {}, colorScheme);
+  }
+  {{/if}}
+
+  resetThemeVariables() {
+    this.setTheme(this.activeTheme);
+  }
+
+  getTheme() {
+    return StorageService.getItem('activeTheme')
+      .then(name => {
+        return hasAppTheme(name)
+        .then((flag) => flag ? name : this.appConfig.appProperties.activeTheme);
+      });
+  }
+
+  loadTheme() {
+    return this.getTheme()
+      .then((theme) => setAppTheme(theme))
+      .then((theme) => {
+        if (appConfig.preferences?.appStyle && appConfig.preferences?.appStyle === "1.0" ) {
+          // reset theme
+          resetTheme(this.appConfig.theme);
+        }
+      {{#if enableDesignTokens}}
+        merge(this.appConfig.theme.styles, variants);
+      {{/if}}
+        return theme;
+      })
+  }
+
+  get appLocale() {
+    return this.appConfig.appLocale.messages;
+  }
+
+  get themes() {
+    return getThemes();
+  }
+
+  bootstrap() {
+    const data = getAppVariables(this);
+    this.appConfig.theme = this.appConfig.theme.$new('app-styles', styles);
+    this.cleanup.push(this.appConfig.theme.subscribe(ThemeEvent.CHANGE, () => {
+        this.refresh();
+    }));
+    this.Variables = data.Variables;
+    this.Actions = data.Actions;
+    this.startUpVariables = [{{#each startUpVariables}}'{{this}}',{{/each}}];
+    this.startUpActions = [{{#each startUpActions}}'{{this}}',{{/each}}];
+    this.autoUpdateVariables = [{{#each autoUpdateVariables}}'{{this}}',{{/each}}];
+    this.appConfig.SecurityService.loggedInUser = this.Variables.loggedInUser;
+    Object.keys(WM_CUSTOM_FORMATTERS).forEach(k => {
+      this.formatters.set(`custom.${k}`, WM_CUSTOM_FORMATTERS[k]);
+    });
+    attachScript(this);
+    return bootstrap();
+  }
+
+  handleLocaleUrl(url) {
+    return LocaleResolver.resolve(url);
+  }
+
+  handleUrl(url) {
+    return resolveThemeAsset(url);
+  }
+
+  getDefaultLocale() {
+    const appProperties = this.appConfig.appProperties;
+    return Promise.resolve().then(() => {
+      if (appProperties.preferBrowserLang === 'true') {
+        return Localization.getLocalizationAsync()
+          .then(localizationData => localizationData.locale);
+      }
+    }).then(userPreferredLocale => appProperties.supportedLanguages[userPreferredLocale] ?  userPreferredLocale : appProperties.defaultLanguage)
+    .then((defaultLocale) => {
+        return appProperties.supportedLanguages[defaultLocale] ? defaultLocale : 'en';
+    })
+    .then((language) => {
+      if(AppI18nService.getPrevAppProfileLang() === language) {
+        return language !== AppI18nService.getSelectedLocale() ? AppI18nService.getSelectedLocale() : language;
+      }
+
+      AppI18nService.setPrevAppProfileLang(language);
+      return language;
+    });
+  }
+
+  changeLocale(newLocale) {
+    return Promise.resolve()
+    .then(() => newLocale || AppI18nService.getSelectedLocale())
+    .then((newLocale) => newLocale || this.getDefaultLocale())
+    .then((newLocale) => {
+      const needsRestart = AppI18nService.setSelectedLocale(newLocale);
+      if(needsRestart){
+        RNRestart && RNRestart.Restart();
+      }
+      this.appConfig.selectedLocale = newLocale;
+      {{#if profile.useLocalMetadata}}
+        return this.handleLocaleUrl(`i18n/${newLocale}.json`)
+      {{else}}
+        return AppI18nService.loadAppLocaleBundle(this.appConfig.url)
+        .then(bundle => bundle.data)
+      {{/if}}
+    }).then(data => {
+      this.appConfig.appLocale = data;
+      this.appConfig.currentPage && this.appConfig.currentPage.resetAppLocale();
+      this.appConfig.refresh();
+    });
+  }
+
+
+  {{#if sslPinning}}
+  async initSSLPininng() {
+    let sslPinning = {{{stringify sslPinning}}}
+    if (isSslPinningAvailable()) {
+      const updatedSslPinning = {};
+
+      for (const key of Object.keys(sslPinning)) {
+        const value = sslPinning[key];
+        if (value.loadOnStartup) {
+          const publickey = await getPublicHashKey(key);
+          value.publicKeyHashes = [(publickey), "NoBackUpKey" + publickey.substring(11)];
+        }
+        updatedSslPinning[key] = value; // Update the modified object
+      }
+
+      return initializeSslPinning(updatedSslPinning).then(() => true);
+    }
+    return Promise.resolve(false);
+  }
+  {{/if}}
+
+
+  {{#if enableWavePulse}}
+  confirmWavePulseConnect(connectionData) {
+    return new Promise((resolve, reject) => {
+      Alert.alert(
+        'Confirm',
+        'This app is going to connect to WavePulse for debugging remotely.' +
+        ' Please tap on \'Yes\' button to confirm the connection.' +
+        ' If you are not sure, what WavePulse is or if you don\'t want' + 
+        ' to connect to WavePulse, press on \'no\' button.',
+        [
+          {
+            text: 'No',
+            onPress: () => {
+              StorageService.removeItem('wavepulse.server');
+              resolve();
+            },
+            style: 'positive'
+          }, {
+            text: 'Yes',
+            onPress: () => resolve(connectionData),
+            style: 'negative'
+          }
+        ],
+        [{
+          cancelable: true,
+          onDismiss: () => {
+            StorageService.removeItem('wavepulse.server');
+            resolve();
+          }
+        }]
+      )
+    });
+  }
+
+  async tryToconnectWavepulse(connectionData) {
+    try{
+      this.wavepulseAgent = createWavePulseAgent({
+        handler: this
+      });
+      if (!connectionData) {
+        connectionData = await Linking.getInitialURL()
+          .then(url => {
+            const paramStr = url?.split('://wavepulse/connect?')[1];
+            return paramStr?.split('&')
+              .map(v => v?.split('='))
+              .reduce((r, v) => {
+                r[v[0]] = v[1]; 
+                return r;
+              }, {})
+          }, () => {});
+      }
+      if (!connectionData || !connectionData.url) {
+        connectionData = await StorageService.getItem('wavepulse.server')
+          .then(d => d && JSON.parse(d));
+      }
+      if (!connectionData) {
+        return;
+      } 
+      if (!(isWebPreviewMode() || this.appConfig.preferences.autoConfirmWavePulse === true)) {
+        connectionData = await this.confirmWavePulseConnect(connectionData);
+      }
+      if (connectionData) {
+        this.wavepulseAgent
+          .connect(connectionData.url, connectionData.channelId)
+          .then(() => {
+            StorageService.setItem('wavepulse.server', JSON.stringify(connectionData));
+          }, () => {
+            StorageService.removeItem('wavepulse.server');
+          });
+        BASE_THEME.enableTrace(true);
+        LogBox.ignoreAllLogs();
+      }
+    } catch(e) {
+      console.error(e);
+    }
+  }
+  {{/if}}
+
+  componentDidMount() {
+    {{#if animatedSplash}}
+    SplashScreen.hideAsync().then(() => {});{{/if}}
+    this.appConfig.getServiceDefinitions = this.getServiceDefinitions.bind(this);
+    Promise.all([
+      NetworkService.start(this.appConfig)
+      {{#if profile.useLocalMetadata}}
+      {{else}}
+      .then(() => {
+        NetworkService.connect(true);
+      })
+      {{/if}},
+      this.getSecurityInfo()
+        .then(() => {console.log('Security info loaded')}),
+      this.loadWmProperties()
+      {{#if sslPinning}}
+      .then(() => this.initSSLPininng())
+      .then((flag) => {flag && console.log('SSL Pinning loaded')})
+      {{/if}}
+      .then(() => this.loadTheme())
+    .then(() => {console.log('Theme loaded')})
+      .then(() => AppI18nService.init())
+      .then(() => this.changeLocale( isWebPreviewMode() ? this.getDefaultLocale() : null ))
+    .then(() => {console.log('Locale files loaded')})
+      .then(() => this.loadFonts())
+    .then(() => {console.log('Font files loaded')})
+      .then(() => initializeDeviceOperations())
+    .then(() => {console.log('Loaded device operations loaded')})
+      .then(() => this.bootstrap())])
+    .then(() => super.componentDidMount())
+    .catch(error => {
+      console.error(error);
+    })
+    .then(() => this.props.onStart())
+    .then(() => {
+      this.appConfig.diagnostics.appReadyTime = Date.now();
+      this.notify('appReady');
+    });
+    this.resetInactivityTimeout();
+  }
+
+  getCommonPartial() {
+    return (<WmMemo watcher={this.watcher} render={(watch) => {
+      return (
+        <CommonPartial
+          parentWatcher={this.watcher}
+          listener=\{{onComponentInit: w => (this.commonPartial = w)}}>
+        </CommonPartial>);
+      }}/>);
+  }
+
+  onUserIdle(){
+    // callback for user idle timeout 
+  }
+
+  resetInactivityTimeout(){
+    clearTimeout(this.timerId);
+    this.timerId = setTimeout(() => {
+      this.onUserIdle && this.onUserIdle();
+    }, this.userIdleTimeout);
+  }
+
+
+  render() {
+    return (
+      <UIPreferencesProvider value={this.uiPreferences}>
+      <View dir={AppI18nService.isRTLLocale(this.appConfig.selectedLocale)?'rtl':null} style=\{{flex: 1, backgroundColor: themeVariables.INSTANCE.pageContentBgColor}} {...this.panResponder.panHandlers}>
+        { this.isStarted ? super.renderApp(this.getCommonPartial()) : null}
+      </View>
+      </UIPreferencesProvider>
+    );
+  }
+}
+
+const attachScript = (App) => {
+  //auto refresh functions
+  const setTimeout = App.lib.setTimeout;
+  const setInterval = App.lib.setInterval;
+  
+  {{{prependSpace script 2}}}
+};
+
+{{#if animatedSplash}}
+const AnimatedSplash = props => {
+  const {backgroundColor, animationSrc, dark} = appConfig.splash;
+  const isDarkAppearance = Appearance.getColorScheme() == 'dark';
+  const isLightAppearance = Appearance.getColorScheme() == 'light';
+
+  const currentAppearanceAnimation = isDarkAppearance && dark?.animationSrc ? dark.animationSrc : animationSrc;
+  const currentAppearanceBgColor = isDarkAppearance && dark?.backgroundColor ? dark?.backgroundColor : backgroundColor;
+
+  const animationAvailabilityForCurrentAppearance = isLightAppearance ? animationSrc : (isDarkAppearance ?  dark?.animationSrc || animationSrc : false);
+  useEffect(() => {
+    if(animationAvailabilityForCurrentAppearance){
+      SplashScreen.hideAsync().then(() => {});
+    }
+  }, []);
+  
+  if(!animationAvailabilityForCurrentAppearance){
+    return <></>;
+  }
+
+  return (
+    <View style=\{{ justifyContent: 'center', width: '100%', height: '100%', backgroundColor: currentAppearanceBgColor }}>
+      <Lottie
+        source={ResourceResolver.resolve(
+          currentAppearanceAnimation,
+          appConfig.url
+        )}
+        autoPlay={true}
+        loop={true}
+        style=\{{ width: '100%', height: '100%' }}
+      />
+    </View>
+  )
+};
+{{/if}}
+
+export default (props) => {
+  props = props || {};
+  const [visible, setVisible] = useState(true);
+  const [isAppStarted, setIsAppStarted] = useState(false);
+  _reloadApp = useCallback(() => {
+    setVisible(false);
+    setTimeout(() => {
+      setVisible(true);
+    }, 100);
+  }, [visible]);
+  return visible ? (
+    <>
+      {{#if animatedSplash}}
+      {!isAppStarted ? <AnimatedSplash /> : null}
+      {{/if}}
+      <App {...props} onStart={() => setIsAppStarted(true)} />
+    </>) : {{#if animatedSplash}}(<AnimatedSplash />){{else}}(<></>){{/if}};
+};

package/src/templates/app.theme.template

@@ -0,0 +1,99 @@
+import { isIos} from '@wavemaker/app-rn-runtime/core/utils';
+import themeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { clone, get } from 'lodash-es';
+import fontConfig from './font.config';
+{{#if enableDesignTokens}}
+import appDesignTokens from './app.designtokens';
+{{/if}}
+
+{{#if enableDesignTokens}}
+function getAppTokens(colorScheme) {
+    return appDesignTokens.find(v => v.name === colorScheme) 
+        || appDesignTokens.find(v => v.name === 'light')
+        || {};
+}
+function getTokens(allTokens, colorScheme) {
+   const colorSchemes = get(allTokens, "colorSchemes");
+   let result = colorSchemes.find(v => v.name === colorScheme);
+    if (!result) {
+        let result = colorSchemes.find(v => v.name === "light");
+    }
+    const appOverrides = getAppTokens(colorScheme).tokens || {};
+    return Object.assign((result && result.tokens), appOverrides);
+}
+{{/if}}
+
+const themes = {
+{{#each themes}}
+    "{{this}}": {
+        android: {
+            style: () => require('./theme/{{this}}/android/style.js').default,
+            {{#if ../enableDesignTokens}}
+            tokens: (colorScheme) => {
+                return getTokens(require('./theme/{{this}}/android/tokens.js').default, colorScheme);
+            },
+            {{/if}}
+            variables: () => require('./theme/{{this}}/android/variables.js').default,
+            getAsset: () => require('./theme/{{this}}/android/asset.resolver.js').default.resolve
+        },
+        ios: {
+            style: () => require('./theme/{{this}}/ios/style.js').default,
+            {{#if ../enableDesignTokens}}
+            tokens: (colorScheme) => {
+                return getTokens(require('./theme/{{this}}/ios/tokens.js').default, colorScheme);
+            },
+            {{/if}}
+            variables: () => require('./theme/{{this}}/ios/variables.js').default,
+            getAsset: () => require('./theme/{{this}}/ios/asset.resolver.js').default.resolve
+        }
+    },
+{{/each}}
+};
+
+let selectedTheme = null;
+let selectedThemeName = null;
+let getAsset = null;
+const appTheme = BASE_THEME.$new('app-theme', {});
+const defaultVariables = clone(themeVariables.INSTANCE);
+export const setAppTheme = (themeName, variables, colorScheme) => {
+    return Promise.resolve().then(() => {
+        selectedTheme = (themes[themeName]||{})[isIos() ? 'ios': 'android'];
+        if (selectedTheme) {
+            selectedThemeName = themeName;
+            const styles = selectedTheme.style();
+            {{#if enableDesignTokens}}
+            const tokens = selectedTheme.tokens(colorScheme || 'light');
+            {{/if}}
+            themeVariables.INSTANCE = Object.assign({},
+                defaultVariables, 
+                selectedTheme.variables(),
+                {{#if enableDesignTokens}}
+                tokens,
+                {{/if}}
+                styles['theme-variables'],
+                variables);
+            getAsset = selectedTheme.getAsset();
+            if (fontConfig.baseFont) {
+                themeVariables.baseFont = fontConfig.baseFont;
+            }
+            appTheme.reset(selectedTheme.style());
+            BASE_THEME.reset();
+        }
+    });
+};
+export const hasAppTheme = (themeName) => {
+    return Promise.resolve()
+        .then(() => !!(themes[themeName]||{})[isIos() ? 'ios': 'android']);
+};
+  {{#if enableDesignTokens}}
+    setAppTheme(Object.keys(themes)[0]);
+   {{else if selectedTheme}}
+    setAppTheme( {{{ stringify selectedTheme }}} );
+    {{else}}
+    setAppTheme(Object.keys(themes)[0]);
+  {{/if}}
+export const getThemes = () => Object.keys(themes);
+export const getSelectedTheme = () => selectedThemeName;
+export const resolveThemeAsset = (path) => (getAsset && getAsset(path));
+export default appTheme;