@fto-consult/expo-ui 7.5.2 → 7.5.4

package/bin/index.js

@@ -44,19 +44,21 @@ program.command('generate-getTable')
   
 program.command('electron')
   .description('utilitaire cli pour la plateforme electron. NB : Le package electron doit être installé globalement via l\'instruction npm i -g electron')
-  .argument('<cmd>', 'la commande à exécuter (start,init,build)')
+  .argument('<cmd>', 'la commande à exécuter (start,init,build,package). Start permet de démarrer le script electron, init permet d\'initialiser l\'application, build permet de compiler le code expo (exporter), package permet d\'effectuer le packaging de l\'application pour la distribution')
   //.option('-r, --project-root [dir]', 'le project root de l\'application')
-  .option('-c, --config [dir]', 'le chemin (relatif au project root) du fichier de configuration de l\'application electron')
+  //.option('-c, --config [dir]', 'le chemin (relatif au project root) du fichier de configuration de l\'application electron')
   //.option('-s, --splash [dir]', 'le chemin (relatif au project root) du fichier du splash screen de l\'application')
-  .option('-o, --out [dir]', 'le chemin (relatif au project root) du répertoire qui contiendra les fichiers build')
-  .option('-u, --url [url]', 'le lien url qui sera ouvert par l\'application')
-  .option('-b, --build [boolean]', 'si ce flag est spécfifié alors l\'application sera compilée')
-  .option('-a, --arch [architecture]', 'l\'architecture de la plateforme')
-  .option('-p, --platform [platform]', 'la plateforme à utiliser pour la compilation')
+  .option('-o, --out [dir]', 'le chemin du répertoire qui contiendra les fichiers build, des fichiers du exporté par le framework expo; commande : build|start')
+  .option('-u, --url [url]', 'le lien url qui sera ouvert par l\'application; commande start')
+  .option('-b, --build [boolean]', 'si ce flag est spécfifié alors l\'application sera compilée; combinée avec la commande start pour indiquer que l\'application sera à nouveau exportée ou pas.')
+  .option('-a, --arch [architecture]', 'l\'architecture de la plateforme; Commande package')
+  .option('-p, --platform [platform]', 'la plateforme à utiliser pour la compilation; commande package')
+  .option('-i, --import [boolean]', 'la commande d\'initialisation du package electron forge, utile pour le packaging de l\'application. Elle permet d\'exécuter le cli electron package, pour l\'import d\'un projet existant. Commande package. exemple : expo-ui electron package --import')
+  
   .action((script, options) => {
     const electronProjectRoot = path.resolve(projectRoot,"electron");
     const opts = Object.assign({},typeof options.opts =='function'? options.opts() : options);
-    let {out,arch,url,build,platform} = opts;
+    let {out,arch,url,build,platform,import:packageImport} = opts;
     //let {projectRoot} = opts;
     if(projectRoot == dir){
         throwError(`Invalid project root ${projectRoot}; project root must be different to ${dir}`);
@@ -168,21 +170,33 @@ program.command('electron')
             break;
           case "build":
             break;
-          default :
-            const electronPackage = require(`${path.resolve(electronProjectRoot,'package.json')}`);
-            electronPackage.name = packageObj.name;
-            electronPackage.version = packageObj.version;
-            //copying package json in build folder
-            writeFile(path.resolve(electronProjectRoot,"package.json"),JSON.stringify(electronPackage,null,"\t"));
-            platform = platform || process.platform;
-            console.log("packaing app from ",electronProjectRoot);
-            return require("./package")({
-                src : electronProjectRoot,
-                dist : path.resolve(outDir,platform),
-                platform,
-                arch : arch || undefined,
-                projectRoot : electronProjectRoot,
-           });
+          case "package" :
+            if(packageImport || opts.import){ //on importe le projet existant electron forge, @see : https://www.electronforge.io/import-existing-project
+              console.log("importing electron forge existing project....");
+              cmd = "npm install --save-dev @electron-forge/cli";
+              return exec({cmd,projectRoot:electronProjectRoot}).then(()=>{
+                cmd = `npm exec --package=@electron-forge/cli -c "electron-forge import"`;
+                return exec({cmd,projectRoot:electronProjectRoot}).then(()=>{
+                  console.log("package electron forge importé avec succèss");
+                });
+              }).catch(throwError);
+                
+            } else {
+              const electronPackage = require(`${path.resolve(electronProjectRoot,'package.json')}`);
+              electronPackage.name = packageObj.name;
+              electronPackage.version = packageObj.version;
+              //copying package json in build folder
+              writeFile(path.resolve(electronProjectRoot,"package.json"),JSON.stringify(electronPackage,null,"\t"));
+              platform = platform || process.platform;
+              console.log("packaing app from ",electronProjectRoot);
+              return require("./package")({
+                  src : electronProjectRoot,
+                  dist : path.resolve(outDir,platform),
+                  platform,
+                  arch : arch || undefined,
+                  projectRoot : electronProjectRoot,
+             });
+            }
            break;
       }
     }).catch((e)=>{

package/electron/index.js

@@ -61,21 +61,12 @@ const clipboadContextMenu = (_, props) => {
 const log = (message)=>{
   return win != null && win && win.webContents.send("console.log",message);
 }
-const setOSTheme = (theme) => {
-  theme = theme && typeof theme == "string"? theme : "light";
-  theme = theme.toLowerCase().trim();
-  if(theme !== 'system' && theme !=='dark'){
-    theme = "light";
-  }
-  nativeTheme.themeSource = theme;
-  session.set("os-theme",theme);
-  return nativeTheme.shouldUseDarkColors
-}
-setOSTheme(session.get("os-theme"));
+
 const isObj = x => x && typeof x =='object';
 
 
 function createBrowserWindow (options){
+  const {isMainWindow} = options;
   options = Object.assign({},options);
   let menu = options.menu;
   options.webPreferences = isObj(options.webPreferences)? options.webPreferences : {};
@@ -131,6 +122,9 @@ function createBrowserWindow (options){
     });
   }
   _win.on('closed', function() {
+      if(isMainWindow && typeof mainProcess.onMainWindowClosed == "function"){
+        mainProcess.onMainWindowClosed(_win);
+      }
       _win = null;
   });
   return _win;
@@ -140,6 +134,7 @@ function createWindow () {
   win = createBrowserWindow({
     showOnLoad : false,
     loadURL : undefined,
+    isMainWindow : true,
     registerDevToolsCommand : false,
     preload : path.resolve(__dirname,'preload.js'),
     webPreferences : {
@@ -177,9 +172,11 @@ function createWindow () {
       win.webContents.send("main-window-blur");
     }
   });
-
-
+  
   win.once("ready-to-show",function(){
+      if(typeof mainProcess.onMainWindowReadyToShow ==='function'){
+          mainProcess.onMainWindowReadyToShow(win);
+      }
       win.minimize()
       try {
         if(splash && splash instanceof BrowserWindow){
@@ -193,6 +190,9 @@ function createWindow () {
  
   win.on('close', (e) => {
       if (win) {
+        if(typeof mainProcess.onMainWindowClose == "function"){
+          mainProcess.onMainWindowClose(win);
+        }
         e.preventDefault();
         win.webContents.send('before-app-exit');
       }
@@ -264,8 +264,8 @@ function createWindow () {
   win.on('resize',onWinResizeEv);
   win.off('move',onWinResizeEv);
   win.on('move',onWinResizeEv);
-  if(mainProcess && typeof mainProcess =='object' && typeof mainProcess.onCreateWindow =='function'){
-     mainProcess.onCreateWindow(win);
+  if(typeof mainProcess.onCreateMainWindow =='function'){
+     mainProcess.onCreateMainWindow(win);
   }
   return win;
 }
@@ -307,11 +307,9 @@ ipcMain.on("toggle-dev-tools",function(event,value) {
 
 
 app.whenReady().then(() => {
-  const readOpts = {toggleDevTools,window:win,win};
-  if(typeof mainProcess.whenReady =='function'){
-     mainProcess.whenReady(readOpts);
-  } else if(typeof mainProcess.appOnReady =='function'){
-     mainProcess.appOnReady(readOpts);
+  const readOpts = {toggleDevTools,browserWindow:win,mainWindow:win};
+  if(typeof mainProcess.whenAppReady =='function'){
+     mainProcess.whenAppReady(readOpts);
   }
   globalShortcut.register('CommandOrControl+F12', () => {
     toggleDevTools();
@@ -387,7 +385,7 @@ ipcMain.on("get-paths.json",(event)=>{
 });
 
 ipcMain.on("get-app-name",(event)=>{
-  event.returnValue = packageJSON.name;
+  event.returnValue = packageJSON.realAppName || packageJSON.name;
   return event.returnValue ;
 });
 
@@ -533,7 +531,7 @@ ipcMain.on("is-dev-tools-open",function(event,value) {
     return win.webContents.isDevToolsOpened();
   }
   return false;
-})
+});
 
 
 ipcMain.on("window-set-progressbar",(event,interval)=>{
@@ -544,7 +542,41 @@ ipcMain.on("window-set-progressbar",(event,interval)=>{
    }
 })
 
+const setOSTheme = (theme) => {
+  theme = theme && typeof theme == "string"? theme : "light";
+  theme = theme.toLowerCase().trim();
+  if(theme !== 'system' && theme !=='dark'){
+    theme = "light";
+  }
+  nativeTheme.themeSource = theme;
+  session.set("os-theme",theme);
+  return nativeTheme.shouldUseDarkColors
+}
+
 /**** customisation des thèmes de l'application */
 ipcMain.handle('set-system-theme:toggle', (event,theme) => {
   return setOSTheme(theme);
+});
+
+ipcMain.handle('set-system-theme:dark-mode', (event) => {
+    nativeTheme.themeSource = 'dark';
+    return nativeTheme.shouldUseDarkColors;
+});
+ipcMain.handle('set-system-theme:light-mode', (event) => {
+  nativeTheme.themeSource = 'light';
+  return nativeTheme.shouldUseDarkColors;
+});
+
+
+ipcMain.handle('dark-mode:toggle', () => {
+  if (nativeTheme.shouldUseDarkColors) {
+    nativeTheme.themeSource = 'light'
+  } else {
+    nativeTheme.themeSource = 'dark'
+  }
+  return nativeTheme.shouldUseDarkColors
+})
+
+ipcMain.handle('dark-mode:system', () => {
+  nativeTheme.themeSource = 'system'
 });

package/electron/init/main.js

@@ -8,6 +8,25 @@
 */
 
 module.exports = {
+    /**** cette fonction est appelée à chaque fois que l'on désire créer une instance du BrowserWindow
+        @param {object} BrowserWindowOptions
+        Lors de la création de la fenêtre principal, BrowserWindowOptions continent la propriété isMainWindow à true
+        la prop isMainWindow {boolean} spécifie s'il s'agit de la fenêtre principale
+        la prop isPDFWindow {boolean}, spécifie s'il s'agit de la fenêtre destinée à l'affichage d'un fichier pdf
+    */
+    beforeCreateWindow : function({isMainWindow,isPDFWindow,...BrowserWindowOptions}){},
+    /*** exécutée lorsque  l'évènement ready-to-show de la fenêtre principale BrowserWindow est appelée
+        @param {Instance of BrowserWindow} mainBrowserWindow
+    */
+    onMainWindowReadyToShow : function(mainBrowserWindow){},
+    /**** exécutée lorsque l'évènement close de la fenêtre principale est appelée
+         @param {Instance of BrowserWindow} mainBrowserWindow
+    */
+    onMainWindowClose : function(mainBrowserWindow){},
+    /**** exécutée lorsque  l'évènement closed de la fenêtre principale est appélée
+        @param {InstanceOf BrowserWindow} mainBrowserWindow
+    */
+    onMainWindowClosed : function(mainBrowserWindow){},
     /***** 
         must return an Instance of Browser window
         width: 500, height: 400, transparent: true, frame: false, alwaysOnTop: true
@@ -19,9 +38,13 @@ module.exports = {
     },
     /*** this function is called when app is ready 
         toggleDevTools : {function},la fonction permettant de toggle les outils de developements
-        window : {BrowserWindow}, le browser window principal de l'application
+        browserWindow|mainWindow : {BrowserWindow}, le browser window principal de l'application
+    */
+    whenAppReady : function({toggleDevTools,browserWindow,mainWindow}){},
+    /*** exécutée une fois que la fonction createWindow est appelée pour créer le main Browser window de l'application
+        @param {InstanceOf BrowserWindow} mainBrowserWindow
     */
-    whenReady : function({toggleDevTools,window,win}){
+    onCreateMainWindow : function(mainBrowserWindow){
     
     }
 }

package/electron/preload.js

@@ -389,6 +389,7 @@ const ELECTRON = {
                         fileName,
                         pdfFilePath : mainPath,
                         showOnLoad : true,
+                        isPDFWindow : true,//spécifie s'il s'agit de la fenêtre pdf
                         webPreferences: {
                             plugins: true
                         }
@@ -397,7 +398,28 @@ const ELECTRON = {
                 }
             })
         }
-    }
+    },
+    get toggleDarkMode(){
+        return ()=>{
+            return ipcRenderer.invoke('dark-mode:toggle');
+        }
+    },
+    get setThemeToSystem (){
+        return ()=>{
+            return ipcRenderer.invoke('dark-mode:system');
+        }
+    },
+    /***** fait passer le theme au mode dark */
+    get setThemeToDark(){
+        return ()=>{
+            return ipcRenderer.invoke('set-system-theme:dark-mode');
+        }
+    },
+    get setThemeToLight(){
+        return ()=>{
+            return ipcRenderer.invoke('set-system-theme:light-mode');
+        }
+    },
 };
 
 require("./pload")(ELECTRON,paths || {});

package/electron/utils/config.js

@@ -22,7 +22,6 @@ class ElectronStore extends Conf {
 		delete options.name;
 		super(options);
 	}
-
 	openInEditor() {
 		electron.shell.openItem(this.path);
 	}

package/electron/utils/session.js

@@ -1,5 +1,5 @@
 const {app} = require('electron');
-let Conf = require('./config');
+const Conf = require('./config');
 const session = new Conf({cwd:app.getPath('userData')});
 
 module.exports = session;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "7.5.2",
+  "version": "7.5.4",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",

package/src/context/Provider.js

@@ -21,7 +21,7 @@ import {canFetchOffline} from "$capi/utils";
 import { SWR_REFRESH_TIMEOUT } from "./utils";
 import * as Utils from "$cutils";
 import {setDeviceIdRef} from "$capp";
-import {isMobileNative} from "$cplatform";
+import {isMobileNative,isElectron} from "$cplatform";
 import notify from "$cnotify";
 import {showPrompt} from "$ecomponents/Dialog/confirm";
 import {SWRConfig} from "$swr";
@@ -186,6 +186,11 @@ const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,a
         const isDark = theme.dark || theme.isDark || isDynamicThemeSupported && isColorShemeDark ;
         const elevation = defaultObj(theme.elevation,isDark ? pTheme.dark?.elevation : pTheme.light?.elevation)
         const newTheme = isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
+        if(isElectron() && typeof window.ELECTRON =='object' && typeof ELECTRON.setThemeToDark =="function" && typeof ELECTRON.setThemeToLight =="function"){
+           if(isDark){
+              ELECTRON.setThemeToDark();
+           } else ELECTRON.setThemeToLight();
+        }
         for(let i in newTheme){
           if(i !== 'colors' && !(i in theme)){
             theme[i] = newTheme[i];