@fto-consult/expo-ui 2.40.1 → 2.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.40.1",
+  "version": "2.41.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Drawer/DrawerItems/index.js

@@ -26,6 +26,7 @@ const DrawerItemsComponent = React.forwardRef((props,ref)=> {
                 {...rest}
                 minimized={minimized} 
                 key={key}
+                divider = {rest.divider !== false && items.length ? true : false}
             >
               {items}
             </DrawerSection>

package/src/components/Fab/Group.js

@@ -170,7 +170,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
         backgroundColor = theme.colors.secondary;
         color = theme.colors.secondaryText;
     }
-    const actions = React.useCallback(()=>{
+    const actions = React.useMemo(()=>{
         if(!open) return []
         const actions =  prepareActions === false && Array.isArray(customActions)? customActions : [];
         if((prepareActions !== false || !actions.length)){
@@ -192,7 +192,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
             }); 
         }
         return actions;
-    },[customActions,prepareActions,open])();
+    },[customActions,prepareActions,open]);
     
     React.useEffect(()=>{
         onMount && onMount(context);

package/src/components/Tab/index.js

@@ -58,7 +58,7 @@ const TabComponent = React.forwardRef((props,ref)=>{
         } 
     },[children,activeIndex]);
     testID = defaultStr(testID,"RN_TabComponentComponent");
-    const {tabs,contents,childrenProps} = React.useCallback(()=>{
+    const {tabs,contents,childrenProps} = React.useMemo(()=>{
         const tabs = [],contents = [],childrenProps=[];
         React.Children.map(children,(child,index)=>{
             if(!isObj(child)) return null;
@@ -78,7 +78,7 @@ const TabComponent = React.forwardRef((props,ref)=>{
             </React.Fragment>)
         })
         return {tabs,contents,childrenProps}
-    },[children])();
+    },[children]);
     return <View {...rest} testID={testID} style={[styles.container,tabItemsProps.style]}>
         <TabItems testID={testID+"_TabItems"} {...tabItemsProps} activeIndex={index} style={[styles.tab,rest.style]} onChange={setActiveIndex}>
             {tabs}

package/src/components/Table/Cell.js

@@ -7,14 +7,14 @@ import {defaultObj} from "$utils";
 import Label from "$ecomponents/Label";
 
 function TableCellComponent({cellArgs,rowArgs,children,renderCell,rowIndex,style,...rest}){
-    const {content,containerProps} = React.useCallback(()=>{
+    const {content,containerProps} = React.useMemo(()=>{
         const rArgs = {...cellArgs,...rowArgs,containerProps : {}};
         const r = typeof renderCell =='function' && renderCell (rArgs) ||  children;
         return {
             content : typeof r =='string' || typeof r =='number'? <Label children={r}/> : React.isValidElement(r)? r : null,
             containerProps : defaultObj(rArgs.containerProps)
         }
-    },[children])();
+    },[children]);
     return (<View  {...containerProps} {...rest} style={[style,containerProps.style]} >
         {content}
     </View>);

package/src/components/Table/Header.js

@@ -9,12 +9,12 @@ import React from "$react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
 export default function TableHeaderComponent({cells,columns,...rest}){
-    const children = React.useCallback(()=>{
+    const children = React.useMemo(()=>{
         if(Array.isArray(cells)){
             return null;
         }
         return cells;
-    },[cells,columns])();
+    },[cells,columns]);
     return <View {...rest}>
         {children}
     </View>

package/src/components/Table/Row.js

@@ -5,12 +5,12 @@ import React from "$react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
 export default function TableRowComponent({cells,columns,...rest}){
-    const children = React.useCallback(()=>{
+    const children = React.useMemo(()=>{
         if(Array.isArray(cells)){
             return cells.map((cell,index)=>columns[index]? <React.Fragment key={index}>{cell}</React.Fragment> : null )
         }
         return cells;
-    },[cells,columns])();
+    },[cells,columns]);
     return <View {...rest}>
         {children}
     </View>

package/src/components/Table/index.js

@@ -60,7 +60,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
     const layoutRef = React.useRef({});
     React.useOnRender(onRender);
-    const prepareColumns = React.useCallback(()=>{
+    const preparedColumns = React.useMemo(()=>{
         const cols = {},headers = {},footers = {},filters = {},vColumnsMapping = [],visibleColumns = [],columnsNames = [];
         let hasFooters = false;
         columnProps = defaultObj(columnProps);
@@ -129,12 +129,12 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
         });
         return {columns:cols,columnsNames,headers,visibleColumns,vColumnsMapping,hasFooters,footers,filters};
       },[columns]);
-    const {columns:cols,headers,footers,filters,hasFooters:stateHasFooters,columnsNames,vColumnsMapping,visibleColumns} =  prepareColumns();
+    const {columns:cols,headers,footers,filters,hasFooters:stateHasFooters,columnsNames,vColumnsMapping,visibleColumns} =  preparedColumns;
     headerContainerProps = defaultObj(headerContainerProps);
     footerContainerProps = defaultObj(footerContainerProps);
     const dimensions = Dimensions.get("window");
     const maxHWidth = dimensions.width - defaultNumber(layoutRef.current.left,layoutRef.current.x);
-    const {fFilters,headersContent,footersContent,totalWidths} = React.useCallback(()=>{
+    const {fFilters,headersContent,footersContent,totalWidths} = React.useMemo(()=>{
         const headersContent = [],footersContent = [],fFilters = [];
         let totalWidths = 0;
         visibleColumns.map((i,index)=>{
@@ -149,13 +149,12 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
         });
         
         return {headersContent,totalWidths,footersContent,fFilters};
-    },[visibleColumns,showFilters,showFooters,layoutRef.current])();
-    const colString = columnsNames.join(",");
+    },[visibleColumns,showFilters,showFooters,layoutRef.current]);
     const prevData = React.usePrevious(data);
-    const prevColString = React.usePrevious(colString);
+    const prevColumns = React.usePrevious(columns);
     const itemsRef = React.useRef(null);
-    const prepareItems = React.useCallback(()=>{
-        if(data === prevData && prevColString == colString && Array.isArray(itemsRef.current)){
+    const items = React.useMemo(()=>{
+        if(data === prevData && prevColumns == columns && Array.isArray(itemsRef.current)){
             return itemsRef.current;
         }
         const items = [];
@@ -189,7 +188,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
         });
         itemsRef.current = items;
         return items;
-    },[data,colString]);
+    },[data,columns]);
     const scrollContentContainerStyle = {flex:1,width:listWidth,minWidth:totalWidths,height:'100%'};
     const scrollEventThrottle = isMobileNative()?200:50;
     const scrollViewFlexGrow = {flexGrow:0};
@@ -257,7 +256,6 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
             }
         }
     }
-    const items = prepareItems();
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
         if(containerProps.onLayout){
@@ -340,7 +338,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                         numberOfLines = {1}
                         responsive = {false}
                         testID = {testID}
-                        prepareItems = {false}
+                        preparedItems = {false}
                         items = {items}
                         contentContainerStyle = {[styles.contentContainer,{with:listWidth,minWidth:totalWidths,position:'absolute',right:'0'}]}
                         style = {[styles.datagrid,{width:listWidth,minWidth:totalWidths}]}

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -93,7 +93,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll
             tableName
         })
     };
-    const fetchFields = React.useCallback(()=>{
+    const fetchFields = React.useMemo(()=>{
         const fetchFields = [];
         Object.map(columns,(field,f)=>{
             const ff = defaultStr(isObj(field) && field.filter !== false? field.field: undefined,f);
@@ -102,7 +102,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll
             }
         });
         return fetchFields;
-    },[columns])();
+    },[columns]);
     const counUpStyle = {fontSize:20,fontWeight:'bold',color:theme.colors.secondaryOnSurface};
     title =  React.isValidElement(title,true)?<Label splitText numberOfLines={1} color={theme.colors.primaryOnSurface} style={[{fontSize:15}]}>{title}</Label>: null;
     const titleText = title && React.getTextContent(title) || null;

package/src/layouts/Fab/index.js

@@ -13,7 +13,7 @@ export * from "./utils";
 const FabLayoutComponent = React.forwardRef(({style,screenName,tables,...props},ref)=>{
   const [isLoggedIn,setIsLoggedIn] = React.useState(isAuthLoggedIn());
   const isMounted = React.useIsMounted();
-  const actions = React.useCallback(()=>{
+  const actions = React.useMemo(()=>{
       if(!isLoggedIn) return null;
       const a = [];
       Object.map(tables,(table,i,index)=>{
@@ -48,7 +48,7 @@ const FabLayoutComponent = React.forwardRef(({style,screenName,tables,...props},
           })
       })
       return a.length ? a : null;
-  },[isLoggedIn])();
+  },[isLoggedIn]);
   React.useEffect(()=>{
       const onLogin = ()=>{
           if(!isMounted())return;