@fto-consult/expo-ui 7.24.3 → 8.0.0

package/src/components/Dropdown/index.js

@@ -5,7 +5,7 @@
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import {Dimensions,Pressable,StyleSheet,Animated,} from "react-native";
-import {TouchableRipple} from "react-native-paper";
+import {TouchableRipple as RNTouchableRiple} from "react-native-paper";
 import Divider from "$ecomponents/Divider";
 import React, {Fragment,Component as AppComponent} from "$react";
 import theme,{Colors} from "$theme";
@@ -26,6 +26,7 @@ import Chip from "$ecomponents/Chip";
 import {Content as BottomSheet,Menu as BottomSheetMenu,getContentHeight} from "$ecomponents/BottomSheet";
 import {isWeb} from "$cplatform";
 import Tooltip from "$ecomponents/Tooltip";
+import TouchableRipple from "$ecomponents/TouchableRipple";
 
 const _isIos = isIos();
 
@@ -64,7 +65,22 @@ class DropdownComponent extends AppComponent {
                     if(React.isValidElement(item,true) || isDecimal(item) || typeof item =='boolean') return item;
                     if(isObj(item) ) {
                         const itemLabel = this.props.itemLabel;
-                        if(isNonNullString(itemLabel) && item.hasOwnProperty(itemLabel)) return defaultStr(item[itemLabel]);
+                        if(isNonNullString(itemLabel)){
+                            let iLabel = "";
+                            itemLabel.trim().split(",").map((itL)=>{
+                                let itV = item.hasOwnProperty(itL) ? item[itL] : undefined;
+                                if(typeof formatItemLabel ==="function"){
+                                    const itt = formatItemLabel({value:itV,code:itV,columnField:itL,label:itL,item});
+                                    if(isNonNullString(itt) || typeof itt =="number"){
+                                        itV = String(itt);
+                                    }
+                                }
+                                if(itV !== undefined){
+                                    iLabel += " "+String(itV);
+                                }
+                            });
+                            if(iLabel) return iLabel;
+                        }
                         if(isNonNullString(item.label)) return item.label;
                         return defaultStr(item.text,item[index]);
                     }
@@ -896,10 +912,9 @@ class DropdownComponent extends AppComponent {
         const testID = defaultStr(dropdownProps.testID,"RN_DropdownComponent");
         const defRight = defaultVal(textInputProps.right,inputProps.right);
         const enableCopy = defaultBool(inputProps.enableCopy,textInputProps.enableCopy,(iconDisabled || (!multiple && !showAdd)) && !loadingElement ?true : false);
-        const anchor = <Pressable
-                activeOpacity = {0.3}   
+        const anchor = <TouchableRipple
                 onPress={this.open.bind(this)}
-                disabled = {disabled}
+                disabled = {disabled || isWeb()}
                 onLayout={bindResizeEvents === false ? undefined : this.onLayout.bind(this)}
                 style = {{pointerEvents}}
                 aria-label={defaultStr(dropdownProps["aria-label"],label,text)}
@@ -958,7 +973,7 @@ class DropdownComponent extends AppComponent {
                     {!canHandle && isFlatMode && <ProgressBar  color={theme.colors.secondary} {...defaultObj(progressBarProps)} indeterminate />}
                     {helperText}
             </View>
-        </Pressable>
+        </TouchableRipple>
 
         let restProps = {};
         if(!isMob){
@@ -1097,7 +1112,7 @@ class DropdownComponent extends AppComponent {
                             if(renderTag && (self.state.nodes[key].valueKey in self.state.selectedValuesKeys)){
                                 return null;
                             }
-                            const node = self.state.nodes[key];
+                            let node = self.state.nodes[key];
                             const {index,value,valueKey} = node;
                             const _isSelected = self.isSelected(value,valueKey);
                             if(dynamicContent){
@@ -1125,7 +1140,7 @@ class DropdownComponent extends AppComponent {
                                         //style = {[[theme.styles.h100]]}
                                         tooltipProps = {{style:[theme.styles.h100,theme.styles.w100],testID:testID+"_DropdownTooltipPopoverContainer"}}
                                         onPress={onItemPress}
-                                        Component={TouchableRipple}
+                                        Component={RNTouchableRiple}
                                         //testID={testID+"Container"}
                                         style={[
                                             styles.itemContainer,{minHeight:!isBigList?MIN_HEIGHT:undefined},
@@ -1297,6 +1312,13 @@ DropdownComponent.propTypes = {
     "aria-label" : PropTypes.string,
     compare : PropTypes.func,
     temProps : PropTypes.object,
+    /*
+        le champ itemLabel peut être une chaine de caractère de plusieurs champs constituant l'item et séparé par des virgule
+        si si cette valeur est définine, alors ladite fonction sera appelée pour chacun des champ constitué par itemLabel et preneant en paramètre 
+        @return {string|number}
+        @param {<Object { item:{Object},label:{string : le label en cours}, value{any, item[label]}}>}
+    */
+    formatItemLabel : PropTypes.func,
     itemLabel : PropTypes.string,//le nom du champ à utiliser pour le rendu du libelé la méthode appelée pour retourne le libelé de l'item
     itemValue : PropTypes.oneOfType([PropTypes.func]),//le nom du champ de la valeur à récupérer
     renderItem : PropTypes.oneOfType([PropTypes.func]),

package/src/components/ErrorBoundary/ErrorMessage.js

@@ -22,15 +22,15 @@ const ErrorMessage = React.forwardRef(function(props,ref){
     }
     if(!error || !info || !error.toString) return null;
     const pointerEvents = 'auto';
-    const backgroundColor = theme.colors.backgroundColor;
-    const color = theme.colors.onSurface;
+    const backgroundColor = theme.colors.background;
+    const color = theme.colors.text;
     return <Portal>
           <Screen {...props} modal={false}>
-            <View ref={ref} testID={`${testID}_ErrorMessageContainer`} style={[{pointerEvents},styles.container,{backgroundColor}]}>
+            <View ref={ref} testID={`${testID}_ErrorMessageContainer`} style={[{pointerEvents},{backgroundColor},styles.container]}>
               <View style={[styles.content,{pointerEvents}]} testID={`${testID}_ErrorMessageContentContainer`}>
                 <Label style={[styles.title,{color}]}>Oops!</Label>
                 <Label style={[styles.subtitle,{color}]}>{'Une erreur est survenue'}</Label>
-                <Label style={styles.error}>{error.toString()}</Label>
+                <Label style={[styles.subtitle,{color:theme.colors.error}]}>{error.toString()}</Label>
                 <Button mode="contained" iconProps={{marginVertical:0,pointerEvents,paddingVertical:0}} icon='home-variant' style={{backgroundColor:theme.colors.primary,marginHorizontal:10}} labelStyle={{color:theme.colors.primaryLabel}} onPress={goToHome}>
                     Retour à l'accueil
                 </Button>
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 48,
-    fontWeight: '300',
+    fontWeight: '500',
     paddingBottom: 16,
   },
   subtitle: {

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -34,7 +34,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,fore
     }
     if(isNonNullString(foreignKeyLabel)){
         foreignKeyLabel = foreignKeyLabel.trim().ltrim("[").rtrim("]").split(",");
-        if(!isNonNullString(foreignKeyColumn)){
+        if(isNonNullString(foreignKeyColumn)){
             foreignKeyLabel = foreignKeyLabel.filter((f)=>f?.toLowerCase()?.trim() !== foreignKeyColumn.toLowerCase().trim());
         }
     }
@@ -159,7 +159,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,fore
                 fetchedResultRef.current = args;
                 return fetchedResultRef.current;
             }).catch((e)=>{
-                console.log(e," fetching list of data select table data ",foreignKeyColumn,foreignKeyTable)
+                console.log(e," fetching list of data select table data ",foreignKeyColumn,foreignKeyTable,props)
             });
         },
         showError : false,

package/src/components/Image/index.js

@@ -11,7 +11,7 @@ import {isMobileNative} from "$cplatform";
 //import Signature from "$ecomponents/Signature";
 import Label from "$ecomponents/Label";
 //import Editor from "./Editor";
-
+import {Component as CameraComponent} from "$emedia/camera";
 
 import {pickImage,nonZeroMin,canTakePhoto,takePhoto} from "$emedia";
 import addPhoto from "$eassets/add_photo.png";
@@ -57,7 +57,7 @@ export default function ImageComponent(props){
     let {disabled,onMount,defaultSource,editable,onUnmount,label,text,labelProps,readOnly,beforeRemove,
         onChange,draw,round,drawText,drawLabel,rounded,defaultSrc,
         createSignatureOnly,pickImageProps,width,height,cropProps,size,resizeProps,containerProps,
-        menuProps,pickUri,drawProps,imageProps,length,testID,...rest} = props;
+        menuProps,pickUri,drawProps,imageProps,length,testID,withLabel,...rest} = props;
     rest = defaultObj(rest);
     pickImageProps = defaultObj(pickImageProps);
     cropProps = defaultObj(cropProps);
@@ -222,17 +222,15 @@ export default function ImageComponent(props){
             }
         })
     }
-    (async ()=>{
-        if(false && await canTakePhoto()){
-            menuItems.push({
-                label : 'Eng photo',
-                icon : 'camera',
-                onPress : (a)=>{
-                    takePhoto().then(handlePickedImage);
-                }
-            })
-        }
-    })();
+    if(isMobileNative() && !readOnly){
+        menuItems.push({
+            label : 'Enregistrer une photo',
+            icon : 'camera',
+            onPress : (a)=>{
+                takePhoto().then(handlePickedImage);
+            }
+        })
+    }
 
     if(canUpdate && !readOnly){
         menuItems.push({
@@ -253,7 +251,7 @@ export default function ImageComponent(props){
             }
         })
     }
-    const _label = defaultString(label);
+    const _label = withLabel !== false ? defaultString(label) : "";
     const isDisabled = menuItems.length > 0 ? true : false; 
     return <View testID={testID+"_FagmentContainer"}>
         {!createSignatureOnly ? (<Menu
@@ -261,7 +259,7 @@ export default function ImageComponent(props){
                 disabled = {isDisabled}
                 anchor = {(props)=>{
                     return <View aria-label={_label} testID={testID+"_Container"} {...containerProps} style={[label?styles.align:null,containerProps.style,{pointerEvents:disabled|| readOnly? "none":"auto"},label?styles.container:null]}>
-                        {<Label testID={testID+"_Label"} {...labelProps} disabled={disabled} style={[styles.label,labelProps.style]}>{label}</Label>}
+                        {withLabel !== false ? <Label testID={testID+"_Label"} {...labelProps} disabled={disabled} style={[styles.label,labelProps.style]}>{label}</Label>:null}
                         {<Avatar
                             resizeMethod = {"auto"}
                             resizeMode = {"contain"}

package/src/components/Link/index.js

@@ -1,4 +1,4 @@
-import { Pressable } from "react-native";
+import TouchableRipple from "$ecomponents/TouchableRipple";
 import { navigate } from "$cnavigation";
 import PropTypes from "prop-types";
 import {defaultStr,isValidUrl,isValidEmail,defaultNumber} from "$cutils";
@@ -28,7 +28,7 @@ const LinkComponent= React.forwardRef(({Component,navigation,children,params,sto
     if(typeof children =='function'){
         return children ({...rest,onPress:onRoutePress},ref);
     }
-    Component = React.isComponent(Component)? Component : Pressable;
+    Component = React.isComponent(Component)? Component : TouchableRipple;
     return <Component ref={ref} {...rest} onPress={onRoutePress}>
         {children}
     </Component>

package/src/components/SplashScreen/index.js

@@ -18,7 +18,6 @@ import styles, {
   _dynamicBackgroundOpacity,
 } from "./styles"
 import {useAppComponent} from "$econtext/hooks";
-import theme from "$theme";
 
 const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,logoHeight,backgroundColor,imageBackgroundSource,imageBackgroundResizeMode,
   testID})=>{
@@ -28,6 +27,7 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
   });
   const { loadingProgress, animationDone} = state;
   const prevIsLoaded = React.usePrevious(isLoaded); 
+  const timerRef = React.useRef(null);
   React.useEffect(()=>{
     if(isLoaded && !prevIsLoaded){
       Animated.timing(loadingProgress, {
@@ -41,6 +41,14 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
             animationDone:true,
           })
       })
+    } else if(isLoaded){
+       clearTimeout(timerRef.current);
+       timerRef.current = setTimeout(()=>{
+          if(isLoaded && !animationDone){
+            setState({...state,animationDone:true});
+          }
+          clearTimeout(timerRef.current);
+       },delay|2000);
     }
   });
   testID = defaultStr(testID,"RN_SplashscreenComponent")

package/src/components/TableLink/index.js

@@ -15,6 +15,7 @@ import {navigateToTableData,navigateToStructData} from "$enavigation/utils";
 import Auth from "$cauth";
 import fetch from "$capi/fetch";
 import useContext from "$econtext/hooks";
+import TouchableRipple from "$ecomponents/TouchableRipple";
 /***** la fonction fetchForeignData permet de spécifier s'il s'agit d'une données de structure où non 
     dans le champ isStructData
 */
@@ -22,7 +23,7 @@ const TableLinKComponent = React.forwardRef(({containerProps,children,labelProps
     const {testID,onPressLink,disabled,readOnly,fetchData,navigate,isAllowed:checkIfAllowed,Component,...rest} = usePrepareProps(props);
     containerProps = defaultObj(containerProps);
     labelProps = defaultObj(labelProps);
-    const CP = disabled || readOnly ? View : Pressable;
+    const CP = disabled || readOnly ? View : TouchableRipple;
     return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled || readOnly? undefined : onPressLink} style={[styles.container,containerProps.style]}>
         <Tooltip testID={testID+"_Tooltip"} {...rest} style={[rest.style,{pointerEvents: disabled || readOnly ? 'none' : 'auto'}]} Component={Component}  onPress={disabled || readOnly?undefined:onPressLink} ref={ref}  readOnly={readOnly} disabled = {disabled}>
             <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled} readOnly={readOnly}>{children}</Label>

package/src/components/TouchableRipple/index.js

@@ -0,0 +1,38 @@
+import {Pressable} from "react-native";
+import React from "$react";
+import PropTypes from "prop-types";
+import { extendObj } from "$cutils";
+import theme from "$theme";
+
+/***@see : https://reactnative.dev/docs/pressable#rippleconfig */
+const TouchableRipple = React.forwardRef(({android_ripple,disabled,disabledRipple,readOnly,...rest},ref)=>{
+    return <Pressable
+        ref = {ref}
+        android_ripple={disabledRipple || android_ripple === false || disabled || readOnly  ? {} : extendObj({},{
+            color : theme.Colors.setAlpha(theme.colors.onSurface,0.12),
+            borderless : true,
+            radius : 0,
+            foreground : true,
+        },android_ripple)}
+        {...rest}
+    />
+});
+TouchableRipple.displayName = "TouchableRippleComponent";
+
+export default TouchableRipple;
+
+TouchableRipple.propTypes = {
+    ...Object.assign({},Pressable.propTypes),
+    disabledRipple : PropTypes.bool, //alias de android_ripple
+    disabled : PropTypes.bool,
+    readOnly : PropTypes.bool,
+    android_ripple : PropTypes.oneOf([
+        PropTypes.bool,
+        PropTypes.shape({
+            color : PropTypes.string, //Defines the color of the ripple effect.
+            borderless : PropTypes.bool, //Defines if ripple effect should not include border.
+            radius : PropTypes.number, //Defines the radius of the ripple effect.
+            foreground : PropTypes.bool, //Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+        })
+    ])
+}

package/src/components/TouchableRipple/index.web.js

@@ -0,0 +1,22 @@
+import {TouchableRipple as RNTouchableRipple} from "react-native-paper";
+import React from "$react";
+import PropTypes from "prop-types";
+
+/***@see : https://reactnative.dev/docs/pressable#rippleconfig */
+const TouchableRipple = React.forwardRef(({android_ripple,rippleColor,disabledRipple,disabled,readOnly,...rest},ref)=>{
+    return <RNTouchableRipple
+        ref = {ref}
+        rippleColor = {disabledRipple||disabled||readOnly ? 'transparent':rippleColor}
+        {...rest}
+    />
+});
+TouchableRipple.displayName = "TouchableRippleComponent";
+
+export default TouchableRipple;
+
+TouchableRipple.propTypes = {
+    ...Object.assign({},RNTouchableRipple.propTypes),
+    disabledRipple : PropTypes.bool,//si le ripple sera désactivé
+    disabled : PropTypes.bool,
+    readOnly : PropTypes.bool
+}

package/src/context/Provider.js

@@ -88,7 +88,6 @@ Object.map(Utils,(v,i)=>{
     realm : {}, //les options de configurations de la base de données realmdb
 */
 const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,auth:cAuth,components:cComponents,parseMangoQueries,getStructData,tablesData,structsData,...props})=>{
-    require('$session');///initializing session
     const {extendAppTheme} = appConfig;
     const { theme : pTheme } = useMaterial3Theme();
     navigation = defaultObj(navigation);

package/src/layouts/AppBar/index.js

@@ -69,7 +69,7 @@ export const getBackActionComponent = ({backAction,backActionProps,withDrawer})=
             ...backActionProps,
             ...props,
         }
-        if(backAction === true) return <Appbar.BackAction {...bProps}/>;
+        if(backAction === true) return <AppBar.BackAction {...bProps}/>;
         const isPermanent = typeof drawerRef?.current?.isPermanent =='function' && drawerRef?.current?.isPermanent(); 
         const isMinimized = typeof drawerRef?.current?.isMinimized =="function" && drawerRef?.current?.isMinimized();
         if(backAction === false || withDrawer === false) return null;

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -1,4 +1,4 @@
-import {defaultStr,defaultVal,isNonNullString,defaultNumber,defaultObj} from "$cutils";
+import {defaultStr,defaultVal,isNonNullString,defaultNumber,extendObj,defaultObj} from "$cutils";
 import React from "$react";
 import CountUp from "$ecomponents/CountUp";
 import Avatar from "$ecomponents/Avatar";
@@ -14,28 +14,24 @@ import cActions from "$cactions";
 import {View} from "react-native";
 import {Menu} from "$ecomponents/BottomSheet";
 import Dashboard from "$ecomponents/Datagrid/Dashboard";
-import fetch from "$capi/fetch";
-import Auth from "$cauth";
 import Icon from "$ecomponents/Icon";
 
-export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll,fetchDataProps,table,fetchCount,index,testID,title,icon,onPress:customOnPress,columns,fetchData,withDashboard,...props}){
+export default function DatabaseStatisticContainer ({dashboardProps,fields,onRefreshAll,fetchDataProps,table,fetchCount,index,testID,title,icon,onPress:customOnPress,columns,fetchData,withDashboard,...props}){
     dashboardProps = defaultObj(dashboardProps);
     const [count,setCount] = React.useState(0);
     const datagridRef = React.useRef(null);
     let {} = props;
     table = defaultObj(table);
-    const dbStatistics = defaultObj(table.databaseStatistics,table.databaseStatisticsProps);
-    const databaseStatisticsFields = defaultObj(table.databaseStatisticsFields);
+    const databaseStatisticsFields = defaultObj(fields,columns,table.databaseStatisticsFields);
     const hasDFields = table.databaseStatistics !== false && Object.size(databaseStatisticsFields,true);
     if(!withDashboard && hasDFields){
         withDashboard = true;
     }
-    const dFields = hasDFields ? databaseStatisticsFields : defaultObj(dbStatistics.fields,dbStatistics.columns);
     if(typeof fetchData !=='function'){
-        fetchData = typeof dbStatistics.fetchData =='function'? dbStatistics.fetchData : undefined;
+        fetchData = undefined;
     }
     withDashboard = withDashboard && typeof fetchData == 'function'? true : false;
-    columns = Object.size(columns,true)? columns : Object.size(dFields,true)? dFields : table.fields;
+    columns = Object.size(columns,true)? columns : Object.size(databaseStatisticsFields,true)? databaseStatisticsFields : table.fields;
     const tableName = defaultStr(table.tableName,table.table).toUpperCase();
     fetchCount = typeof table.fetchCount =='function'? table.fetchCount : typeof fetchCount =='function'? fetchCount : undefined;
     if((!fetchCount && !withDashboard) || !tableName) {
@@ -121,8 +117,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll
         }}
         sessionName = {tableName+"-database-statistics"}
         {...props}
-        {...dbStatistics}
-        style = {[theme.styles.pr1,props.style,dbStatistics.style]}
+        style = {[theme.styles.pr1,props.style]}
         columns = {columns}
         ref = {datagridRef}
         progressBar = {isLoading?<View/>:<View style={[theme.styles.w100,theme.styles.alignItemsCenter,theme.styles.justifyContentCenter]}>{progressBar}</View>}

package/src/layouts/DatabaseStatistics/index.js

@@ -32,14 +32,19 @@ export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,item
             if(isObj(t) && defaultStr(t.table,t.tableName)){
                table = t;
             }
-            if(table.databaseStatistic === false || table.databaseStatistics === false) return null;
+            const dbStatistics = typeof table.databaseStatistics ==="function"? table.databaseStatistics() : true;
+            if(dbStatistics === false || table.databaseStatistic === false || table.databaseStatistics === false) return null;
+            const dbStatisticsProps = extendObj({},table.databaseStatistics,table.databaseStatisticsProps);
+            let {containerProps,cellProps,...rDBProps} = dbStatisticsProps;
+            cellProps = Object.assign({},cellProps);
+            containerProps = Object.assign({},containerProps);
             const chartAllowedPerm =  defaultStr(table.chartAllowedPerm);
             const testID = "RN_DatabaseStatisticsCell_"+index;
             if(chartAllowedPerm){
                 if(!Auth.isAllowedFromStr(chartAllowedPerm)) return null;
             } else if((!Auth.isTableDataAllowed({table:tableName}))) return null;
-            content.push(<Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={6} {...contentProps} testID={testID} key = {index} >
-                <Surface testID = {testID+"_Surface"} elevation = {5} {...itemContainerProps} style={[theme.styles.w100,styles.itemContainer,itemContainerProps.style]}>
+            content.push(<Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={6} {...contentProps} testID={testID}  {...cellProps} style={[contentProps.style,cellProps.style]} key = {index} >
+                <Surface testID = {testID+"_Surface"} elevation = {5} {...itemContainerProps} {...containerProps} style={[theme.styles.w100,styles.itemContainer,itemContainerProps.style,containerProps.style]}>
                     <DatabaseStatistic
                         icon = {table.icon}
                         key = {index}
@@ -52,6 +57,7 @@ export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,item
                             return fetchCount({table,tableName})
                         }:undefined}
                         {...itemProps}
+                        {...rDBProps}
                     />
                 </Surface>
             </Cell>
@@ -79,7 +85,7 @@ DatabaseStatisticScreen.propTypes = {
     getTable : PropTypes.func,//la fonction permettant de récupérer la table à partir du nom
     tables : PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.object),
-        PropTypes.objectOf(PropTypes.object)
+        PropTypes.objectOf(PropTypes.object),
     ]).isRequired,
     /*** la fonction de filtre utilisée pour filtrer les table devant figurer sur le databaseStatistics */
     tableFilter : PropTypes.func,

package/src/layouts/Screen/TableData.js

@@ -385,7 +385,10 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 } : null;
             }
         } else {
-            formProps.style = [theme.styles.noPadding,formProps.style]
+            formProps.style = [!isMobOrTab && theme.styles.noPadding,formProps.style]
+        }
+        if(isMobOrTab){
+            formProps.style = [theme.styles.pb4,formProps.style];
         }
         rActionsArg.contentProps = Object.assign({},customContentProps);
         rActionsArg.containerProps = Object.assign({},customContainerProps);
@@ -699,17 +702,24 @@ export default class TableDataScreenComponent extends FormDataScreen{
     onSaveTableData(){}
     /*** permet de recherger le contenu du form avec la données passée en paramètre
         @param {object} currentData, la nouvelle donnée en cours de modification
-        @param {function} callback, la fonction de rappel à appeler une fois que la données a été mise à jour
+        @param {function|object} callback, la fonction de rappel à appeler une fois que la données a été mise à jour
+        @param {object|func} les données extra à utiliser pour la mise à jour du state, s'il s'agit d'un objet
         @return {this} le contexte
     */
-    reloadCurrentData(currentData,callback){
+    reloadCurrentData(currentData,callback,extraState){
+        if(isObj(callback)){
+            const c = callback;
+            callback  = typeof extraState ==='function'? extraState :undefined;
+            extraState = isObj(extraState)? extraState : c;
+        }
+        extraState = defaultObj(extraState);
         currentData = isObj(currentData)? currentData : {};
         if(this.hasManyData() && Array.isArray(this.state.datas)){
             const sData = [...this.state.datas];
             sData[this.state.currentIndex] = currentData;
-            return this.setState({data:currentData,datas:sData},callback);
+            return this.setState({data:currentData,datas:sData,...extraState},callback);
         } else {
-            return this.setState({data:currentData,datas:[],hasManyData:false},callback);
+            return this.setState({data:currentData,datas:[],hasManyData:false,...extraState},callback);
         }
     }
     setCurrentData(...args){

package/src/media/camera.js

@@ -1 +1,13 @@
-export default {};
+import React from "$react";
+const Camera = React.forwardRef((props,ref)=>{
+    return null;
+})
+export {Camera};
+
+export default Camera;
+
+Camera.displayName = "CameraComponent";
+
+export function Component (){
+    return null;
+}

package/src/media/camera.native.js

@@ -1,4 +1,137 @@
-import { Camera } from 'expo-camera';
+import { Camera,CameraType } from 'expo-camera';
 export {Camera};
+import { useState,useMemo,useEffect,useRef,usePrevious,forwardRef,mergeRefs } from '$react';
+import {HStack} from "$ecomponents/Stack";
+import Dialog from "$components/Dialog";
+import theme from "$theme";
+import Button from "$ecomponents/Button";
+import Label from "$ecomponents/Label";
+import View from "$ecomponents/View";
+import {getTakePhotoOptions} from "./utils";
+import PropTypes from "prop-types";
+import { isBase64 } from '$cutils';
 
-export default Camera;
+export const Component = forwardRef(({onGrantAccess,onDenyAccess,takePictureOptions,onSuccess,onCameraReady:cOnCameraReader,onCancel,onDismiss,autoTakePicture,type:defType,dialgProps,dialogRef,...cameraProps},ref)=> {
+    const [visible,setVisible] = useState(true);
+    const innerRef = useRef(null);
+    const cancelRef = useRef(null);
+    const [cameraReady,setCameraReady] = useState(false);
+    const takePicture = ()=>{
+        if(typeof innerRef?.current?.takePictureAsync =='function'){
+            const camOptions = getTakePhotoOptions(takePictureOptions);
+            innerRef.current.takePictureAsync(camOptions).then((result)=>{
+                result.dataURL = result.dataUrl = isBase64(result.base64) ? 'data:image/jpeg;base64,'+result.base64 : undefined;
+                if(typeof onSuccess =='function'){
+                    onSuccess(result);
+                }
+                return result;
+            });
+        }
+    }
+    const onCameraReady = ()=>{
+        if(!cameraReady){
+            setCameraReady(true);
+        }
+        if(typeof cOnCameraReader =="function"){
+            cOnCameraReader();
+        }
+    }
+    takePictureOptions = Object.assign({},takePictureOptions);
+    
+    const prevVisible = usePrevious(visible);
+    const cancel = ()=>{
+      cancelRef.current = true;
+      setVisible(false);
+    }
+    useEffect(()=>{
+      if(visible === prevVisible) return;
+      if(!visible && typeof onDismiss =="function"){
+          onDismiss();
+      }
+      if(prevVisible && !visible && cancelRef.current && typeof onCancel =='function'){
+          onCancel();
+      }
+      cancelRef.current = true;
+    },[visible])
+    const commonType = useMemo(()=>{
+      if(typeof defType !== "number" || !(defType in CameraType)){
+          return CameraType.back;
+      }
+      return defType;
+    },[defType]);
+    const [type, setType] = useState(commonType);
+    useEffect(()=>{
+      if(commonType !== type){
+          setType(commonType);
+      }
+    },[commonType])
+    const [permission, requestPermission] = Camera.useCameraPermissions();
+    const hasPermission = permission && permission?.granted || false;
+    useEffect(()=>{
+      if(!hasPermission){
+          if(typeof onDenyAccess =="function"){
+              onDenyAccess()
+          }
+          return;
+      } 
+      if(typeof onGrantAccess =='function'){
+          onGrantAccess();
+      }
+    },[hasPermission]);
+    const isBack = type === CameraType.back;
+    dialgProps = Object.assign({},dialgProps);
+    function toggleCameraType() {
+      setType(current => (current === CameraType.back ? CameraType.front : CameraType.back));
+    }
+    const togglePhotoBtn = {
+      text : "Pivoter la camera",
+      icon : "camera-flip",
+      tooltip : `Cliquez pour basculer à la camera ${isBack ? "frontable":"arrière"}`,
+          onPress : toggleCameraType
+    };
+    const takePictureBtn = cameraReady ?  {
+        text : "Photographier",
+        icon : "camera",
+        tooltip : `Cliquez pour prendre une photo`,
+        onPress : takePicture,
+    } : null;
+    return <Dialog ref={dialogRef} {...dialgProps} fullPage visible={visible} actions={[takePictureBtn,togglePhotoBtn]} title={"Enregistrer une photo"} onBackActionPress={(...arg)=>{
+      if(typeof dialgProps.onBackActionPress =="function" && dialgProps.onBackActionPress(...arg) === false) return;
+      cancel();
+    }}>
+            {hasPermission ? <View style={[theme.styles.flex1,theme.styles.w100]}>
+                <Camera {...cameraProps} 
+                    ref={mergeRefs(ref,innerRef)} style={[theme.styles.flex1,cameraProps.style]} type={type}
+                    onCameraReady = {onCameraReady}
+                >
+                </Camera>
+                <HStack>
+                      {takePictureBtn? <Button
+                        {...takePicture}
+                        success
+                      />:null}
+                      <Button
+                          {...togglePhotoBtn}
+                          style = {[theme.styles.w100]}
+                      />
+                      <Button
+                          error
+                          children = {"Annuler"}
+                          icon = "camera-off"
+                          title = {"Cliquez pour annuler l'opération"}
+                          onPress = {cancel}
+                      />
+                  </HStack>
+            </View> : 
+            <View style={[theme.styles.flex1,theme.styles.justifyContentCenter,theme.styles.w100,theme.styles.alignItemsCenter]}>
+                <Label>{`Permission non autorisée. Vous devez autoriser l'accès à la camera`}</Label>    
+            </View>}
+    </Dialog>
+  });
+  
+  Component.displayName = "CameraPhotoComponent";
+  
+  Component.propTypes = {
+    takePictureOptions : PropTypes.object,//les options pour la prise de la photo
+    autoTakePicture : PropTypes.bool, //si la camera devra prendre la photo lorsque celle si sera visible
+  }