@fto-consult/expo-ui 6.24.2 → 6.25.1

package/app.config.json

@@ -1,6 +1,6 @@
 {
 	"name": "@FTO-CONSULT/EXPO-UI",
-	"version": "6.23.10",
+	"version": "6.24.2",
 	"description": "Bibliothèque de composants UI Expo,react-native",
 	"bin": {
 		"expo-ui": "./bin/index.js"

package/babel.config.alias.js

@@ -2,6 +2,7 @@ const path = require("path");
 const fs = require("fs");
 const writeFile = require("./electron/utils/writeFile");
 module.exports = (opts)=>{
+    const isLocalDev = require("./is-local-dev")();
     const dir = path.resolve(__dirname);
     const projectRoot = typeof opts.projectRoot =='string' && fs.existsSync(opts.projectRoot.trim()) && opts.projectRoot.trim() || process.cwd();
     const assets = path.resolve(dir,"assets");
@@ -77,7 +78,7 @@ module.exports = (opts)=>{
     const HelpScreen = path.resolve(r["$escreens"],"Help");
     ///on génère les librairies open sources utilisées par l'application
     const root = path.resolve(r.$src,"..");
-    const nModulePath = fs.existsSync(path.resolve(root,"node_modules")) && path.resolve(root,"node_modules") || fs.existsSync(path.resolve(r.$src,"node_modules")) && path.resolve(r.$src,"node_modules") || path.resolve(projectRoot,"node_modules");
+    const nModulePath = isLocalDev ? path.resolve(__dirname,"node_modules") : fs.existsSync(path.resolve(root,"node_modules")) && path.resolve(root,"node_modules") || fs.existsSync(path.resolve(r.$src,"node_modules")) && path.resolve(r.$src,"node_modules") || path.resolve(projectRoot,"node_modules");
     const nodeModulesPath = fs.existsSync(nModulePath) ? nModulePath : path.resolve(process.cwd(),"node_modules");
     const outputPath = path.resolve(HelpScreen,"openLibraries.js");
     r.$nodeModulesPath = r.$enodeModulesPath= nodeModulesPath;

package/babel.config.js

@@ -2,7 +2,7 @@ module.exports = function(api,opts) {
   opts = typeof opts =='object' && opts ? opts : {};
   api = api && typeof api =='object'? api : {};
   
-  
+  const isLocalDev = require("./is-local-dev")();//si l'application est en developpement local
   
   ///les chemin vers la variable d'environnement, le chemin du fichier .env,@see : https://github.com/brysgo/babel-plugin-inline-dotenv
   //console.log(environmentPath," is envvv ",opts);

package/electron/utils/env.js

@@ -0,0 +1,80 @@
+import chalk from 'chalk';
+
+/**
+ * Validate the environment options and apply default values.
+ *
+ * @param env
+ * @category env
+ */
+export function validateEnvironment(env){
+  if (typeof env.projectRoot !== 'string') {
+    throw new Error(
+      `@expo/webpack-config requires a valid projectRoot string value which points to the root of your project`
+    );
+  }
+  warnEnvironmentDeprecation(env, true);
+  const validModes = ['development', 'production', 'none'];
+  if (!env.mode || !validModes.includes(env.mode)) {
+    throw new Error(
+      `@expo/webpack-config requires a valid \`mode\` string which should be one of: ${validModes.join(
+        ', '
+      )}`
+    );
+  }
+
+  // Default to web. Allow any arbitrary platform.
+  if (typeof env.platform === 'undefined') {
+    env.platform = 'web';
+  }
+  // No https by default since it doesn't work well across different browsers and devices.
+  if (typeof env.https === 'undefined') {
+    env.https = false;
+  }
+  
+  return env;
+}
+
+let warned= {};
+
+function shouldWarnDeprecated(
+  config,
+  key,
+  warnOnce
+) {
+  return (!warnOnce || !(key in warned)) && typeof config[key] !== 'undefined';
+}
+
+/**
+ *
+ * @param env
+ * @param warnOnce
+ * @category env
+ * @internal
+ */
+export function warnEnvironmentDeprecation(env, warnOnce) {
+  const warnings = {
+    production: 'Please use `mode: "production"` instead.',
+    development: 'Please use `mode: "development"` instead.',
+    polyfill: 'Please include polyfills manually in your project.',
+  };
+
+  for (const warning of Object.keys(warnings)) {
+    if (shouldWarnDeprecated(env, warning, warnOnce)) {
+      warned[warning] = true;
+      console.warn(
+        chalk.bgYellow.black(
+          `The environment property \`${warning}\` is deprecated. ${warnings[warning]}`.trim()
+        )
+      );
+    }
+  }
+}
+
+/**
+ * Used for testing
+ * @category env
+ * @internal
+ */
+export function _resetWarnings() {
+  warned = {};
+}

package/expo-ui-path.js

@@ -13,11 +13,11 @@ module.exports = function (){
             suffix = path.join(suffix,p);
         }
     })
-    const expoUIPath = path.resolve(process.cwd(),"node_modules","@fto-consult","expo-ui");
     const sep = path.sep;
-    if(path.resolve(process.cwd()) === path.resolve(__dirname)){//le programme s'exécute en environnement fix bugs sur electron
+    if(require("./is-local-dev")()){//le programme s'exécute en environnement fix bugs sur electron
         return path.resolve(__dirname,suffix).replace(sep,(sep+sep));///pour la résolution du module expo-ui en mode test
     }
+    const expoUIPath = path.resolve(process.cwd(),"node_modules","@fto-consult","expo-ui");
     const rootPath = process.cwd();
     const src = path.resolve(rootPath,"src");
     try {

package/index.js

@@ -50,16 +50,17 @@ export default function registerApp (opts){
 
 registerRootComponent(MainAppEntry);
 
-  
-/**
-registerApp({
-    navigation : {
-        screens : require("./src/test-screens").default
-    },
-    init : ({appConfig})=>{
-        appConfig.set("isAuthSingleUserAllowed",true);
-        appConfig.set("authDefaultUser",{code:"root",password:"admin123",label:"Master admin"})
-        return Promise.resolve("test ted")
-    }
-});
-*/
+const isLocalMode = true;
+//si après 5 secondes, l'application n'a pas été registrer, alors il s'agit d'un test en mode local
+if(isLocalMode){
+    registerApp({
+        navigation : {
+            screens : require("./src/test-screens").default
+        },
+        init : ({appConfig})=>{
+            appConfig.set("isAuthSingleUserAllowed",true);
+            appConfig.set("authDefaultUser",{code:"root",password:"admin123",label:"Master admin"})
+            return Promise.resolve("test ted")
+        }
+    });
+}

package/is-local-dev.js

@@ -0,0 +1,5 @@
+/**** vérifie si l'application est en train d'exéccuter en environnement local, mode test 
+    du framework expo-ui
+*/
+const path = require("path");
+module.exports = x=> path.resolve(process.cwd()) == path.resolve(__dirname);

package/metro.config.js

@@ -11,7 +11,7 @@ module.exports = function(opts){
   let {assetExts,sourceExts} = opts;
   assetExts = Array.isArray(assetExts)? assetExts: [];
   sourceExts= Array.isArray(sourceExts)?sourceExts : [];
-  const projectRoot = process.cwd();
+  const projectRoot = path.resolve(process.cwd());
   const localDir = path.resolve(__dirname);
   //@see : https://docs.expo.dev/versions/latest/config/metro/
   const config = getDefaultConfig(projectRoot,{
@@ -19,7 +19,8 @@ module.exports = function(opts){
     isCSSEnabled: true,
   });
   config.watchFolders = Array.isArray(config.watchFolders) && config.watchFolders || [];
-  if(projectRoot !== localDir){
+  const isLocalTest = require("./is-local-dev")();
+  if(!isLocalTest){
     config.watchFolders.push(localDir);
   }
   config.projectRoot = projectRoot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.24.2",
+  "version": "6.25.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -64,9 +64,10 @@
   "homepage": "https://github.com/borispipo/expo-ui#readme",
   "dependencies": {
     "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.26.2",
+    "@fto-consult/common": "^3.28.1",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
@@ -103,7 +104,7 @@
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
     "react-native-paper": "^5.10.1",
-    "react-native-paper-dates": "^0.18.13",
+    "react-native-paper-dates": "^0.18.14",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
@@ -118,8 +119,10 @@
   },
   "devDependencies": {
     "@expo/metro-config": "latest",
+    "@expo/webpack-config": "^18.1.2",
     "@faker-js/faker": "^8.0.2",
     "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^5.0.0"
+    "babel-plugin-module-resolver": "^5.0.0",
+    "uninstall": "^0.0.0"
   }
 }

package/readChart.txt

@@ -5,4 +5,7 @@
 Les valeurs pouvant appartenir au séries groupées des charts peuvent être uniquement les valeurs calculées du footer, 
 lorsque les colonnes sont grouépes
 
-Configure git credentialHelper http : credential.useHttpPath true, @see : https://microsoft.github.io/Git-Credential-Manager-for-Windows/Docs/Configuration.html#:~:text=useHttpPath,changes%20the%20behavior%20of%20Git.
+Configure git credentialHelper http : credential.useHttpPath true, @see : https://microsoft.github.io/Git-Credential-Manager-for-Windows/Docs/Configuration.html#:~:text=useHttpPath,changes%20the%20behavior%20of%20Git.
+
+
+il est possible d'ajouter les propriétés css valide en environnemnet web, dans le theme, en utilisant la props customCSS de type fonction ou chaine de caractère

package/src/App.js

@@ -30,7 +30,7 @@ Object.map(Utils,(v,i)=>{
 export default function getIndex({onMount,onUnmount,render,onRender,init}){
     const {swrConfig} = useContext();
     const isScreenFocusedRef = React.useRef(true);
-    useKeepAwake();
+    isMobileNative() && useKeepAwake();
     ///garde pour chaque écran sa date de dernière activité
     const screensRef = React.useRef({});//la liste des écrans actifs
     const activeScreenRef = React.useRef('');
@@ -145,8 +145,8 @@ export default function getIndex({onMount,onUnmount,render,onRender,init}){
         }}
       >
         <GestureHandlerRootView style={{ flex: 1,flexGrow:1,flexShrink:1}} testID={"RN_GestureHandlerRootView"}>
-          <KeyboardAvoidingViewComponent>
-            <SafeAreaProvider>
+          <KeyboardAvoidingViewComponent testID={"RN_AppKeyboardAvoidingView"}>
+            <SafeAreaProvider testID={"RN_AppSafeAreaProvider"}>
               <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender} init={init}/>
             </SafeAreaProvider>
           </KeyboardAvoidingViewComponent>

package/src/components/Datagrid/Accordion/Row.js

@@ -6,11 +6,15 @@ import Label from "$ecomponents/Label";
 import PropTypes from "prop-types";
 import React from "$react";
 import theme from "$theme"
-import {styles as rStyles} from "../utils";
+import {isMobileNative} from "$cplatform";
+import {styles as rStyles,getRowStyle} from "../utils";
 import Swipeable from 'react-native-gesture-handler/Swipeable';
+import { useIsRowSelected,useDatagrid} from "../hooks";
 
 const DatagridAccordionRow = React.forwardRef((props,ref)=>{
-    const {selectable,rowKey,
+    const {
+        selectable,
+        rowKey,
         bottomSheetTitle:customBottomSheetTitle,
         bottomSheetTitlePrefix,
         previewProps:_previewProps,
@@ -18,42 +22,29 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
         onRowPress,
         avatarProps,
         onRowLongPress,
-        context:pContext,item,
+        item,
         index,
-        isScrolling:_isScrolling,
         style,
         numColumns,
-        itemHeight,
         onToggleExpand,
         callArgs,
-        controlItemRender,
     } = props;
+    const {context} = useDatagrid();
     let {wrapperStyle,title,right,rightProps,description,avatarContent,rowProps} = props;
     rightProps = defaultObj(rightProps);
     if(!isObj(item)) {
         return null;
     }
-    const context = defaultObj(pContext);
-    const isRowSelected = x => typeof context.isRowSelected === 'function'? context.isRowSelected(rowKey,rowIndex): false;
-    const selected = isRowSelected();
-    let isScrolling = defaultBool(_isScrolling)
+    const selected = useIsRowSelected(rowKey,rowIndex);
     const innerRef = React.useRef(null);
-    if(typeof context.isScrolling =='function'){
-        let isS = context.isScrolling();
-        if(typeof isS =='boolean'){
-            isScrolling = isS;
-        }
-    }
-    const [state,setState] = React.useState({
-        expanded : false,
-    });
+    const [expanded,setExpanded] = React.useState(false);
     const toggleExpander = ()=>{
         if(onRowPress){
             onRowPress(callArgs);
         }
-        if(!state.expanded){
+        if(!expanded){
             getContentHeight(innerRef,({height})=>{
-                setState({...state,expanded:true});
+                setExpanded(true);
                 if(onToggleExpand){
                     const previewProps = defaultObj(_previewProps,bottomSheetProps);
                     let bottomSheetTitle = typeof customBottomSheetTitle =='function'? customBottomSheetTitle(callArgs) : customBottomSheetTitle;
@@ -61,23 +52,18 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                     bottomSheetTitle = defaultStr(bottomSheetTitle,defTitle,'Détails de la ligne N° '+rowIndexCount.formatNumber())
                     const previewTitle = isFunction(previewProps.title)? previewProps.title(callArgs) : defaultVal(previewProps.title,bottomSheetTitle);
                     return onToggleExpand({...previewProps,rowKey,item,index,height,title:previewTitle,onDismiss:()=>{
-                        setState({...state,expanded:false});
+                        setExpanded(false);
                     }})
                 }
             },10);
             return;
         } 
-        setState({...state,expanded:!state.expanded});
+        setExpanded(!expanded);
     }
 
     let rowIndex = defaultDecimal(index);
     let rowIndexCount = index+1;
     const testID = defaultStr(props.testID,"RN_DatagridAccordionRow"+(rowKey||rowIndex))
-    let _canHandleRow = isObj(context.props)? (!isFunction(context.props.filter)? true : context.props.filter(callArgs)):true;
-    if(_canHandleRow ===false || _canHandleRow === null){
-        //resetLayoutsRef();
-        return null;
-    }
     let _rP = {}
     const hasAvatar = React.isValidElement(avatarContent);
     const handleRowToggle = (event)=>{
@@ -85,12 +71,11 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
         if(onRowLongPress){
             onRowLongPress(callArgs);
         }
-        if(typeof context.handleRowToggle =='function'){
-            return context.handleRowToggle({selected:!isRowSelected(),rowKey,rowData:item,item,row:item,rowIndex,index:rowIndex,cb:()=>{
-                setState({...state})
-            }});
-        }
+        return !!context.handleRowToggle({rowKey,rowData:item,item,row:item,rowIndex,index:rowIndex});
     }
+    const wrapStyle = React.useMemo(()=>{
+        return getRowStyle({row:item,index,selected,numColumns,isAccordion:true,rowIndex:index});
+    },[selected])
     let viewWrapperStyle = {};
     if(selected) {
         const handleAvatarRowToggle = (event)=>{
@@ -106,17 +91,13 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             onPress = {handleAvatarRowToggle}
             icon = {"check"}
             title = {sTtitle}
-        ></Avatar> : null;/*<Pressable
-            onPress={handleAvatarRowToggle}
-            style = {{width:'100%'}}
-            testID = {testID+"_HandleToggle"}
-        />*/
+        ></Avatar> : null;
         if(!hasAvatar){
             viewWrapperStyle = [styles.hasNotAvatar,{borderLeftColor:theme.colors.primaryOnSurface}]
         }
     }
 
-    if(state.expanded){
+    if(expanded){
         if(React.isValidElement(avatarContent) && hasAvatar){
             avatarContent = <Avatar 
                 {...avatarProps}
@@ -127,32 +108,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     } else if(selectable === false){
         _rP.disabled = true;
     } 
-    if(!React.isValidElement(avatarContent)){
-        avatarContent = null;
-    }    
     right = typeof right === 'function'? right ({color:theme.colors.primaryOnSurface,selectable:true,style:[rStyles.lineHeight,styles.right]}) : right;
-    const renderLeftActions = (_progress,dragX) => {
-        const trans = dragX.interpolate({
-          inputRange: [0, 80],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        });
-        return (
-            <View style={{justifyContent:'center',flex:1}}>
-                <Animated.Text
-                    style={[
-                    styles.actionText,
-                    {
-                        transform: [{ translateX: trans }],
-                        alignItems : 'center',
-                        color : theme.colors.primary,
-                    },
-                    ]}>
-                    {(selected?'Désélectionnez la ligne ':'Sélectionnez la ligne ')}
-            </Animated.Text>
-            </View>
-        );
-    };
     const swipeableRef = React.useRef(null);
     return  <Pressable
                 {..._rP}    
@@ -165,47 +121,65 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                     _rP.style,rowProps.style,
                     styles.container,
                     numColumns > 1 && {width:'99%'},
-                    //selected && !hasAvatar && styles.containerSelected,
                     styles.bordered,
                     wrapperStyle,
+                    wrapStyle,
                     style,
                 ]}
                 ref = {React.useMergeRefs(ref,innerRef)}
-            >
-                <Swipeable
-                     ref = {swipeableRef}
-                     testID={testID+'_ContentContainerSwipeable'}
-                     friction={2}
-                     containerStyle = {{overflow:'hidden'}}
-                    leftThreshold={80}
-                    enableTrackpadTwoFingerGesture
-                    renderLeftActions={selectable === false? undefined : renderLeftActions}
-                    onSwipeableWillOpen = {(direction)=>{
-                        if(selectable === false) return;
-                        if(swipeableRef.current && swipeableRef.current.close){
-                            swipeableRef.current.close();
-                        }
-                        handleRowToggle();
-                    }}
-                >
-                    <View 
-                        style={[styles.renderedContent,viewWrapperStyle]} 
-                        testID={testID+'_ContentContainer'}
-                    >
-                        {avatarContent ? <View testID={testID+"_AvatarContainer"} style={[styles.avatarContent]}>
-                            {avatarContent}
-                        </View> : null}
-                        <View testID={testID+"_Content"} style={[styles.content,styles.wrap]}>
-                            {title}
-                            {description}
-                        </View>
-                        {right ? <Label testID={testID+"_Right"} primary selectable {...rightProps} style={[styles.right,styles.label,rStyles.lineHeight,rightProps.style]}>
-                            {right}
-                        </Label> : null}
-
+        >
+        <Swipeable
+             ref = {swipeableRef}
+             testID={testID+'_ContentContainerSwipeable'}
+             friction={2}
+             containerStyle = {{overflow:'hidden'}}
+            leftThreshold={80}
+            enableTrackpadTwoFingerGesture
+            renderLeftActions={selectable === false? undefined : (_progress,dragX) => {
+                const trans = dragX.interpolate({
+                  inputRange: [0, 80],
+                  outputRange: [0, 1],
+                  extrapolate: 'clamp',
+                });
+                return (
+                    <View style={{justifyContent:'center',flex:1}}>
+                        <Animated.Text
+                            style={[
+                            styles.actionText,
+                            {
+                                transform: [{ translateX: trans }],
+                                alignItems : 'center',
+                                color : theme.colors.primary,
+                            },
+                            ]}>
+                            {(selected?'Désélectionnez la ligne ':'Sélectionnez la ligne ')}
+                    </Animated.Text>
                     </View>
-                </Swipeable>
-            </Pressable>
+                );
+            }}
+            onSwipeableWillOpen = {(direction)=>{
+                if(selectable === false) return;
+                if(swipeableRef.current && swipeableRef.current.close){
+                    swipeableRef.current.close();
+                }
+                handleRowToggle();
+            }}
+        >
+            <View 
+                style={[styles.renderedContent,viewWrapperStyle]} 
+                testID={testID+'_ContentContainer'}
+            >
+                {avatarContent}
+                <View testID={testID+"_Content"} style={[styles.content,styles.wrap]}>
+                    {title}
+                    {description}
+                </View>
+                {right ? <Label testID={testID+"_Right"} primary selectable {...rightProps} style={[styles.right,styles.label,rStyles.lineHeight,rightProps.style]}>
+                    {right}
+                </Label> : null}
+            </View>
+        </Swipeable>
+    </Pressable>
 })
 
 export default DatagridAccordionRow;
@@ -272,7 +246,7 @@ const styles = StyleSheet.create({
     container : {
         marginVertical : 10,
         paddingVertical : 5,
-        paddingHorizontal : 10,// isMobileNative()? 15:10,
+        paddingHorizontal : isMobileNative()? 10 : 0,
         marginHorizontal : 5,
         flexWrap : 'nowrap',
         justifyContent : 'center',

package/src/components/Datagrid/Accordion/ToogleRow.js

@@ -0,0 +1,9 @@
+import React from "$react";
+import View from "$ecomponents/View";
+
+export default function DatagridAccordionToggleRow({handleRowToggle,avatarContent,...props}){
+    if(!React.isValidElement(avatarContent)){
+        avatarContent = null;
+    }    
+    return null;
+}