@fto-consult/expo-ui 2.40.1 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.40.1",
+  "version": "2.42.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/Dropdown/utils.js

@@ -17,6 +17,6 @@ export const canAutoFocusSearchField = ({visible,items})=>{
     const count = typeof items =='number'? items : typeof (items) === 'object' ? Object.size(items) : 0;
     if(!visible) return false;
     const ret = count > MAX_AUTO_FOCUS_ITEMS && true || false;
-    if(!isNativeMobile() && !isTouchDevice()) return ret;
+    if(!isNativeMobile() && !isTouchDevice()) return true;
     return isNativeMobile()? ret : false;
 }

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/SimpleSelect/index.js

@@ -25,27 +25,15 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     });
     const [state,setState] = React.useState({
         value : defaultValue !== undefined? defaultValue:undefined,
-        visible : controlled?undefined:false,
+        visible : controlled?controlledVisible:false,
         items : [],
     });
     contentContainerProps = defaultObj(contentContainerProps);
     const prevLayout = React.usePrevious(layout);
     filter = defaultFunc(filter,x=>true);
-    const value = state.value,
-    visible = controlled? controlledVisible : state.visible;
+    const {value,visible} = state;
     compare = defaultFunc(compare,(a,b)=> a === b);
     const prevValue = React.usePrevious(value,compare);
-    const setSelected = (node,update)=>{
-        if(update !== true && compare(value,node.value)) return;
-        selectedRef.current = node;
-        if(update === true){
-            const nState = {...state,value:node.value,visible:controlled?undefined:false};
-            if(controlled && onDismiss){
-                if(onDismiss(nState,defaultObj(selectedRef.current)) === false) return;
-            }
-            setState(nState);
-        }
-    }
     const selectedRef = React.useRef(undefined);
     const listRef = React.useRef(null);
     const isSelected = (itValue,index)=> {
@@ -65,13 +53,11 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     renderText = typeof renderText ==='function'? renderText : ({item,content,index})=>{
         return React.getTextContent(content);
     }
-    const prevMenuItems = React.usePrevious(menuItems,stableHash);
-    const hasInitializedRef = React.useRef(false);
-    const areItemsEquals = hasInitializedRef.current && prevMenuItems == menuItems;//JSON.stringify(prevMenuItems) == JSON.stringify(menuItems);
-    const prepareItems = React.useCallback(()=>{
+    const menuItemsHash = stableHash(menuItems);
+    const items = React.useMemo(()=>{
         const items = [];
         selectedRef.current = null;
-        let currentSelectedValue = value;
+        //let currentSelectedValue = value;
         const isValueDifferent = !compare(defaultValue,value);
         Object.map(menuItems,(item,index,_index)=>{
             if(React.isValidElement(item) || !filter({items:menuItems,item,_index,index})) return null;
@@ -98,26 +84,30 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             mItem.textContent = React.getTextContent(rText) || React.getTextContent(content);
             if(isValueDifferent && itValue !== undefined && compare(defaultValue,itValue)){
                 selectedRef.current = mItem;
-                currentSelectedValue = defaultValue;
-
+                //currentSelectedValue = defaultValue;
             } else if(isSelected(itValue,index)){
                 selectedRef.current = mItem;
             }
             items.push(mItem);
         });
-        hasInitializedRef.current = true;
-        setState({...state,value:currentSelectedValue,items});
-    },[stableHash(menuItems)])
-    const {items} = state;
+        return items;
+        //return ({...state,value:currentSelectedValue,items});
+    },[menuItemsHash])
     React.useEffect(()=>{
-        if(compare(defaultValue == value) && areItemsEquals) return;
-        if(!areItemsEquals){
-            prepareItems();
-        } else {
-            selectValue(defaultValue);
+        if(compare(defaultValue == value)) return;
+        selectValue(defaultValue);
+    },[defaultValue]);
+    const setSelected = (node,update)=>{
+        if(update !== true && compare(value,node.value)) return;
+        selectedRef.current = node;
+        if(update === true){
+            const nState = {...state,value:node.value,visible:controlled?undefined:false};
+            if(controlled && onDismiss){
+                if(onDismiss(nState,defaultObj(selectedRef.current)) === false) return;
+            }
+            setState(nState);
         }
-    },[menuItems,defaultValue]);
-    
+    }
     const context = {};
     const selectValue = context.selectValue = context.setValue = (defaultValue)=>{
         if(compare(defaultValue,value)) return;
@@ -133,7 +123,6 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         }
     }
     context.getValue = ()=> value;
-    
     React.useEffect(()=>{
         if(compare(value,prevValue)) return;
         if(onChange){
@@ -178,9 +167,8 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     }
     context.disabled = !isEditable;
     context.enabled = isEditable;
-
+    React.setRef(ref,context);
     React.useEffect(()=>{
-        React.setRef(ref,context);
         if(onMount ==='function'){
              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){

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;