@fto-consult/expo-ui 4.0.3 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "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.17.2",
+    "@fto-consult/common": "^2.18.0",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/AutoSizer/Vertical.js

@@ -12,7 +12,7 @@ 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,getRenderingStyle,withActivityIndicator,testID,withPadding,maxHeight,minHeight,style,children:cChildren,...rest},ref) => {
+const AutoSizerVerticalComponent = React.forwardRef(({onLayout,isScrollView,screenIndent,getRenderingStyle,withActivityIndicator,testID,withPadding,paddingBottom,maxHeight,minHeight,style,children:cChildren,...rest},ref) => {
   testID = defaultStr(testID,'RN_AutoSizerVerticalComponent');
   const hasUpdateLayoutRef = React.useRef(false);
   const layoutRef = React.useRef(null);
@@ -56,13 +56,19 @@ const AutoSizerVerticalComponent = React.forwardRef(({onLayout,isScrollView,getR
   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);
+  screenIndent = typeof screenIndent =='number' && screenIndent > 50 ? screenIndent : 100;
+  const y = Math.abs(defaultNumber(contentLayout.y));
+  const heightY = y < height - screenIndent ? y : height - screenIndent;
+  cStyle.minHeight = Math.min(Math.max(layout.height-heightY,minHeight && minHeight ||250));
+  const cMaxHeight = layout.height-heightY;
   if(cMaxHeight>=200){
     cStyle.maxHeight = cMaxHeight;
   }
-  if(withPadding !== false){
-      cStyle.paddingBottom = 50;
+  if(typeof paddingBottom =='number'){
+      cStyle.paddingBottom = paddingBottom; //: 50;
+  }
+  if(cStyle.minHeight && cStyle.maxHeight && cStyle.minHeight > cStyle.maxHeight){
+     cStyle.minHeight = cStyle.maxHeight;
   }
   const restStyle = {};
   const canUpdate = hasUpdateLayout || hasUpdateLayout || withActivityIndicator === false;
@@ -97,4 +103,5 @@ AutoSizerVerticalComponent.propTypes = {
    withActivityIndicator : PropTypes.bool,//si l'on utilisera l'activity indicator pour le chargement du contentu
    maxHeight : PropTypes.number,
    minHeight : PropTypes.number,
+   paddingBottom : PropTypes.number,
 }

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

@@ -50,7 +50,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,foreignKeyTable
         }
     }
     const isMounted = React.useIsMounted();
-    const showAdd = isFilter || !foreignKeyTable ? false : React.useRef(Auth.isTableDataAllowed({foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
+    const showAdd = isFilter || !foreignKeyTable ? false : React.useRef(Auth.isTableDataAllowed({table:foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
     const [state,setState] = React.useState({
         items : [],isLoading : true,
     });

package/src/components/Table/List/List.js

@@ -80,6 +80,7 @@ const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderIte
         if(isDOMElement(target) && onContentSizeChange){
             const {nativeEvent:{contentSize}} = normalizeEvent({target});
             setTimeout(()=>{
+                target.style.paddingBottom = "50px";
                 if(contentSize.width !== listSize.width || contentSize.height != listSize.height){
                     sizeRef.current = contentSize;
                     onContentSizeChange(contentSize.width,contentSize.height);
@@ -95,7 +96,7 @@ const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderIte
     React.useOnRender((a,b,c)=>{
         if(onRender && onRender(a,b,c));
     },Math.max(Array.isArray(items) && items.length/10 || 0,500))
-    return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,{minWidth:'100%',height:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
+    return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,autoSizedStyle,{minWidth:'100%',height:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
         <Virtuoso
             {...r2}
             style = {listStyle}

package/src/components/Table/List/index.js

@@ -14,9 +14,8 @@ const normalize = (size)=>{
 const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},ref)=>{
     testID = defaultStr(testID,"RN_AutoSizeVerticalListComponent")
     autoSizerProps = defaultObj(autoSizerProps);
-    const sizeRef = React.useRef({});
-    return <AutoSizeVertical withPadding={false} getRenderingStyle={(size)=>{sizeRef.current = normalize(sizeRef.current);}} testID={testID+"_AutoSizerVertical"} {...autoSizerProps} >
-        <List {...props} autoSizedStyle = {sizeRef.current} style={[props.style,sizeRef.current]} ref={ref}/>
+    return <AutoSizeVertical withPadding={false} testID={testID+"_AutoSizerVertical"} {...autoSizerProps} >
+        <List {...props} style={[props.style]} ref={ref}/>
     </AutoSizeVertical>
 })
 

package/src/layouts/Screen/TableData.js

@@ -214,7 +214,6 @@ export default class TableDataScreenComponent extends FormDataScreen{
             onKeyEvent,
             canMakePhoneCall : customCanMakePhoneCall,
             makePhoneCallProps : customMakePhoneCallProps,
-            beforeSave,
             closeOnSave,closeAfterSave,
             table : cTable,
             onSave,
@@ -349,6 +348,13 @@ export default class TableDataScreenComponent extends FormDataScreen{
         formProps.onKeyEvent = this.onKeyEvent.bind(this);
         rActionsArg.elevation = typeof rActionsArg.contentProps.elevation ==="number"? contentProps.elevation : typeof elevation == 'number' ? elevation : 5;
         rActionsArg.formProps = formProps;
+        if(typeof this.props.getComponentProps =='function'){
+            const p = this.props.getComponentProps(rActionsArg);
+            if(isObj(p)){
+                this.currentRenderingProps = p;
+                return p;
+            }
+        }
         return rActionsArg;
     }
     renderTabs(args){

package/src/navigation/utils.js

@@ -17,7 +17,8 @@ export const navigateToTableData = function(tableName,params,actionType){
     if(!tableName) return;
     const {perm} = params;
     let isAllowed = true;
-    const isTableData = actionType =='table_data';
+    actionType = defaultStr(actionType,"tabledata").replaceAll(" ","").toLowerCase();
+    const isTableData = actionType =='tabledata';
     if(isNonNullString(perm)){
         isAllowed = Auth.isAllowedFromStr(perm)
     } else if(actionType =='struct_data') {

package/src/screens/Auth/PermLine.js

@@ -0,0 +1,195 @@
+import PermText from "./PermText";
+import React from "$react";
+import Expandable from "$ecomponents/Expandable";
+import {defaultObj,defaultStr,arrayValueExists,isNonNullString,defaultVal} from "$cutils";
+import PropTypes from "prop-types";
+import {hasResource} from "./utils";
+import { StyleSheet } from "react-native";
+import View from "$ecomponents/View";
+import {Cell} from "$ecomponents/Grid";
+
+const PermLine = ({text,cellProps,isUserMasterAdmin,withGrid,defaultActions,resource,perms:cPerms,disabled,allPerms,table,index,onChange,keyname,actions,testID,...rest})=>{
+    const [state,setState] = React.useState({
+        data : defaultObj(rest.data),
+        expanded : defaultBool(rest.expanded,false)
+    });
+    allPerms = defaultObj(allPerms);
+    cellProps = defaultObj(cellProps);
+    testID = defaultStr(testID,"RN_AuthPermLineComponent_"+index);
+    table = defaultStr(table).toLowerCase();
+    resource = resource.toLowerCase();
+    if(!table) {
+        console.error("table non spécifiée pour la perm line ",table,rest);
+        return null;
+    }
+    cPerms = defaultObj(cPerms);;
+    const perms = React.useMemo(()=>{
+        const perms = defaultObj(cPerms);
+        if(perms.defaultActions !== false || (isObj(perms[resource]) && Object.size(perms[resource],true)>0)){
+            const _acts = perms.defaultActions !== false ? {...defaultActions} : {};
+            Object.map(_acts,(a,aa)=>{
+                const aa2 = a && a.alias && typeof a.alias =='string' && a.alias;
+                if(perms[aa] === false || perms[aa.toLowerCase()+'Action'] === false || (aa2 && (perms[aa2] === false || perms[aa2.toLowerCase()+'Action'] === false))){
+                    delete _acts[aa];
+                }
+            });
+            if(isObj(perms[resource])){
+                perms[resource] = {
+                   ...perms[resource],
+                    actions : {
+                        ..._acts,
+                        ...defaultObj(perms[resource].actions)
+                    }
+                }
+            } else {
+                perms[resource] = {
+                    text,
+                    actions : _acts
+                }
+            }
+        } 
+        return perms;
+    },[cPerms.defaultActions,cPerms[resource]])
+    let allChecked = true;
+    isUserMasterAdmin = !!isUserMasterAdmin;
+    let checked = isUserMasterAdmin;
+    const onToggleSingle = ({resource,checked,action})=>{
+        if(isUserMasterAdmin || !isNonNullString(action) || !isNonNullString(resource) || !isNonNullString(allPerms[resource])){
+            return;
+        }
+        const data = {...state.data};
+        const allAction = defaultStr(allPerms[resource]);
+        if(allAction == "all"){
+            if(checked){
+                data[resource] = allAction;
+            } else delete data[resource];
+        } else  {
+            data[resource] = defaultStr(data[resource]).toLowerCase();
+            let spl = data[resource].split("2");
+            if(checked){
+                if(action !== 'read' && arrayValueExists(allAction.toLowerCase().split("2"),'read') && !arrayValueExists(spl,'read')){
+                    spl.push('read');
+                }
+                if(!arrayValueExists(spl,action,true)){
+                    spl.push(action);
+                }
+            } else {
+                let s1 = [];
+                for(let i in spl){
+                    if(spl[i].toLowerCase() !== action.toLowerCase()){
+                        s1.push(spl[i]);
+                    }
+                }
+                spl = s1;
+            }
+            if(spl.length>0){
+                data[resource] = spl.join("2").ltrim("2").rtrim("2");
+            } else delete data[resource];
+        }
+        setState({...state,data});
+    }
+    const toggleAll = (arg)=>{
+        const {checked} = arg;
+        const data = {...state.data};
+        for(let i in allPerms){
+            if(hasResource(i,resource)){
+                if(!checked){
+                    delete data[i];
+                } else {
+                    data[i] = allPerms[i];
+                }
+            }
+        }
+        setState({...state,data});
+    }
+    React.useEffect(()=>{
+        if(onChange){
+            onChange({data:state.data,resource,table});
+        }
+    },[state.data])
+    const content = [];
+    Object.map(perms,(perm,i)=>{
+        const pText = defaultStr(perm.text,perm.label);
+        if(!isObj(perm.actions)){
+            if(!isNonNullString(pText)) return null;
+            allPerms[i] = "all";
+            checked = isUserMasterAdmin? true : isNonNullString(state.data[i]);
+            if(!checked){
+                allChecked = false;
+            }
+            content.push(<PermText isUserMasterAdmin={isUserMasterAdmin} key = {i} table={table} tooltip={defaultStr(perm.tooltip,perm.title,perm.desc)} onToggle={onToggleSingle} text={pText} checked ={checked} resource={i} action ={'all'}/>);
+            return;
+        } 
+        allPerms[i] = "";
+        const splitP = defaultStr(state.data[i]).toLowerCase().split("2");
+        const pContent = []
+        const hasS = isNonNullString(text) && isNonNullString(pText) && pText.toLowerCase() != text.toLowerCase()
+        Object.map(perm.actions,(p,j)=>{
+            if(!isObj(p) || !isNonNullString(p.text)) return null;
+            allPerms[i] = (isNonNullString(allPerms[i])?(allPerms[i]+"2"):"")+j;
+            checked = isUserMasterAdmin? true : arrayValueExists(splitP,j,true);
+            if(!checked){
+                allChecked = false;
+            }
+            pContent.push(<PermText labelStyle ={hasS? styles.permChildren : undefined} isUserMasterAdmin={isUserMasterAdmin}  key={j} table={table} onToggle={onToggleSingle} tooltip={defaultStr(p.tooltip,p.title,p.desc)} text = {p.text} checked ={checked} actions={perm.actions} resource={i} action ={j}/>)
+        });
+        if(pContent.length){
+            content.push(<View key={i} testID={testID+"_Content_"+i}>
+                {hasS ? <Label testID={testID+'_Label'}>{pText}</Label> : null}
+                {pContent}
+            </View>)
+        }
+
+    });
+    return <Cell testID={testID+"_Cell"} tabletSize={6} desktopSize={4} phoneSize={12} {...cellProps}>
+        <Expandable  
+            expandedIcon ={'chevron-right'} 
+            unexpandedIcon = {'chevron-down'}
+            elevation = {5}
+            {...rest} 
+            testID = {testID}
+            expandIconPosition = {"left"}
+            onPress={(e)=>{
+                setState({...state,expanded:!state.expanded})
+            }}
+            contentProps = {{style:styles.expandableContent}}
+            expanded={state.expanded} 
+            title = {
+                <PermText 
+                    table={table} 
+                    labelStyle = {false}
+                    checked = {allChecked} 
+                    disabled = {disabled}
+                    resource={resource} action={allPerms[resource]} 
+                    text={text} 
+                    testID = {testID+"_"+table}
+                    isUserMasterAdmin = {isUserMasterAdmin}
+                    onToggle = {toggleAll}
+                />
+            }
+        >
+            {content}
+        </Expandable>
+    </Cell>
+}
+
+
+PermLine.propTypes = {
+    text : PropTypes.string,
+    resource : PropTypes.string.isRequired,
+    cellProps : PropTypes.object,//les props du composant Cell, wrappeur au composant PermLine
+    defaultActions : PropTypes.object.isRequired,//les actions par défault
+}
+
+const styles = StyleSheet.create({
+    expandableContent : {
+        paddingLeft : 30,
+    },
+    permChildren : {
+        paddingLeft : 20,
+    },
+});
+
+PermLine.displayName = "AuthPermLineComponent";
+
+export default PermLine;

package/src/screens/Auth/PermLines.js

@@ -1,238 +1,35 @@
-import tables  from "$database/data/tables";
-import Checkbox from "$components/Checkbox";
 import React from "$react";
 import { StyleSheet } from "react-native";
-import {defaultVal,defaultObj,defaultBool,arrayValueExists} from "$utils";
+import {defaultObj,extendObj} from "$utils";
 import Auth from "$cauth";
-import Label from "$ecomponents/Label";
-import View from "$ecomponents/View";
 import Expandable from "$ecomponents/Expandable";
 import PropTypes from "prop-types";
-import Grid,{Cell} from "$components/Grid";
 import theme from "$theme";
-import appConfig from "$capp/config";
+import {defaultActions as mDefaultAction,hasResource} from "./utils";
+import PermLine from "./PermLine";
+import Grid from "$ecomponents/Grid";
 
-
-let allPerms = {};
-const defaultActions = {
-    create : {
-        text : 'Créer'
-    },
-    update : {
-        text : 'Modifier'
-    },
-    delete : {
-        text : 'Supprimer'
-    },
-    read : {
-        text : 'Consulter',
-    },
-}
-const expandIconProps = {
-    //size : 20,
-}
-export const PermText = (props)=>{
-    const {isMasterAdmin} = props;
-    const {user} = props;
-    const isAllowed = isMasterAdmin ? true : React.useRef(Auth.isTableDataAllowed({table:'users',user,action:'assignPerms'})).current;
-    const {text,label,checked,labelStyle,table,type,onToggle,actions,action,resource,tooltip} = props;
-    return <Checkbox
-        title = {tooltip}
-        disabled = {!isAllowed || isMasterAdmin}
-        defaultValue = {checked || isMasterAdmin?1 : 0}
-        style  = {[theme.styles.noPadding,theme.styles.noMarging,labelStyle !== false && styles.checkbox]}
-        labelStyle = {[labelStyle !== false && styles.label,labelStyle && labelStyle]}
-        label = {defaultVal(label,text)}
-        onPress = {(args)=>{
-            React.stopEventPropagation(args?.event);
-            if(onToggle){
-                onToggle({...args,checked:!!!checked,resource,actions,action,table,type})
-            }
-            return false;
-        }}
-    />
-}
-
-
-
-export const PermLine = (props)=>{
-    const [state,setState] = React.useState({
-        data : defaultObj(props.data),
-        expanded : defaultBool(props.expanded,false)
-    });
-    let {text,user,isMasterAdmin,perms,table,index,onChange,type,keyname,actions,testID,...rest} = props; 
-    testID = defaultStr(testID,"RN_AuthPermLineComponent_"+index);
-    table = defaultStr(table).toLowerCase();
-    type = defaultStr(type).toLowerCase();
-    perms =  Object.assign({},perms);
-    let resource = undefined;
-    if(arrayValueExists(['table','structdata','struct_data'],type)){
-        if(type === 'struct_data'){
-            type = 'structdata';
-        }
-        resource = type+"/"+table;
-        if(perms.defaultActions !== false || (isObj(perms[resource]) && Object.size(perms[resource],true)>0)){
-            let _acts = {};
-            if(perms.defaultActions !== false) {
-                _acts = {...defaultActions};
-            } 
-            if(perms[resource]){
-                perms[resource] = {
-                    text,
-                    actions : {..._acts,...defaultObj(perms[resource])}
-                }
-            } else {
-                perms[resource] = {
-                    text,
-                    actions : {..._acts,...defaultObj(perms[resource])}
-                }
-            }
-        } 
-    }
-    let allChecked = true;
-    let checked = isMasterAdmin;
-    const onToggleSingle = ({resource,checked,action})=>{
-        if(isMasterAdmin || !isNonNullString(action) || !isNonNullString(resource) || !isNonNullString(allPerms[resource])){
-            return;
-        }
-        const data = {...state.data};
-        const allAction = defaultStr(allPerms[resource]);
-        if(allAction == "all"){
-            if(checked){
-                data[resource] = allAction;
-            } else delete data[resource];
-        } else  {
-            data[resource] = defaultStr(data[resource]).toLowerCase();
-            let spl = data[resource].split("2");
-            if(checked){
-                if(action !== 'read' && arrayValueExists(allAction.toLowerCase().split("2"),'read') && !arrayValueExists(spl,'read')){
-                    spl.push('read');
-                }
-                if(!arrayValueExists(spl,action,true)){
-                    spl.push(action);
-                }
-            } else {
-                let s1 = [];
-                for(let i in spl){
-                    if(spl[i].toLowerCase() !== action.toLowerCase()){
-                        s1.push(spl[i]);
-                    }
-                }
-                spl = s1;
-            }
-            if(spl.length>0){
-                data[resource] = spl.join("2").ltrim("2").rtrim("2");
-            } else delete data[resource];
-        }
-        setState({...state,data});
-        if(onChange){
-            onChange({data,resource,table,type});
-        }
-    }
-    const toggleAll = (arg)=>{
-        if(!isNonNullString(type) || !isNonNullString(table) || !isNonNullString(resource)){
-            return;
-        }
-        const {checked} = arg;
-        const data = {...state.data};
-        for(let i in allPerms){
-            if(i.toLowerCase().startsWith(resource)){
-                if(!checked){
-                    delete data[i];
-                } else {
-                    data[i] = allPerms[i];
-                }
-            }
-        }
-        setState({...state,data});
-        if(onChange){
-            onChange({data,resource,table,type});
-        }
-    }
-    const content = [];
-    Object.map(perms,(perm,i)=>{
-        const pText = defaultStr(perm.text,perm.label);
-        if(!isObj(perm.actions)){
-            if(!isNonNullString(pText)) return null;
-            allPerms[i] = "all";
-            checked = isMasterAdmin? true : isNonNullString(state.data[i]);
-            if(!checked){
-                allChecked = false;
-            }
-            content.push(<PermText user={user} isMasterAdmin={isMasterAdmin} key = {i} table={table} tooltip={defaultStr(perm.tooltip,perm.title,perm.desc)} onToggle={onToggleSingle} text={pText} checked ={checked} resource={i} action ={'all'}/>);
-            return;
-        } 
-        allPerms[i] = "";
-        const splitP = defaultStr(state.data[i]).toLowerCase().split("2");
-        const pContent = []
-        Object.map(perm.actions,(p,j)=>{
-            if(!isObj(p) || !isNonNullString(p.text)) return null;
-            allPerms[i] = (isNonNullString(allPerms[i])?(allPerms[i]+"2"):"")+j;
-            checked = isMasterAdmin? true : arrayValueExists(splitP,j,true);
-            if(!checked){
-                allChecked = false;
-            }
-            pContent.push(<PermText  user={user}  labelStyle ={styles.permChildren} isMasterAdmin={isMasterAdmin}  key={j} table={table} onToggle={onToggleSingle} tooltip={defaultStr(p.tooltip,p.title,p.desc)} text = {p.text} checked ={checked} actions={perm.actions} resource={i} action ={j}/>)
-        });
-        if(pContent.length){
-            const hasS = isNonNullString(text) && isNonNullString(pText) && pText.toLowerCase() != text.toLowerCase()
-            content.push(<View key={i} testID={testID+"_Content_"+i}>
-                {hasS ? <Label testID={testID+'_Label'}>{pText}</Label> : null}
-                {pContent}
-            </View>)
-        }
-
-    });
-    return <Expandable  
-        expandIconProps = {expandIconProps}
-        expandedIcon ={'chevron-right'} 
-        unexpandedIcon = {'chevron-down'}
-         {...defaultObj(rest)} 
-        testID = {testID}
-        expandIconPosition = {"left"}
-        onPress={(e)=>{
-            setState({...state,expanded:!state.expanded})
-        }}
-        contentProps = {{style:styles.expandableContent}}
-        expanded={state.expanded} 
-        title = {
-            <PermText 
-                user={user} 
-                table={table} 
-                labelStyle = {false}
-                checked = {allChecked} 
-                type={type} resource={resource} action={allPerms[resource]} 
-                text={text} 
-                testID = {testID+"_"+table}
-                isMasterAdmin = {isMasterAdmin}
-                onToggle = {toggleAll}
-            />
-        }
-    >
-            {content}
-    </Expandable>
-}
-
-
-PermLine.propTypes = {
-    text : PropTypes.string.isRequired,
-    type : PropTypes.string.isRequired,
-}
-
-const PermLines = React.forwardRef((props,ref)=>{
-    const isMasterAdmin = defaultBool(props.isMasterAdmin,false);
-    const {user} = props;
-    const dataRef = React.useRef(defaultObj(props.perms,defaultObj(props.data).perms));
-    let {testID} = props;
+const PermLines = React.forwardRef(({user,gridProps,defaultActions:cDefaultActions,disabled,isUserMasterAdmin:cIsMasterAdmin,permLineProps,cellProps,containerProps,style,tablePermPrefix,tables,title,testID,perms,onChange:cOnChange,...props},ref)=>{
+    const isUserMasterAdmin = !!cIsMasterAdmin;
+    user = defaultObj(user,Auth.getLoggedUser());
+    gridProps = defaultObj(gridProps);
+    containerProps = defaultObj(containerProps);
+    containerProps.style = [theme.styles.w100,containerProps.style]
+    cellProps = defaultObj(cellProps);
+    permLineProps = defaultObj(permLineProps);
+    const allPerms = React.useRef({}).current;
+    const dataRef = React.useRef(defaultObj(perms));
+    const defaultActions = React.useRef(extendObj(true,{},mDefaultAction,defaultActions)).current;
     const data = dataRef.current;
-    const  onChange = (arg)=>{
-        if(isMasterAdmin) return;
+    disabled = !!disabled || isUserMasterAdmin;
+    tablePermPrefix = defaultStr(tablePermPrefix,"table/").toLowerCase();
+    const  onChange = disabled ? undefined : (arg)=>{
         let {data,resource} = arg;
         if(!isNonNullString(resource)) return;
         const sData = dataRef.current;
         data = defaultObj(data);
         for(let i in allPerms){
-            if(i.toLowerCase().startsWith(resource)){
+            if(hasResource(i,resource)){
                 if(isUndefined(data[i])){
                     delete sData[i];
                 } else {
@@ -241,158 +38,108 @@ const PermLines = React.forwardRef((props,ref)=>{
             }
         }
         dataRef.current = sData;
-        if(props.onChange){
-            props.onChange({...arg,data:sData});
+        if(cOnChange){
+            cOnChange({...arg,data:sData});
         }
     }
-    
     testID = defaultStr(testID,"RN_PermsLines");
-    const eProps = {style:[theme.styles.w100],containerProps:{style:[theme.styles.w100]}};
     const context = React.useRef({}).current;
     context.getData = x=> data;
     React.setRef(ref,context);
     React.useEffect(()=>{
         return ()=>{
-            allPerms = {};
             React.setRef(ref,null);
         }
     },[]);
     
-    return <Grid testID={testID}>
-        <Cell tabletSize={10} desktopSize={6} phoneSize={12}>
-            <Expandable expandIconProps = {expandIconProps} titleProps = {{style:styles.expandable}} title={"Table des données"} {...eProps}>
-                <React.Fragment>
-                {
-                    Object.mapToArray(tables,(table,tableName)=>{
-                    if(!isObj(table) || !isObj(table.perms)) return null;
-                    tableName = tableName.toLowerCase().trim();
-                    let text = defaultStr(table.text,table.label)
-                    let key = ("table/"+tableName);
-                    const perms = {};
-                    Object.map(table.perms,(perm,i)=>{
-                        const iLower = i.toLowerCase();
-                        if(iLower == 'defaultactions' || iLower =='defaultaction'){
-                            perms.defaultActions = perm;
-                        }
-                        if(!isObj(perm)) return ;
-                        if(perm.defaultActions){
-                            perm.actions = {
-                                ...defaultActions,
-                                ...defaultObj(perm.actions)
-                            }
-                        }
-                        i = i.toLowerCase();
-                        let k = key.toLowerCase();
-                        i = (k+"/"+i.ltrim(k)).rtrim("/").replaceAll("//","/");
-                        perms[i] = perm;
-                    });
-                    return <PermLine 
-                        isMasterAdmin = {isMasterAdmin}
-                        table = {tableName}
-                        type = {"table"}
-                        perms  = {perms}
-                        data = {data}
-                        onChange = {onChange}
-                        text = {text}
-                        resource = {key}
-                        key = {key}
-                        index = {key}
-                        user = {user}
-                    />
-                })
-            }
-            </React.Fragment>
-            <React.Fragment>
-                {
-                    Object.mapToArray(PERMS,(table,tableName)=>{
-                        if(!isObj(table) || !isObj(table.perms)) return null;
-                        tableName = tableName.toLowerCase().trim();
-                        let text = defaultStr(table.text,table.label)
-                        let key = ("table/"+tableName);
-                        let perms = {};
-                        perms[key] = {actions:{},text}
-                        Object.map(table.perms,(perm,i)=>{
-                            if(!isObj(perm)) return ;
-                            if(perms.defaultActions){
-                                perms[key].actions = {
-                                    ...defaultActions,
-                                    ...perms[key].actions
-                                }
-                            } else {
-                                perms[key].actions[i] = perm;
-                            }
-                        })
-                        return <PermLine 
-                            isMasterAdmin = {isMasterAdmin}
-                            table = {tableName}
-                            type = {"extra"}
-                            perms  = {perms}
-                            data = {data}
-                            onChange = {onChange}
-                            text = {text}
-                            resource = {key}
-                            key = {key}
-                            index = {key}
-                            user = {user}
-                        />
-                    })
+    const content = React.useMemo(()=>{
+        const content = [];
+        Object.map(tables,(table,tableName)=>{
+            if(!isObj(table) || !isObj(table.perms)) return null;
+            tableName = defaultStr(table.tableName,table.table,tableName).toLowerCase().trim();
+            const text = defaultStr(table.text,table.label)
+            const resource = (tablePermPrefix+tableName.ltrim(tablePermPrefix)).toLowerCase();
+            const perms = {};
+            Object.map(table.perms,(perm,i)=>{
+                if(perm ===false) {
+                    perms[i] = false;
+                    return;
+                }
+                if(!isObj(perm)) return;
+                const iLower = i.toLowerCase();
+                if(iLower == 'defaultactions' || iLower =='defaultaction'){
+                    perms.defaultActions = perm;
                 }
-            </React.Fragment>
-            </Expandable>
-        </Cell>
-        <Cell tabletSize={8} desktopSize={6} phoneSize={12}  >
-            <Expandable expandIconProps = {expandIconProps} titleProps = {{style:styles.expandable}} title="Données de structure" {...eProps}>
-                {
-                    Object.mapToArray(structData,(table,tableName)=>{
-                        if(!isObj(table)) return null;
-                        tableName = tableName.toLowerCase().trim();
-                        let text = defaultStr(table.text,table.label)
-                        let key = "structdata/"+tableName
-                        let perms = {};
-                        Object.map(table.perms,(perm,i)=>{
-                            /**** l'on peut décider d'ajouter les actions par défaut à une permission
-                             *  dans ce cas, il suffit dans la table des permissions, de préciser la valeur défault action
-                             */
-                            if(arrayValueExists(['defaultactions','defaultaction'],i.toLowerCase())){
-                                perms.defaultActions = perm;
-                            }
-                            if(!isObj(perm)) return ;
-                            if(perm.defaultActions){
-                                perm.actions = {
-                                    ...defaultActions,
-                                    ...defaultObj(perm.actions)
-                                }
-                            }
-                            i = i.toLowerCase();
-                            let k = key.toLowerCase();
-                            i = (k+"/"+i.ltrim(k)).rtrim("/").replaceAll("//","/");
-                            perms[i] = perm;
-                        })
-                        return <PermLine 
-                            isMasterAdmin = {isMasterAdmin}       
-                            table = {tableName}
-                            type = {"structdata"}
-                            perms  = {perms}
-                            data = {data}
-                            onChange = {onChange}
-                            text = {text}
-                            resource = {key}
-                            key = {key}
-                            index = {key}
-                            user = {user}
-                        />
-                    })
+                if(perm.defaultActions){
+                    perm.actions = {
+                        ...Object.clone(defaultActions),
+                        ...defaultObj(perm.actions)
+                    }
                 }
-            </Expandable>
-        </Cell>
-    </Grid>
+                i = i.toLowerCase();
+                i = (resource+"/"+i.ltrim(resource)).ltrim("/").replaceAll("//","/").rtrim("/").ltrim("/");
+                perms[i] = perm;
+            });
+            content.push(<PermLine 
+                cellProps={cellProps}
+                {...permLineProps}
+                allPerms = {allPerms}
+                isUserMasterAdmin = {isUserMasterAdmin}
+                disabled = {disabled}
+                table = {tableName}
+                tablePermPrefix = {tablePermPrefix}
+                perms  = {perms}
+                data = {data}
+                defaultActions = {defaultActions}
+                onChange = {onChange}
+                text = {text}
+                resource = {resource}
+                key = {resource}
+                index = {resource}
+                user = {user}
+            />);
+        })
+        return content;
+    },[tables,allPerms,isUserMasterAdmin,disabled,tablePermPrefix])
+    return <Expandable {...props} testID={testID} style={[theme.styles.w100,style]} containerProps={containerProps} titleProps = {{style:[styles.expandable,theme.styles.w100]}} title={title}>
+        <Grid testID={testID+"_Grid"} {...gridProps}>
+            {content }
+        </Grid>
+    </Expandable>
 });
 
-PermLines.displayName = "PermsLines";
+PermLines.displayName = "AuthPermsLinesComponent";
+const PermTextType = PropTypes.shape({
+    text : PropTypes.string,//le texte de la permission
+    label : PropTypes.string,
+    title : PropTypes.string, //le tooltip associé à la permission
+    tooltip : PropTypes.string, //alias à title,
+    actions : PropTypes.objectOf(PermTextType),//les actions supportées par la permission
+    defaultAction : PropTypes.bool,//si les actions par défaut seront associés à la permission en cours
+});
 
 PermLines.propTypes = {
     data : PropTypes.object,
-    perms : PropTypes.object
+    gridProps : PropTypes.object,//les props du composant Grid, wrapper au contentu expandable
+    isUserMasterAdmin : PropTypes.bool,//si l'utilisateur pour lequel on modifie la permission est un master admin
+    ///les tables associées aux permissions
+    tables : PropTypes.objectOf(
+        PropTypes.shape({
+            table : PropTypes.string,
+            tableName : PropTypes.string,
+            perms : PropTypes.object,
+        })
+    ).isRequired,
+    perms : PropTypes.object,
+    /*** si les élements de permissions seront modifiable où non */
+    disabled : PropTypes.bool,
+    tablePermPrefix : PropTypes.string,/*** le prefixe de permission à jouter à chaque permissions de table de donénes, exemple : 'table/', pour le prefix des permissions de type table de données */
+    title : PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+    ]), //le titre des permission liés à la table de données
+    defaultActions : PropTypes.object,//les actions par défaut aux permissions
 }
 
 export default PermLines;

package/src/screens/Auth/PermText.js

@@ -0,0 +1,62 @@
+import React from "$react";
+import Checkbox from "$ecomponents/Checkbox";
+import PropTypes from "prop-types";
+import {defaultStr,defaultVal,defaultObj} from "$cutils";
+import { StyleSheet } from "react-native";
+import theme from "$theme";
+
+const PermText = React.forwardRef(({isUserMasterAdmin,disabled,assignPerm,testID,text,title,label,checked,labelStyle,table,type,onToggle,actions,action,resource,tooltip,...props},ref)=>{
+    testID = defaultStr(testID,"RN_AuthPermTextComponent");
+    return <Checkbox
+        title = {tooltip || title}
+        ref = {ref}
+        testID = {testID}
+        disabled = {disabled || isUserMasterAdmin}
+        defaultValue = {checked || isUserMasterAdmin?1 : 0}
+        style  = {[theme.styles.noPadding,theme.styles.noMarging,labelStyle !== false && styles.checkbox]}
+        labelStyle = {[labelStyle !== false && styles.label,labelStyle && labelStyle]}
+        label = {defaultVal(label,text)}
+        onPress = {(args)=>{
+            React.stopEventPropagation(args?.event);
+            if(onToggle){
+                onToggle({...args,...props,checked:!!!checked,resource,actions,action,table,type})
+            }
+            return false;
+        }}
+    />
+})
+
+PermText.displayName = "AuthPermTextComponent";
+export default PermText;
+
+PermText.propTypes = {
+    ...defaultObj(Checkbox.propTypes),
+    table : PropTypes.string,
+    type : PropTypes.string,//le type de données pour la table passée en paramètre
+    action : PropTypes.string,
+    //actions : PropTypes.arrayOf(PropTypes.string),
+    resource : PropTypes.string,
+    labelStyle : PropTypes.oneOfType([
+        PropTypes.bool,
+        theme.StyleProp,
+    ]),
+}
+
+const styles = StyleSheet.create({
+    expandableContent : {
+        paddingLeft : 30,
+    },
+    expandable : {
+        paddingLeft : 10,
+    },
+    label : {fontSize:14},
+    permChildren : {
+        paddingLeft : 20,
+    },
+    checkbox : {
+        //width : 20,
+        //height : 20,
+        margin : 0,
+        padding: 0,
+    }
+});

package/src/screens/Auth/index.js

@@ -11,5 +11,7 @@ export default [AuthSignInScreen,UserProfileScreen,
 
 //export {PermProfiles};
 
-//export {default as PermLines} from "./PermLines";
+export {default as PermLines} from "./PermLines";
+export {default as PermLine} from "./PermLine";
+export {default as PermText} from "./PermText";
 //export {default as PermProfile} from "./PermProfile";

package/src/screens/Auth/utils.js

@@ -1,7 +1,42 @@
 import APP from "$capp/instance";
 import i18n from "$i18n";
+import {isNonNullString} from "$cutils";
 
 export const getTitle = x => APP.name+" "+APP.version+"/"+i18n.lang("login");
 export const title = getTitle();
 
-export const screenName = "UserProfile";
+export const screenName = "UserProfile";
+
+export const hasResource = (permAction,resource)=>{
+    if(!isNonNullString(permAction) || !isNonNullString(resource)) return false;
+    permAction = permAction.toLowerCase().trim();
+    resource = resource.toLowerCase().trim();
+    return permAction == resource || permAction.startsWith(resource.rtrim("/")+"/");
+}
+
+export const defaultActions = {
+    create : {
+        text : 'Créer',
+    },
+    update : {
+        text : 'Modifier',
+        alias : 'edit',
+    },
+    delete : {
+        text : 'Supprimer',
+        alias : 'remove'
+    },
+    read : {
+        text : 'Consulter',
+    },
+    exporttoexcel : {
+        text : "Exporter au format Excel",
+        tooltip : "Peut exporter au format excel",
+        alias : 'exportexcel'
+    },
+    exporttopdf : {
+        text : "Exporter au format pdf",
+        tooltip : "Peut exporter au format pdf",
+        alias : 'exportpdf'
+    },
+}