@fto-consult/expo-ui 6.7.2 → 6.8.1

package/src/components/Datagrid/Test/fields.js

@@ -0,0 +1,150 @@
+// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import i18n from "$i18n";
+export default {
+    type : {
+        text : 'Type',
+        type : 'select',
+        required : true,
+        width : 150,
+        items : {
+            PSA : {code:'PSA',index:0,piece:'RVE',label:i18n.lang("payments_sales","Vente")},
+            PPU : {code:'PPU',index:0,piece:'RAC',label:i18n.lang("payments_purchases","Achat")},
+            PIN : {code:'PIN',index : 0,piece:'REN', label:i18n.lang("payments_increases","Encaissement")},
+            PDE : {code:'PDE',index:0,piece:'RDE',label:i18n.lang("payments_decreases","Décaissement")},
+            PTR : {code:'PTR',index:0,piece:'RTR',label:i18n.lang("payments_transfers","Transfert")},
+        },
+    },
+    date : {
+        text : 'Date',
+        tooltip : 'La date',
+        type : 'date',
+        defaultValue : new Date(),
+    },
+    from : {
+        tooltip : 'Le compte source',
+        idfield  : 'code',
+        //le point d'origine 
+        text : 'Du/De',
+    },
+    to : {
+        idfield  : 'code',
+        tooltip : 'Le compte destination',
+        text : 'Au/A',
+    },
+    amount : {
+        text : 'Montant',
+        type : 'number',
+        format : 'money',
+        defaultValue : 0,
+    },
+    mode : {
+        type : 'selectstructdata',
+        text : 'Mode',
+        tableName : 'payments_methods',
+        required : true,
+        defaultValue : 'ESPECE',
+    },
+    cost : {
+        text : 'Coût',
+        type  : 'number',
+        format : 'money',
+        defaultValue : 0,
+        validType : 'numberGreaterThanOrEquals[0]',
+    },
+    totalAmount : {
+        text : 'Montant Total',
+        type : 'number',
+        format : 'money',
+        defaultValue : 0,
+        form : false,
+    },
+    imputedAmount : {
+        text : 'Montant Imputé',
+        form : false,
+        type : 'number',
+        format : 'money',
+        import : false,
+    },
+    restToImpute :{
+        text : 'Reste à Imputer',
+        form : false,
+        type : 'number',
+        format : 'money',
+        import : false,
+    }, 
+    code : {
+        text : 'Numéro/pièce',
+        type : 'piece',
+        tableName : 'PAYMENTS',
+        dbName : 'default',
+        piece : '',
+        width : 200,
+    },
+    reference : {
+        tooltip : 'La référence ',
+        text : 'Référence',
+        width : 300,
+        sortable : false,
+        filter : false,
+        import : false,
+    },
+    category : {
+        text : 'Catégorie',
+        type : 'selectStructData',
+        table : 'payments_categories',
+        width : 200
+    },
+    label : {
+        text : 'Objet/Motif',
+        tooltip : "L'objet ou le motif du règlement",
+        format : 'hashtag',
+        maxLength : 500,
+        rows : 1,
+        width : 300
+    },
+    approved : {
+        type : 'switch',
+        form : false,
+        width : 100,
+        text : 'Approuvé',
+        defaultValue : 0,
+        checkedTooltip : 'Oui',
+        uncheckedTooltip : 'Non'
+    },
+    transferredAmount : {
+        text : 'Montant transféré',
+        title : "Le montant transféré dans le fichier de donné, si le document a été transféré",
+        type : "number",
+        format : 'money',
+        visible : false,
+        form : false,
+    },
+    netAmount : {
+        text : 'Montant net',
+        title : "Le montant net représente la différence entre le montant réglé et le montant transféré",
+        type : "number",
+        format : 'money',
+        visible : false,
+        filter : false,
+        sortable : false,
+        form : false,
+    },
+    tags : {
+        text : 'Etiquettes',
+        type : 'selectstructdata',
+        table : 'tags',
+        multiple : true,
+        display : 'tags',
+        width : 200
+    },
+    comment : {
+        text : 'Note complémentaire',
+        tootile : 'Note complémentaire au règlement',
+        maxLength : 120,
+        format : 'hashtag',
+        rows : 1,
+        width : 200
+    },
+}

package/src/components/Datagrid/Test/index.js

@@ -0,0 +1,10 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import fields from "./fields";
+import Table from "../Table";
+const data = require("./data.json");
+export default function TestDatagridComponent({...props}){
+    return <Table  columns={fields} data={data.docs} {...props}/>
+}

package/src/components/Datagrid/Test/multiplicater.js

@@ -0,0 +1,7 @@
+module.exports = (args,from,to)=>{
+    let {rowData,value,columnField,data,field} = args;
+    columnField = defaultStr(columnField,field);
+    rowData = defaultObj(rowData,data);
+    value = defaultDecimal(value,rowData[columnField]);
+    return Math.abs(value);
+}

package/src/components/Drawer/index.js

@@ -140,6 +140,10 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
         }
         setState(nS);
     }
+    context.getPosition = ()=>position;
+    context.hasLeftPositon = ()=> position === DRAWER_POSITIONS.left;
+    context.hasRightPosition = ()=> position === DRAWER_POSITIONS.right;
+    context.isLeftPosition = ()=> isLeftPosition;
     context.canToggle = x=> canHandleExtra() ? true : permanent? false : true;
     context.canMinimize = x => minimizable !== false && canBeMinimizedOrPermanent() ? true : false;
                     
@@ -221,10 +225,10 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
     ///lorsque le drawer est en mode permanent, l'icone par défaut est l'icon devant le dépingler du mode permanent
     const backIcon = "window-close";//isLeftPosition ? "arrow-left" : "arrow-right";
     const chevronIcon = isLeftPosition ? "chevron-left":"chevron-right";
-    temporaryToggleIcon = React.isValidElement(temporaryToggleIcon)? temporaryToggleIcon : backIcon;
-    permanentToggleIcon = React.isValidElement(permanentToggleIcon)? permanentToggleIcon : chevronIcon;
-    minimizedToggleIcon = React.isValidElement(minimizedToggleIcon)? minimizedToggleIcon : MENU_ICON;
-
+    context.temporaryToggleIcon = temporaryToggleIcon = React.isValidElement(temporaryToggleIcon)? temporaryToggleIcon : backIcon;
+    context.permanentToggleIcon = permanentToggleIcon = React.isValidElement(permanentToggleIcon)? permanentToggleIcon : chevronIcon;
+    context.minimizedToggleIcon = minimizedToggleIcon = React.isValidElement(minimizedToggleIcon)? minimizedToggleIcon : chevronIcon//MENU_ICON;
+    
     let toggleIconTooltip = null;
     let toggleIcon = null, mobileToggleIconTooltip = "Cliquez pour "+(open?'Masquer':'Afficher')+ " le drawer";
     if(!isPermanent){

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

@@ -20,5 +20,4 @@ const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},
 })
 
 AutoSizeVerticalList.displayName = "AutoSizeVerticalListComponent";
-
 export default AutoSizeVerticalList;

package/src/layouts/AppBar/index.js

@@ -12,44 +12,59 @@ const AppBarLayout = React.forwardRef(({backActionProps,withDrawer,backAction,ba
     const innerRef = React.useRef(null);
     options = defaultObj(options);
     const mergedRef = React.useMergeRefs(innerRef,ref);
-    backActionProps = Object.assign({},backActionProps);
-    const {drawerRef} = useDrawer();
     return <AppBar
-        backAction = {backAction === false ? null : ({back,...props})=>{
-            props = defaultObj(props);
-            const size = 30;
-            const bProps = {
-                size,
-                //color : theme.colors.primaryText,
-                ...backActionProps,
-                ...props,
-            }
-            return backAction === true ? <Appbar.BackAction {...bProps}/> : withDrawer !== false? <Icon {...bProps} icon = {MENU_ICON}/> : null;
-        }}
+        backAction = {getBackActionComponent({backAction,backActionProps,withDrawer})}
         {...props}
-        onBackActionPress = {(args)=>{
-            const {canGoBack,goBack} = args;
-            if(backAction === true && canGoBack()){
-                goBack();
-                return false;
-            }
-            if(drawerRef && drawerRef.current){
-                if(drawerRef.current.isMinimized() && drawerRef.current.isOpen()){
-                    drawerRef.current.restore();
-                    return false;
-                }
-                if(!drawerRef.current.isPermanent()){
-                    drawerRef.current.toggle();
-                } else if(!drawerRef.current.isOpen()){
-                    drawerRef.current.open();
-                }
-            }
-            return false;
-        }}
         ref = {mergedRef}
     />
 });
 
+export const getBackActionComponent = ({backAction,backActionProps,withDrawer})=>{
+    backActionProps = Object.assign({},backActionProps);
+    return function MainDrawerBackAction({...props}){
+        const {drawerRef} = useDrawer();
+        const size = 30;
+        const bProps = {
+            size,
+            ...backActionProps,
+            ...props,
+            onPress : (args)=>{
+                const {canGoBack,goBack} = args;
+                if(typeof props.onPress ==='function' && props.onPress(args) === false) return false;
+                if(backAction === true && canGoBack()){
+                    goBack();
+                    return false;
+                }
+                if(drawerRef && drawerRef.current){
+                    if(drawerRef.current.isMinimized() && drawerRef.current.isOpen()){
+                        drawerRef.current.restore();
+                        return false;
+                    }
+                    if(!drawerRef.current.isPermanent()){
+                        drawerRef.current.toggle();
+                    } else if(!drawerRef.current.isOpen()){
+                        drawerRef.current.open();
+                    }
+                }
+                return false;
+            },
+        }
+        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;
+        const hasRightPosition = typeof drawerRef.current?.hasRightPosition =="function" && drawerRef.current?.hasRightPosition();
+        if(isMinimized){
+            bProps.style =[bProps.style];
+            if(hasRightPosition){
+                bProps.style.push({marginRight:-10});
+            } else bProps.style.push({marginLeft:-10});
+            bProps.title = "Cliquez pour restaurer le drawer à sa position initiale"
+        }
+        return !isPermanent || isMinimized ? <Icon {...bProps} icon = {isMinimized ? `chevron-${hasRightPosition?"left":"right"}` : MENU_ICON}/> : null
+    }
+}
+
 AppBarLayout.displayName = "AppBarLayout";
 
 AppBarLayout.propTypes = {

package/src/navigation/Drawer/index.js

@@ -8,17 +8,20 @@ import Login from "$eauth/Login";
 import {navigate} from "$cnavigation";
 import theme from "$theme";
 import Logo  from "$ecomponents/Logo";
+import Dimensions from "$dimensions";
 
-const DrawerNavigator = React.forwardRef(({content,children,state,...props},ref)=>{
+const DrawerNavigator = React.forwardRef(({content,children:customChildren,state,...props},ref)=>{
     const drawerRef = React.useRef(null);
     const mergedRefs = React.useMergeRefs(drawerRef,ref);
     const forceRender = React.useForceRender();
     const refreshItemsRef = React.useRef(false);
+    const [currentMedia,setCurrentMedia] = React.useState(Dimensions.getCurrentMedia());
     const items = useGetItems({refresh:()=>{
         if(drawerRef.current && drawerRef.current && drawerRef.current.forceRenderNavigationView){
             return  drawerRef.current.forceRenderNavigationView();
         }
     },force:refreshItemsRef.current});
+    const children= React.useMemo(()=>customChildren,[customChildren,isLoggedIn])
     React.useEffect(()=>{
         const onLogoutUser = ()=>{
             setIsLoggedIn(false);
@@ -28,11 +31,21 @@ const DrawerNavigator = React.forwardRef(({content,children,state,...props},ref)
             forceRender();
             refreshItemsRef.current = false;
         };
+        const onResizePage = ()=>{
+            forceRender();
+        }
         APP.on(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
+        const bindResize = Dimensions.addEventListener("change",()=>{
+            const cMedia = Dimensions.getCurrentMedia();
+            if(cMedia !== currentMedia){
+               setCurrentMedia(cMedia);
+            }
+        })
         APP.on(APP.EVENTS.UPDATE_THEME,refreshItems);
         return ()=>{
             APP.off(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
             APP.off(APP.EVENTS.UPDATE_THEME,refreshItems);
+            if(typeof bindResize ==='function') bindResize();
         }
     },[])
     const headerCB = ({isMinimized})=>{