@fto-consult/expo-ui 3.4.1 → 3.6.1

package/bin/index.js

@@ -1,99 +1,99 @@
-//#!/usr/bin/env node
-/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
-'use strict';
-process.on('unhandledRejection', err => {
-  throw err;
-});
-const supportedScript = {
-  "start" : true,//start electron
-  "build" : true, //script pour faire un build
-}
-const path= require("path");
-const fs = require("fs");
-const dir = path.resolve(__dirname);
-const electronDir = path.resolve(dir, "..","electron");
-const exec = require("../electron/exec");
-const args = process.argv.slice(2);
-let projectRoot = process.cwd();
-const createDir = require("../electron/createDir");
-const copyDir = require("../electron/copyDir");
-const parsedArgs = require("./parseArgs")(args,supportedScript);
-if(!parsedArgs.script || !(parsedArgs.script in supportedScript)){
-   console.error ("Erreur : script invalide, vous devez spécifier script figurant parmi les script : ["+Object.keys(supportedScript).join(", ")+"]");
-   process.exit();
-}
-const {script} = parsedArgs;
-let cmd = null;
-/**** 
- *    1. installer electron globallement : npm i -g electron@latest
- *  cmde : [cmd] start electron config=[path-to-config-relative-to-project-dir] 
- *        splash=[path-to-splashcreen-relative-to-project-root] 
- *        output-dir|out = [path-to-output-dir-relative-to-root-project]
- * */
-if(parsedArgs.electron){
-  const pathsJSON = path.resolve(electronDir,"paths.json");
-  if(!fs.existsSync(pathsJSON)){
-    throw "Le fichier des chemins d'accès à l'application est innexistant, rassurez vous de tester l'application en environnement web, via la cmde <npx expo start>, avant l'exécution du script electron."
-  }
-  const paths = require(`${pathsJSON}`);
-  if(typeof paths !=='object' || !paths || !paths.projectRoot){
-      throw "Fichiers des chemins d'application invalide!!! merci d'exécuter l'application en environnement web|android|ios puis réessayez"
-  }
-  projectRoot = path.resolve(projectRoot);
-  const out = parsedArgs.out || parsedArgs["output-dir"];
-  const outDir = out && path.dirname(out) && path.resolve(projectRoot,path.dirname(out),"electron") || path.resolve(projectRoot,"dist","electron")
-  if(!createDir(outDir)){
-      throw "Impossible de créer le répertoire <<"+outDir+">> du fichier binaire!!";
-  }
-  const logoPath = paths.logo || paths.$assets && path.resolve(paths.$assets,"logo.png") || paths.$images && path.resolve(paths.$images,"logo.png");
-  if(!logoPath || !fs.existsSync(logoPath)){
-     if(logoPath){
-      console.warn("Logo de l'application innexistant!! Vous devez spécifier le logo de votre application, fichier ["+(logoPath)+"]")
-    }
-  }
-  const buildOutDir = path.resolve(electronDir,"dist");
-  const indexFile = path.resolve(buildOutDir,"index.html");
-  const webBuildDir = path.resolve(projectRoot,"web-build");
-  const promise = new Promise((resolve,reject)=>{
-      const next = ()=>{
-        if(fs.existsSync(webBuildDir)){
-            return copyDir(webBuildDir,buildOutDir).catch(reject).then(resolve);
-        } else {
-          reject("fichier web-build exporté par electron innexistant!!");
-        }
-      }
-      if(parsedArgs.compile || !fs.existsSync(path.resolve(webBuildDir,"index.html"))){
-        cmd = "npx expo export:web";
-        console.log("******************** exporting app : "+cmd);
-        return exec({cmd,projectRoot}).then(next).catch(reject);
-      }
-      next();
-  });
-  return promise.then(()=>{
-    if(!fs.existsSync(buildOutDir) || !fs.existsSync(indexFile)){
-       throw "répertoire d'export web invalide où innexistant ["+buildOutDir+"]"
-    }
-    switch(script){
-        case "start":
-           cmd = "electron "+electronDir;
-           return new Promise((resolve,reject)=>{
-              exec({
-                cmd, 
-                projectRoot : electronDir,
-              }).finally(()=>{
-                console.log("ant to exit");
-              })
-              setTimeout(resolve,1000)
-           })
-          break;
-        case "build":
-          break;
-    }
-  }).catch((e)=>{
-    console.log(e," is cathing ggg");
-  }).finally(()=>{
-    process.exit();
-  });
-} else {
-  process.exit();
-}
+//#!/usr/bin/env node
+/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
+'use strict';
+process.on('unhandledRejection', err => {
+  throw err;
+});
+const supportedScript = {
+  "start" : true,//start electron
+  "build" : true, //script pour faire un build
+}
+const path= require("path");
+const fs = require("fs");
+const dir = path.resolve(__dirname);
+const electronDir = path.resolve(dir, "..","electron");
+const exec = require("../electron/exec");
+const args = process.argv.slice(2);
+let projectRoot = process.cwd();
+const createDir = require("../electron/createDir");
+const copyDir = require("../electron/copyDir");
+const parsedArgs = require("./parseArgs")(args,supportedScript);
+if(!parsedArgs.script || !(parsedArgs.script in supportedScript)){
+   console.error ("Erreur : script invalide, vous devez spécifier script figurant parmi les script : ["+Object.keys(supportedScript).join(", ")+"]");
+   process.exit();
+}
+const {script} = parsedArgs;
+let cmd = null;
+/**** 
+ *    1. installer electron globallement : npm i -g electron@latest
+ *  cmde : [cmd] start electron config=[path-to-config-relative-to-project-dir] 
+ *        splash=[path-to-splashcreen-relative-to-project-root] 
+ *        output-dir|out = [path-to-output-dir-relative-to-root-project]
+ * */
+if(parsedArgs.electron){
+  const pathsJSON = path.resolve(electronDir,"paths.json");
+  if(!fs.existsSync(pathsJSON)){
+    throw "Le fichier des chemins d'accès à l'application est innexistant, rassurez vous de tester l'application en environnement web, via la cmde <npx expo start>, avant l'exécution du script electron."
+  }
+  const paths = require(`${pathsJSON}`);
+  if(typeof paths !=='object' || !paths || !paths.projectRoot){
+      throw "Fichiers des chemins d'application invalide!!! merci d'exécuter l'application en environnement web|android|ios puis réessayez"
+  }
+  projectRoot = path.resolve(projectRoot);
+  const out = parsedArgs.out || parsedArgs["output-dir"];
+  const outDir = out && path.dirname(out) && path.resolve(projectRoot,path.dirname(out),"electron") || path.resolve(projectRoot,"dist","electron")
+  if(!createDir(outDir)){
+      throw "Impossible de créer le répertoire <<"+outDir+">> du fichier binaire!!";
+  }
+  const logoPath = paths.logo || paths.$assets && path.resolve(paths.$assets,"logo.png") || paths.$images && path.resolve(paths.$images,"logo.png");
+  if(!logoPath || !fs.existsSync(logoPath)){
+     if(logoPath){
+      console.warn("Logo de l'application innexistant!! Vous devez spécifier le logo de votre application, fichier ["+(logoPath)+"]")
+    }
+  }
+  const buildOutDir = path.resolve(electronDir,"dist");
+  const indexFile = path.resolve(buildOutDir,"index.html");
+  const webBuildDir = path.resolve(projectRoot,"web-build");
+  const promise = new Promise((resolve,reject)=>{
+      const next = ()=>{
+        if(fs.existsSync(webBuildDir)){
+            return copyDir(webBuildDir,buildOutDir).catch(reject).then(resolve);
+        } else {
+          reject("fichier web-build exporté par electron innexistant!!");
+        }
+      }
+      if(parsedArgs.compile || !fs.existsSync(path.resolve(webBuildDir,"index.html"))){
+        cmd = "npx expo export:web";
+        console.log("******************** exporting app : "+cmd);
+        return exec({cmd,projectRoot}).then(next).catch(reject);
+      }
+      next();
+  });
+  return promise.then(()=>{
+    if(!fs.existsSync(buildOutDir) || !fs.existsSync(indexFile)){
+       throw "répertoire d'export web invalide où innexistant ["+buildOutDir+"]"
+    }
+    switch(script){
+        case "start":
+           cmd = "electron "+electronDir;
+           return new Promise((resolve,reject)=>{
+              exec({
+                cmd, 
+                projectRoot : electronDir,
+              }).finally(()=>{
+                console.log("ant to exit");
+              })
+              setTimeout(resolve,1000)
+           })
+          break;
+        case "build":
+          break;
+    }
+  }).catch((e)=>{
+    console.log(e," is cathing ggg");
+  }).finally(()=>{
+    process.exit();
+  });
+} else {
+  process.exit();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "3.4.1",
+  "version": "3.6.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.15.2",
+    "@fto-consult/common": "^2.15.4",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -105,7 +105,7 @@
     "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.7",
     "react-native-webview": "11.23.1",
-    "react-virtuoso": "^4.0.3",
+    "react-virtuoso": "^4.0.6",
     "sharp-cli": "^2.1.0",
     "tippy.js": "^6.3.7",
     "use-event-callback": "^0.1.0",

package/src/components/AutoSizer/Vertical.js

@@ -0,0 +1,89 @@
+import React from '$react';
+import { Dimensions} from 'react-native';
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+import theme from "$theme";
+import {defaultStr,defaultObj,defaultNumber} from "$utils";
+import APP from "$capp/instance";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import {isWeb} from "$cplatform";
+
+/***
+ * ce composant a pour but de définir la taille d'un contenu en se basant sur sa positin top, de manière à ce que, le contentu du composant fit
+ * le reste de la taille de la page, avec comme valeur de la props minHeight
+ */
+const AutoSizerVerticalComponent = React.forwardRef(({onLayout,isScrollView,withActivityIndicator,testID,withPadding,maxHeight,minHeight,style,children:cChildren,...rest},ref) => {
+  testID = defaultStr(testID,'RN_AutoSizerVerticalComponent');
+  const hasUpdateLayoutRef = React.useRef(false);
+  const layoutRef = React.useRef(null);
+  const [layout,setLayout] = React.useState(Dimensions.get("window"));
+  const {height,width} = layout;
+  const hasInitializedRef = React.useRef(false);
+  const children = React.useStableMemo(()=>cChildren,[cChildren]);
+  withActivityIndicator = typeof withActivityIndicator =='boolean'? withActivityIndicator : !isScrollView;
+  const updateLayout = ()=>{
+      return new Promise((resolve)=>{
+          hasUpdateLayoutRef.current = true;
+          if(layoutRef.current && layoutRef.current.measureInWindow){
+              layoutRef.current.measureInWindow((x, y, width, height) => {
+                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
+                  setLayout(r);
+                  hasInitializedRef.current = true;
+                  resolve(r);
+              });
+          } else {
+            setLayout(Dimensions.get("window"))
+          }
+      })
+  }
+  React.setRef(ref,{
+    updateLayout,
+    layoutRef,
+    ref : layoutRef
+});
+  React.useEffect(()=>{
+    const onResizePage = ()=>{
+      setTimeout(()=>{
+         updateLayout();
+      },300);
+    }
+    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    return ()=>{
+      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+      React.setRef(ref,null);
+    }
+  },[]);
+  const hasUpdateLayout = hasUpdateLayoutRef.current;
+  const cStyle ={width:'100%',maxHeight:Math.max(height-100,250)};
+  const contentLayout = defaultObj(layout.layout);
+  cStyle.minHeight = Math.min(Math.max(layout.height-defaultNumber(contentLayout.y),minHeight && minHeight ||250));
+  const cMaxHeight = layout.height-defaultNumber(contentLayout.y);
+  if(cMaxHeight>=250){
+    cStyle.maxHeight = cMaxHeight;
+  }
+  if(withPadding !== false){
+      cStyle.paddingBottom = 50;
+  }
+  const fStyle = !hasUpdateLayout && withActivityIndicator !== false && {flex:1,flexDirection:'column',maxHeight:cStyle.maxHeight,maxWidth : Math.max(layout.width-defaultNumber(contentLayout.x)),justifyContent:'center',alignItems:'center'} || {};
+  return  <View ref={layoutRef} 
+        onLayout={(a,b,c)=>{
+            if(onLayout && onLayout(a,b,c) === false) return;
+            if(!hasInitializedRef.current){
+              updateLayout();
+            }
+        }} 
+    {...rest} 
+    style={[theme.styles.w100,cStyle,style,fStyle,maxHeight && {maxHeight}, minHeight && {minHeight}]} testID={testID+"_ScrollViewContainer"}>
+    {hasUpdateLayout || withActivityIndicator === false ?children : <ActivityIndicator size={'large'}/>}
+  </View>
+});
+
+AutoSizerVerticalComponent.displayName = "AutoSizerVerticalComponent";
+export default AutoSizerVerticalComponent;
+
+AutoSizerVerticalComponent.propTypes = {
+   ...defaultObj(View.propTypes),
+   withActivityIndicator : PropTypes.bool,//si l'on utilisera l'activity indicator pour le chargement du contentu
+   maxHeight : PropTypes.number,
+   minHeight : PropTypes.number,
+}

package/src/components/AutoSizer/index.js

@@ -0,0 +1,3 @@
+export {default as Vertical} from "./Vertical";
+
+export {default} from "./AutoResizer";