@fto-consult/expo-ui 2.43.3 → 2.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.43.3",
+  "version": "2.45.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.4.8",
+    "@fto-consult/common": "^2.6.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/ContentLoader/index.js

@@ -1,7 +1,7 @@
 /**** see : https://github.com/danilowoz/react-content-loader */
 import {defaultObj} from "$utils";
 import View from "$ecomponents/View";
-import {StyleSheet,Dimensions,useWindowDimensions} from "react-native";
+import {StyleSheet,Dimensions} from "react-native";
 import React from "react";
 import ContentLoaderF, {Facebook as CLFacebook,Instagram as CLInstagram} from './Loader';
 import PropTypes from "prop-types";

package/src/components/Datagrid/Common/Common.js

@@ -26,7 +26,6 @@ import { evalSingleValue,Footer,getFooterColumnValue,isValidAggregator,extendAgg
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
-import stableHash from "stable-hash";
 import DatagridProgressBar from "$ecomponents/Table/ProgressBar";
 import View from "$ecomponents/View";
 import {Menu} from "$ecomponents/BottomSheet";
@@ -3383,7 +3382,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return false;
     }
     UNSAFE_componentWillReceiveProps(nextProps){
-        if((stableHash(nextProps.data) === stableHash(this.props.data))) {
+        if(React.areEquals(nextProps.data,(this.props.data))) {
             return false;
         }
         this.setIsLoading(true,true);

package/src/components/Dialog/DropdownAlert/index.js

@@ -344,7 +344,12 @@ export default class DropdownAlert extends Component {
     return this.queue.size;
   };
   _processQueue = () => {
-    const data = this.queue.firstItem;
+    let data = this.queue.firstItem;
+    console.log("will open ",data,this.alertData);
+    if(data && React.areEquals(data,this.alertData)){
+        this.queue.dequeue();
+        this._processQueue();
+    }
     if (data) {
       this.open(data);
     }
@@ -352,7 +357,7 @@ export default class DropdownAlert extends Component {
   open = (data = {}) => {
     this.alertData = data;
     const position = data.top || this.isKeyboardOpen() ? "top" : data.position;
-    this.setState({isOpen: true,key:!this.state.key,position},()=>{
+    this.setState({isOpen: true,position},()=>{
       this.animate(1, 450, () => {
         if (data.interval > 0) {
           this.closeAutomatic(data.interval);

package/src/components/Drawer/NavigationView.js

@@ -35,19 +35,24 @@ const DrawerNavigationViewComponent = React.forwardRef((props,ref)=>{
                         style = {flattenStyle([{margin:0,marginHorizontal:0},toggleIconProps.style])}
                         onPress = {(e)=>{
                             ///si le drawer n'est pas visible alors on le rend visible
-                            if(!isPermanent || !drawerRef.current.isOpen()){
-                                return context.toggle();
+                            if(typeof context.toggle === 'function'){
+                                if(!isPermanent || !drawerRef.current.isOpen()){
+                                    return context.toggle();
+                                }
                             }
-                            /*** si le drawer est minimisé */
-                            if(isMinimized){
-                                context.toggleMinimized(false);//on passe au mode non minimisé
-                            } else if(minimizable !== false) {
-                                return context.toggleMinimized(!isMinimized,{permanent:true});
+                            
+                            if(typeof context.toggleMinimized ==='function'){
+                                /*** si le drawer est minimisé */
+                                if(isMinimized){
+                                    context.toggleMinimized(false);//on passe au mode non minimisé
+                                } else if(minimizable !== false) {
+                                    return context.toggleMinimized(!isMinimized,{permanent:true});
+                                }
                             }
                         }}
                         onLongPress = {(e)=>{
                             React.stopEventPropagation(e);
-                            if(isMinimized || !canBeMinimizedOrPermanent()){
+                            if(isMinimized || (!canBeMinimizedOrPermanent() && !isPermanent)){
                             ///le long press n'a pas d'effet sur le drawer quand il est minimié
                                 return;
                             }

package/src/components/Drawer/index.js

@@ -1,4 +1,4 @@
-import {StyleSheet,useWindowDimensions} from 'react-native';  
+import {StyleSheet,Dimensions} from 'react-native';  
 import DrawerLayout from './DrawerLayout';
 import {isIos} from "$cplatform";
 import React from "$react";
@@ -6,14 +6,12 @@ import PropTypes from "prop-types";
 import {defaultObj,isObj,isNonNullString} from "$utils";
 import theme,{Colors,flattenStyle} from "$theme";
 import DrawerItems from './DrawerItems';
-import {isDesktopMedia} from "$cplatform/dimensions";
-import {isMobileNative} from "$cplatform";
+import {isDesktopMedia,getCurrentMedia} from "$cplatform/dimensions";
 import {open,close} from "$epreloader";
 import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,getDrawerWidth,MINIMIZED_ICON_SIZE,ICON_SIZE} from './utils';
 import Icon,{MENU_ICON} from "$ecomponents/Icon";
 import apiSession from "./session";
 import View from "$ecomponents/View";
-import Dimensions from "$cdimensions";
 import {closeDrawer} from './DrawerItems/utils';
 import {DrawerContext} from "./Provider";
 import NavigationView from "./NavigationView";
@@ -36,9 +34,9 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
       onDrawerOpen,onDrawerClose,onDrawerToggle,header,headerProps,toggleIconProps,
       permanentToggleIcon,minimizedToggleIcon,temporaryToggleIcon,withMinimizedIcon,
       isItemActive,onPageResize,navigationViewRef,
-      children,drawerType} = props;
+      children,
+      drawerType} = props;
     sessionName = defaultStr(sessionName);
-    useWindowDimensions();
     const sessionRef = React.useRef({});
     const session = React.useMemo(()=>{
         if(sessionName){

package/src/components/Expandable/index.js

@@ -1,8 +1,8 @@
 import {Colors} from "$theme";
 import React from 'react';
 import View from "$ecomponents/View";
-import {StyleSheet,TouchableWithoutFeedback,ScrollView} from 'react-native';
-import {withTheme,TouchableRipple} from "react-native-paper"
+import {StyleSheet,TouchableWithoutFeedback} from 'react-native';
+import ScrollView from "$ecomponents/ScrollView";
 import Label from "$ecomponents/Label";
 import Icon from "$ecomponents/Icon"
 import {defaultObj,isNonNullString,defaultStr} from "$utils";

package/src/components/ScrollView/index.js

@@ -5,19 +5,20 @@ import View from "$ecomponents/View";
 import theme from "$theme";
 import {defaultStr,defaultObj} from "$utils";
 import APP from "$capp/instance";
-const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children,screenIndent:sIndent,...rest},ref) => {
+const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children:cChildren,screenIndent:sIndent,...rest},ref) => {
   const isKeyboardOpenRef = React.useRef(false);
   const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
   containerProps = defaultObj(containerProps)
   const [layout,setLayout] = React.useState(Dimensions.get("window"));
   const {height} = layout;
+  const children = React.useStableMemo(()=>cChildren,[cChildren]);
   React.useEffect(()=>{
     const onKeyboardToggle = ({visible})=>{
       isKeyboardOpenRef.current = visible;
      };
     const onResizePage = ()=>{
       setTimeout(()=>{
-         //if(isKeyboardOpenRef.current) return;
+         if(isKeyboardOpenRef.current) return;
          setLayout(Dimensions.get("window"))
       },300);
     }

package/src/components/SimpleSelect/index.js

@@ -14,7 +14,6 @@ import Icon from "$ecomponents/Icon";
 import {isDesktopMedia} from "$cplatform/dimensions";
 import { matchOperators,getSearchTimeout,canAutoFocusSearchField} from "$ecomponents/Dropdown/utils";
 import Dialog from "$ecomponents/Dialog";
-import stableHash from "stable-hash";
 
 const  SimpleSelect = React.forwardRef((props,ref)=>{
     let {style : customStyle,onMount,mode,showSearch,anchorContainerProps,renderText,contentContainerProps,withCheckedIcon,testID,selectionColor,dialogProps,onShow,anchor,onUnmont,controlled,onDismiss,visible:controlledVisible,selectedColor,inputProps,itemProps,itemContainerProps,label,listProps,editable,readOnly,text,filter,renderItem,itemValue,getItemValue,defaultValue,items:menuItems,onPress,onChange,disabled,...rest} = props;
@@ -53,8 +52,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     renderText = typeof renderText ==='function'? renderText : ({item,content,index})=>{
         return React.getTextContent(content);
     }
-    const menuItemsHash = stableHash(menuItems);
-    const items = React.useMemo(()=>{
+    const items = React.useStableMemo(()=>{
         const items = [];
         selectedRef.current = null;
         //let currentSelectedValue = value;
@@ -92,7 +90,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         });
         return items;
         //return ({...state,value:currentSelectedValue,items});
-    },[menuItemsHash])
+    },[menuItems])
     React.useEffect(()=>{
         if(compare(defaultValue == value)) return;
         selectValue(defaultValue);

package/src/components/Tab/TabItems.js

@@ -5,13 +5,13 @@ import {
   StyleSheet,
   Platform,
 } from 'react-native';
-import ScrollView  from "$ecomponents/ScrollView";
 import PropTypes from "prop-types";
 import theme,{StylePropTypes,Colors} from "$theme";
 import {isMobileNative,isMobileBrowser} from "$cplatform"
 import {defaultStr} from "$utils";
 import {Elevations} from "$ecomponents/Surface";
-
+import stableHash from "stable-hash";
+import ScrollView from '$ecomponents/ScrollView';
 const showScrollBarIndicator = !isMobileBrowser() && !isMobileNative();
 
 import TabItem from "./TabItem";
@@ -96,6 +96,33 @@ const TabItemsComponent = ({
   indicatorStyle.left = getLeftPosition();
   testID = defaultStr(testID,"RNE_TabComponent");
   scrollViewProps = defaultObj(scrollViewProps)
+  const childrenContent = React.useMemo(()=>{
+    return React.Children.map(children, (child, index) => {
+      const active = index === activeIndex?true : false;
+      return React.cloneElement(
+        child,
+        {
+          onPress: () => {
+            onChange(index);
+          },
+          onLayout: (event) => {
+            const { width } = event.nativeEvent.layout;
+            const previousItemPosition =
+              tabItemsPosition.current[index - 1]?.position || 0;
+
+            tabItemsPosition.current[index] = {
+              position: previousItemPosition + width,
+              width,
+            };
+          },
+          activeIndex,
+          index,
+          active,
+          testID : testID+'_Children_'+index
+        }
+      );
+    })
+  },[stableHash({children,activeIndex})])
   return (<View
       {...rest}
       testID = {testID}
@@ -119,32 +146,9 @@ const TabItemsComponent = ({
       ref={scrollViewRef} 
       testID={testID+"_ScrollView"} 
       onScroll={onScrollHandler}
+      disableIndicator
     >
-      {React.Children.map(children, (child, index) => {
-            const active = index === activeIndex?true : false;
-            return React.cloneElement(
-              child,
-              {
-                onPress: () => {
-                  onChange(index);
-                },
-                onLayout: (event) => {
-                  const { width } = event.nativeEvent.layout;
-                  const previousItemPosition =
-                    tabItemsPosition.current[index - 1]?.position || 0;
-
-                  tabItemsPosition.current[index] = {
-                    position: previousItemPosition + width,
-                    width,
-                  };
-                },
-                activeIndex,
-                index,
-                active,
-                testID : testID+'_Children_'+index
-              }
-            );
-          })}
+      {childrenContent}
           {!disableIndicator && (
               <Animated.View
                 {...indicatorProps}

package/src/components/Table/index.js

@@ -1,11 +1,10 @@
-import {FlashList,BigList,FlatList} from "$ecomponents/List";
 import View from "$ecomponents/View";
 import {defaultObj,defaultStr,debounce,defaultNumber,defaultVal} from "$utils";
 import PropTypes from "prop-types";
 export const DEFAULT_COLUMN_WIDTH = 60;
 import React from "$react";
 import Label from "$ecomponents/Label";
-import { StyleSheet,View as RNView,ScrollView,NativeModules,Dimensions} from "react-native";
+import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
 import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
 import theme from "$theme";
@@ -13,7 +12,6 @@ import AbsoluteScrollView from "./AbsoluteScrollView";
 import Cell from "./Cell";
 import Row from "./Row";
 import List from "./List";
-import ProgressBar from "./ProgressBar";
 const isSCrollingRef = React.createRef();
 const scrollLists = (opts,refs)=>{
     refs.map((ref)=>{
@@ -60,7 +58,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
     const layoutRef = React.useRef({});
     React.useOnRender(onRender);
-    const preparedColumns = React.useMemo(()=>{
+    const preparedColumns = React.useStableMemo(()=>{
         const cols = {},headers = {},footers = {},filters = {},vColumnsMapping = [],visibleColumns = [],columnsNames = [];
         let hasFooters = false;
         columnProps = defaultObj(columnProps);

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -12,8 +12,7 @@ import ErrorBoundary from "$ecomponents/ErrorBoundary";
 import Portal from "$ecomponents/Portal";
 import theme,{StyleProp} from "$theme";
 import StatusBar from "$ecomponents/StatusBar";
-import { ScrollView } from 'react-native';
-
+import ScrollView from "$ecomponents/ScrollView";
 const getDefaultTitle = (nTitle,returnStr)=>{
   let titleStr = React.getTextContent(nTitle);
   if(!titleStr){

package/src/layouts/Screen/TableData.js

@@ -1,5 +1,4 @@
 import {defaultStr,isNumber,isPromise,defaultVal,extendObj,defaultObj,uniqid,isObj,isObjOrArray} from "$utils";
-import stableHash from "stable-hash";
 import {FormData} from "$ecomponents/Form";
 import FormDataScreen from "./FormData";
 import ScreenContainer from "./Screen";
@@ -418,7 +417,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 mainContent = ct;
             } else {
                 mainContent = <View  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding]}>
-                    <ScrollView virtualized testID={testID+"_MainContentScrollView"} contentProps={{style:theme.styles.p1}}>
+                    <ScrollView testID={testID+"_MainContentScrollView"} contentProps={{style:theme.styles.p1}}>
                         <Surface elevation={elevation} testID={testID+"_ContentHeader"} style={[styles.screenContent,theme.styles.p1,header?styles.screenContentWithHeader:null]}>
                             {header}
                             {content}
@@ -431,7 +430,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             }
         } else {
             mainContent = <Surface  {...contentProps} testID={testID+"_MainContentContainer"} elevation={elevation} style={[styles.container,styles.noPadding,{paddingTop:0,marginTop:0}]}>
-                <ScrollView virtualized testID={testID+"_MainContentScrollViewWithoutTab"}>
+                <ScrollView testID={testID+"_MainContentScrollViewWithoutTab"}>
                     <View testID={testID+"_MainContent"} style={[styles.screenContent,!isMobOrTab && theme.styles.p1,header?styles.screenContentWithHeader:null]}>
                         {header}
                         {content}
@@ -567,7 +566,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         const {data,datas}= nextProps;
-        if(stableHash({data,datas}) != stableHash({data:this.state.data,datas:this.state.datas})){
+        if(!React.areEquals({data,datas},{data:this.state.data,datas:this.state.datas})){
             this.setState(this.prepareStateData(nextProps));
         }
         return;