@fto-consult/expo-ui 6.26.2 → 6.26.3

package/package.json

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

package/src/components/Dialog/AppBarDialog.js

@@ -9,8 +9,9 @@ const AppBarDialogComponent = React.forwardRef((props,ref)=>{
     const forceRender = React.useForceRender();
     React.useEffect(()=>{
         const onResize = ()=>{
+            return;
             forceRender();
-         }
+        }
         if(responsive){
             APP.on(APP.EVENTS.RESIZE_PAGE,onResize);
         }

package/src/components/ErrorBoundary/ErrorMessage.js

@@ -13,6 +13,7 @@ import {isWeb} from "$cplatform";
 
 const ErrorMessage = React.forwardRef(function(props,ref){
   const { error,resetError,onGoBack, info } = props
+  const testID = defaultStr(props.testID,"RN_ErrorBoundaryMessage");
     const goToHome = ()=> {
       if(navigationRef){
         navigationRef.navigate(homeRoute);
@@ -26,8 +27,8 @@ const ErrorMessage = React.forwardRef(function(props,ref){
     const pointerEvents = 'auto';
     const {width,height} = useWindowDimensions();
     return <Portal>
-          <View ref={ref} testID='RN_ErrorBoundary_Container' pointerEvents={pointerEvents} style={[styles.container,isWeb()?{position:'fixed'}:null,{backgroundColor:theme.colors.surface,width,height}]}>
-            <View style={styles.content} pointerEvents={pointerEvents}>
+          <View ref={ref} testID={`${testID}_ErrorMessageContainer`} pointerEvents={pointerEvents} style={[styles.container,isWeb()?{position:'fixed'}:null,{backgroundColor:theme.colors.surface,width,height}]}>
+            <View style={styles.content} testID={`${testID}_ErrorMessageContentContainer`} pointerEvents={pointerEvents}>
               <Label style={styles.title}>Oops!</Label>
               <Label style={styles.subtitle}>{'Une erreur est survenue'}</Label>
               <Label style={styles.error}>{error.toString()}</Label>

package/src/components/ErrorBoundary/Provider.js

@@ -4,6 +4,7 @@ let providerRef = null;
 import * as React from "react";
 import useForceRender from "$react/useForceRender";
 import setRef from "$react/setRef";
+import {defaultStr} from "$cutils";
 
 const providerState = {};
 
@@ -38,9 +39,9 @@ const Provider = React.forwardRef((_props,innerRef)=>{
         },
     });
     setRef(ref,context);        
-
-    return <Portal>
-        <ErrorMessage {...propRef.current} ref={el=>{
+    const testID = defaultStr(propRef.current?.testID,_props.testID,"RN_ErrorBoundaryProvider");
+    return <Portal testID={testID}>
+        <ErrorMessage {...propRef.current} testID={testID+"_ErrorBoundaryPortalContent"}  ref={el=>{
             messageRef.current = el;
             setRef(propRef.current.messageRef);
         }}/>

package/src/components/ErrorBoundary/index.js

@@ -38,6 +38,7 @@ class ErrorBoundary extends React.Component {
       } else {
         return (
           <ErrorMessage
+            testID={"RN_ErrorBoundaryErrorMessage"}
             error={error}
             info={info}
             resetError={this.resetError}

package/src/components/Icon/Icon.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import Tooltip from "$ecomponents/Tooltip";
 import theme,{flattenStyle,Colors} from "$theme";
 import React from "$react";
-import {IconButton} from "react-native-paper"
+import {IconButton} from "react-native-paper";
 
 const IconComponentRef = React.forwardRef((props,ref)=>{
     let {icon,style,Component,button,color,name,containerColor,...rest} = props;

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

@@ -58,8 +58,7 @@ const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,
     const containerId = `${id}-container`;
     const headId = `${id}-table-head`;
     testID = defaultStr(testID,containerProps.testID,"RN_VirtuosoListComponent");
-    const listIdRef = React.useRef(uniqid("virtuoso-list-id"));
-    const listId = listIdRef.current;
+    const listId = `${id}-list`;
     const listRef = React.useRef(null);
     const sizeRef = React.useRef({width:0,height:0});
     const listSize = sizeRef.current;

package/src/components/Logo/Progress.js

@@ -5,15 +5,19 @@ import { ActivityIndicator, Colors } from 'react-native-paper';
 import theme,{defaultDarkTheme} from "$theme";
 import {isIos} from "$cplatform";
 import appConfig from "$capp/config";
+import {defaultStr} from "$cutils";
 
-export default function LogoProgress (props){
+export default function LogoProgress ({testID}){
+    testID = defaultStr(testID,"RN_LogoProgress");
     let containerStyle = {width:(Logo.width?Logo.width:undefined),height:(Logo.height?(Logo.height+100):undefined),flex:1,alignItems:"center",justifyContent:"center"};
     const primaryColor = theme.colors.primaryOnSurface,
     secondaryColor = theme.colors.secondaryOnSurface;
-    return <View style={[containerStyle]}>
-            <Logo key='logo' style={{marginBottom:0}} color={primaryColor}/>
-            <ActivityIndicator size = {isIos()?'large':40} animating={true} color={secondaryColor} />
-            <View key={'app-version'} style={{flex:1}}>
+    return <View style={[containerStyle]} testID={testID+"_ProgressLogoContainer"}>
+            <Logo key='logo' style={{marginBottom:0}} color={primaryColor} testID={testID+"_ProgressLogo"}/>
+            <View style={{marginTop:20}} testID={testID+"_LogoProgressActivityIndicatorContainer"}>
+                <ActivityIndicator size = {isIos()?'large':40} animating={true} color={secondaryColor} />
+            </View>
+            <View key={'app-version'} style={{flex:1}} testID={testID+"_LogoProgressVersion"}>
                 <Label style={[{marginTop:10, fontWeight:'bold',color:secondaryColor}]}>version {appConfig.version}</Label>
             </View>
     </View>

package/src/components/Menu/Menu.js

@@ -94,12 +94,16 @@ class _Menu extends AppComponent {
     });
 
   updateVisibility = async () => {
+    // _Menu is rendered in Portal, which updates items asynchronously
+    // We need to do the same here so that the ref is up-to-date
+    await Promise.resolve();
+
     if (this.props.visible) {
       this.show();
     } else {
       this.hide();
     }
-  }
+  };
 
   isBrowser = () => Platform.OS === 'web' && 'document' in global;
 
@@ -157,62 +161,69 @@ class _Menu extends AppComponent {
       document.removeEventListener('keyup', this.handleKeypress);
   };
 
-  show (){
+  show = async () => {
     if(!this._isMounted()) return;
-    return Promise.all([
+    const windowLayout = Dimensions.get('window');
+    const [menuLayout, anchorLayout] = await Promise.all([
       this.measureMenuLayout(),
       this.measureAnchorLayout(),
-    ]).then(([menuLayout, anchorLayout])=>{
-      const windowLayout = Dimensions.get('window');
-      if (
-        !windowLayout.width ||
-        !windowLayout.height ||
-        !menuLayout.width ||
-        !menuLayout.height ||
-        (!anchorLayout.width) ||
-        (!anchorLayout.height)
-      ) {
-        requestAnimationFrame(this.show.bind(this));
-        return;
-      }
-      this.setState({
-          left: anchorLayout.x,
-          top: anchorLayout.y,
-          rendered : true,
-          anchorLayout: {
-            height: anchorLayout.height,
-            width: anchorLayout.width,
-          },
-          menuLayout: {
-            width: menuLayout.width,
-            height: menuLayout.height,
-          },
+    ]);
+
+    // When visible is true for first render
+    // native views can be still not rendered and
+    // measureMenuLayout/measureAnchorLayout functions
+    // return wrong values e.g { x:0, y: 0, width: 0, height: 0 }
+    // so we have to wait until views are ready
+    // and rerun this function to show menu
+    if (
+      !windowLayout.width ||
+      !windowLayout.height ||
+      !menuLayout.width ||
+      !menuLayout.height ||
+      (!anchorLayout.width) ||
+      (!anchorLayout.height)
+    ) {
+      requestAnimationFrame(this.show);
+      return;
+    }
+
+    this.setState(
+      () => ({
+        left: anchorLayout.x,
+        top: anchorLayout.y,
+        anchorLayout: {
+          height: anchorLayout.height,
+          width: anchorLayout.width,
         },
-        () => {
-          this.attachListeners();
-  
-          const animation = theme.animation;
-          Animated.parallel([
-            Animated.timing(this.state.scaleAnimation, {
-              toValue: { x: menuLayout.width, y: menuLayout.height },
-              duration: ANIMATION_DURATION * animation.scale,
-              easing: EASING,
-              useNativeDriver: true,
-            }),
-            Animated.timing(this.state.opacityAnimation, {
-              toValue: 1,
-              duration: ANIMATION_DURATION * animation.scale,
-              easing: EASING,
-              useNativeDriver: true,
-            }),
-          ]).start(({ finished }) => {
-            if (finished) {
-              this.focusFirstDOMNode(this.menu);
-            }
-          });
-        }
-      );
-    });
+        menuLayout: {
+          width: menuLayout.width,
+          height: menuLayout.height,
+        },
+      }),
+      () => {
+        this.attachListeners();
+
+        const animation = theme.animation;
+        Animated.parallel([
+          Animated.timing(this.state.scaleAnimation, {
+            toValue: { x: menuLayout.width, y: menuLayout.height },
+            duration: ANIMATION_DURATION * animation.scale,
+            easing: EASING,
+            useNativeDriver: true,
+          }),
+          Animated.timing(this.state.opacityAnimation, {
+            toValue: 1,
+            duration: ANIMATION_DURATION * animation.scale,
+            easing: EASING,
+            useNativeDriver: true,
+          }),
+        ]).start(({ finished }) => {
+          if (finished) {
+            this.focusFirstDOMNode(this.menu);
+          }
+        });
+      }
+    );
   };
 
   hide = (cb) => {
@@ -226,7 +237,7 @@ class _Menu extends AppComponent {
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {
-        this.setState({ rendered:false,menuLayout: { width: 0, height: 0 }},(e)=>{if(typeof cb ==='function') cb();});
+        this.setState({ menuLayout: { width: 0, height: 0 }},(e)=>{if(typeof cb ==='function') cb();});
         this.state.scaleAnimation.setValue({ x: 0, y: 0 });
         this.focusFirstDOMNode(this.anchor);
       }
@@ -283,7 +294,7 @@ class _Menu extends AppComponent {
 
     // We need to translate menu while animating scale to imitate transform origin for scale animation
     const positionTransforms = [];
-  
+
     // Check if menu fits horizontally and if not align it to right.
     if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {
       positionTransforms.push({
@@ -304,7 +315,9 @@ class _Menu extends AppComponent {
           outputRange: [menuLayout.width / 2, 0],
         }),
       });
+
       left += anchorLayout.width - menuLayout.width;
+
       const right = left + menuLayout.width;
       // Check if menu position has enough space from right side
       if (right > windowLayout.width - SCREEN_INDENT) {
@@ -312,6 +325,7 @@ class _Menu extends AppComponent {
       }
     }
     const handleScroll = canHandleScroll !== false? true : false;
+    
     // If the menu is larger than available vertical space,
     // calculate the height of scrollable view
     let scrollableMenuHeight = 0;
@@ -455,48 +469,50 @@ class _Menu extends AppComponent {
         style = {{backgroundColor:'transparent'}}
       >
         {anchor}
-        <Portal>
-          {rendered ? <TouchableWithoutFeedback
-            testID={testID+"_MenuTouchableWithoutFeedBack"}
-            accessibilityLabel={overlayAccessibilityLabel}
-            role="button"
-            onPress={onDismiss}
-            style = {[hiddenStyle]}
-          >
-            <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
-          </TouchableWithoutFeedback>:null}
-          <View
-            testID = {testID+"_MenuContentContainer"}
-            ref={(ref) => {
-              this.menu = ref;
-            }}
-            collapsable={false}
-            accessibilityViewIsModal={visible}
-            style={[styles.wrapper, positionStyle, style,hiddenStyle]}
-            pointerEvents={visible ? 'box-none' : 'none'}
-            onAccessibilityEscape={onDismiss}
-          >
-            {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
-              <Surface
-                elevation = {5}
-                testID= {testID+"_MenuContent"}
-                style={
-                  [
-                    styles.shadowMenuContainer,
-                    shadowMenuContainerStyle,
-                    contentStyle,
-                    {backgroundColor : theme.colors.surface},
-                    minWidth && {minWidth : Math.max(minWidth,MIN_WIDTH)},
-                    sameWidth && anchorLayout.width ? {width:Math.max(anchorLayout.width,minWidth,MIN_WIDTH)} : undefined,
-                  ]
-                }
-              >
-                {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
-                )) || children}
-              </Surface>
-            </Animated.View> : null}
-          </View>
-        </Portal>
+        {true ? (
+          <Portal>
+            {rendered ? <TouchableWithoutFeedback
+              testID={testID+"_Menu_TouchableWithoutFeedBack"}
+              accessibilityLabel={overlayAccessibilityLabel}
+              role="button"
+              onPress={onDismiss}
+              style = {[hiddenStyle]}
+            >
+              <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
+            </TouchableWithoutFeedback>:null}
+            <View
+              testID = {testID+"_MenuContentContainer"}
+              ref={(ref) => {
+                this.menu = ref;
+              }}
+              collapsable={false}
+              accessibilityViewIsModal={visible}
+              style={[styles.wrapper, positionStyle, style,hiddenStyle]}
+              pointerEvents={visible ? 'box-none' : 'none'}
+              onAccessibilityEscape={onDismiss}
+            >
+              {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
+                <Surface
+                  elevation = {5}
+                  testID= {testID+"_MenuContent"}
+                  style={
+                    [
+                      styles.shadowMenuContainer,
+                      shadowMenuContainerStyle,
+                      contentStyle,
+                      {backgroundColor : theme.colors.surface},
+                      minWidth && {minWidth : Math.max(minWidth,MIN_WIDTH)},
+                      sameWidth && anchorLayout.width ? {width:Math.max(anchorLayout.width,minWidth,MIN_WIDTH)} : undefined,
+                    ]
+                  }
+                >
+                  {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
+                  )) || children}
+                </Surface>
+              </Animated.View> : null}
+            </View>
+          </Portal>
+        ) : null}
       </View>
     );
   }

package/src/components/Portal/Portal.js

@@ -0,0 +1,88 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import {uniqid}  from "$utils";
+import { usePortal } from './hooks';
+
+const PortalComponent = ({
+  name: _providedName,
+  hostName,
+  handleOnMount: _providedHandleOnMount,
+  handleOnUnmount: _providedHandleOnUnmount,
+  handleOnUpdate: _providedHandleOnUpdate,
+  children,
+}) => {
+  //#region hooks
+  const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName);
+  //#endregion
+
+  //#region variables
+  const name = useMemo(() => _providedName || uniqid("portal-component"), [_providedName]);
+  //#endregion
+
+  //#region refs
+  const handleOnMountRef = useRef();
+  const handleOnUnmountRef = useRef();
+  const handleOnUpdateRef = useRef();
+  //#endregion
+
+  //#region callbacks
+  const handleOnMount = useCallback(() => {
+    if (_providedHandleOnMount) {
+      _providedHandleOnMount(() => addUpdatePortal(name, children));
+    } else {
+      addUpdatePortal(name, children);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_providedHandleOnMount, addUpdatePortal]);
+  handleOnMountRef.current = handleOnMount;
+
+  const handleOnUnmount = useCallback(() => {
+    if (_providedHandleOnUnmount) {
+      _providedHandleOnUnmount(() => removePortal(name));
+    } else {
+      removePortal(name);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_providedHandleOnUnmount, removePortal]);
+  handleOnUnmountRef.current = handleOnUnmount;
+
+  const handleOnUpdate = useCallback(() => {
+    if (_providedHandleOnUpdate) {
+      _providedHandleOnUpdate(() => addUpdatePortal(name, children));
+    } else {
+      addUpdatePortal(name, children);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_providedHandleOnUpdate, addUpdatePortal, children]);
+  handleOnUpdateRef.current = handleOnUpdate;
+  //#endregion
+
+  //#region effects
+  useEffect(() => {
+    handleOnMountRef.current?.();
+    return () => {
+      handleOnUnmountRef.current?.();
+
+      // remove callbacks refs
+      handleOnMountRef.current = undefined;
+      handleOnUnmountRef.current = undefined;
+      handleOnUpdateRef.current = undefined;
+    };
+  }, []);
+  useEffect(() => {
+    handleOnUpdateRef.current?.();
+  }, [children]);
+  //#endregion
+
+  return null;
+};
+
+const Portal = memo(PortalComponent);
+Portal.displayName = 'Portal';
+
+
+export default Portal;

package/src/components/Portal/PortalHost.js

@@ -0,0 +1,31 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+import React, { memo, useEffect } from 'react';
+import { usePortal,usePortalState} from './hooks';
+
+const PortalHostComponent = ({ name }) => {
+  const state = usePortalState(name);
+  const { registerHost, deregisterHost } = usePortal(name);
+
+  //#region effects
+  useEffect(() => {
+    registerHost();
+    return () => {
+      deregisterHost();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  //#endregion
+
+  //#region render
+  return <>{state.map(item => item.node)}</>;
+  //#endregion
+};
+
+const PortalHost = memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';
+
+export default PortalHost;

package/src/components/Portal/PortalProvider.js

@@ -0,0 +1,31 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+
+import React, { memo, useReducer } from 'react';
+import PortalHost from './PortalHost';
+import {PortalDispatchContext,PortalStateContext} from './context';
+import { INITIAL_STATE } from './constants';
+import { reducer } from './reducer';
+
+const PortalProviderComponent = ({
+  rootHostName = 'root',
+  shouldAddRootHost = true,
+  children,
+}) => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  return (
+    <PortalDispatchContext.Provider value={dispatch}>
+      <PortalStateContext.Provider value={state}>
+        {children}
+        {shouldAddRootHost && <PortalHost name={rootHostName} />}
+      </PortalStateContext.Provider>
+    </PortalDispatchContext.Provider>
+  );
+};
+
+const PortalProvider = memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';
+export default PortalProvider;

package/src/components/Portal/constants.js

@@ -0,0 +1,15 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+const ACTIONS = {
+    REGISTER_HOST :"REGISTER_HOST",
+    DEREGISTER_HOST:"DEREGISTER_HOST",
+    ADD_UPDATE_PORTAL:"ADD_UPDATE_PORTAL",
+    REMOVE_PORTAL:"REMOVE_PORTAL",
+  }
+  
+  const INITIAL_STATE = {};
+  
+  export { ACTIONS, INITIAL_STATE };

package/src/components/Portal/context.js

@@ -0,0 +1,10 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+
+import { createContext } from 'react';
+
+export const PortalStateContext = createContext(null);
+export const PortalDispatchContext = createContext(null);

package/src/components/Portal/hooks.js

@@ -0,0 +1,75 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+import { useCallback, useContext } from 'react';
+import { ACTIONS } from './constants';
+import { PortalDispatchContext,PortalStateContext } from './context';
+
+export const usePortal = (hostName = 'root') => {
+  const dispatch = useContext(PortalDispatchContext);
+
+  if (dispatch === null) {
+    throw new Error(
+      "'PortalDispatchContext' cannot be null, please add 'PortalProvider' to the root component."
+    );
+  }
+
+  //#region methods
+  const registerHost = useCallback(() => {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName: hostName,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const deregisterHost = useCallback(() => {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName: hostName,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const addUpdatePortal = useCallback((name, node) => {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName,
+      portalName: name,
+      node,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const removePortal = useCallback((name) => {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName,
+      portalName: name,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  //#endregion
+
+  return {
+    registerHost,
+    deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal,
+  };
+};
+
+export const usePortalState = (hostName) => {
+  const state = useContext(PortalStateContext);
+
+  if (state === null) {
+    throw new Error(
+      "'PortalStateContext' cannot be null, please add 'PortalProvider' to the root component."
+    );
+  }
+
+  return state[hostName] || [];
+};

package/src/components/Portal/index.js

@@ -1,5 +1,13 @@
-import { Portal } from "@gorhom/portal";
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
 
-export * from "@gorhom/portal";
+export {default} from "./Portal";
 
-export default Portal;
+export {default as PortalHost} from "./PortalHost";
+
+export {default as PortalProvider} from "./PortalProvider";
+
+export * from "./hooks";

package/src/components/Portal/index.old.js

@@ -0,0 +1,4 @@
+import { Portal } from "@gorhom/portal";
+export * from "@gorhom/portal";
+
+export default Portal;

package/src/components/Portal/reducer.js

@@ -0,0 +1,92 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+
+import { ACTIONS } from './constants';
+
+const registerHost = (state,hostName) => {
+  if (!(hostName in state)) {
+    state[hostName] = [];
+  }
+  return state;
+};
+
+const deregisterHost = (
+  state,
+  hostName
+) => {
+  delete state[hostName];
+  return state;
+};
+
+const addUpdatePortal = (
+  state,
+  hostName,
+  portalName,
+  node
+) => {
+  if (!(hostName in state)) {
+    state = registerHost(state, hostName);
+  }
+
+  /**
+   * updated portal, if it was already added.
+   */
+  const index = state[hostName].findIndex(item => item.name === portalName);
+  if (index !== -1) {
+    state[hostName][index].node = node;
+  } else {
+    state[hostName].push({
+      name: portalName,
+      node,
+    });
+  }
+  return state;
+};
+
+const removePortal = (
+  state,
+  hostName,
+  portalName
+) => {
+  if (!(hostName in state)) {
+   console.warn({
+      component: reducer.name,
+      method: removePortal.name,
+      params: `Failed to remove portal '${portalName}', '${hostName}' was not registered!`,
+    });
+    return state;
+  }
+
+  const index = state[hostName].findIndex(item => item.name === portalName);
+  if (index !== -1) state[hostName].splice(index, 1);
+  return state;
+};
+
+export const reducer = (state,action) => {
+  const { type } = action;
+  let clonedState = { ...state };
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHost(clonedState, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(clonedState, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(
+        clonedState,
+        action.hostName,
+        (action).portalName,
+        (action).node
+      );
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(
+        clonedState,
+        action.hostName,
+        (action).portalName
+      );
+    default:
+      return state;
+  }
+};

package/src/components/Portal/usePortalState.js

@@ -0,0 +1,19 @@
+/***
+ *  MIT License
+    Copyright (c) 2020 Mo Gorhom
+    @see : https://github.com/gorhom/react-native-portal
+ */
+import { useContext } from 'react';
+import { PortalStateContext } from './context';
+
+export const usePortalState = (hostName) => {
+  const state = useContext(PortalStateContext);
+
+  if (state === null) {
+    throw new Error(
+      "'PortalStateContext' cannot be null, please add 'PortalProvider' to the root component."
+    );
+  }
+
+  return state[hostName] || [];
+};

package/src/components/Preloader/index.js

@@ -158,7 +158,7 @@ export function PreloaderProvider({ children }) {
         return ()=>{ unlinkPreloader();}
     },[])
     return (<PreloaderContext.Provider value={{subscribe,unsubscribe}}>
-        <PreloaderComponent id={MAIN_PRELOADER_ID} visible = {false}/>
+        <PreloaderComponent id={MAIN_PRELOADER_ID} testID={"RN_MainPreloaderProviderComponent"} visible = {false}/>
         {children}
     </PreloaderContext.Provider>);
 }

package/src/components/ScrollView/index.js

@@ -5,6 +5,7 @@ import {defaultStr,defaultObj} from "$cutils";
 import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
 
 const ScrollViewComponent = React.forwardRef(({withAutoSizer,autoSizerProps,testID,...rest},ref) => {
+  return <ScrollView testID={testID} {...rest} ref={ref}/>
   testID = defaultStr(testID,'RN_ScrollViewComponent');
   const autoSize = React.useRef(withAutoSizer).current;
   if(!autoSize || rest.horizontal === true || rest.vertical === false){

package/src/components/SplashScreen/index.js

@@ -98,7 +98,7 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
     ],
   }
   const child = (animationDone && isLoaded)? React.isValidElement(children) && children : null;
-  if(animationDone) return child;
+  if(animationDone && isLoaded) return child;
   return <View style={[styles.container]} testID={testID} id={testID}>
       {!animationDone ? <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/> : null}
       <View style={styles.containerGlue} testID={testID+"_ContainerGlue"}>
@@ -108,7 +108,7 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
             testID={testID+"_AnimationDone"}
           />
         )}
-        {(animationDone || isNative) && child}
+        {false && (animationDone || isNative) && child}
         {!animationDone && (
             <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
             {(

package/src/components/StatusBar/Component/index.web.js

@@ -53,7 +53,6 @@ export default function StatusBarComponent(props){
         }
     },[]);
     return null;
-    return <StatusBar {...styles} {...props}></StatusBar>
 }
 const updateThemeName = (theme)=>{
     if(typeof document ==="undefined" || !document || !isDOMElement(document.body)) return null;

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

@@ -0,0 +1,41 @@
+import {useEffect} from "react";
+import { StyleSheet } from "react-native";
+import View from "$ecomponents/View";
+import {defaultStr,defaultNumber,uniqid,classNames} from "$cutils";
+import { useWindowDimensions } from "react-native";
+import {useTable} from "../hooks";
+
+export default function EmptyPlaceholderComponent({testID,content}){
+    testID = defaultStr(testID,"RN_VirtuosoTableEmptyPlaceholder");
+    const {id : tableId,visibleColsNames} = useTable();
+    const id = `${tableId}-empty-placeholder`;
+    const listID = `${tableId}-list`;
+    const clx = "virtuoso-table-empty-placehoder";
+    const {width:dimW} = useWindowDimensions();
+    useEffect(()=>{
+        const list = document.querySelector(`#${listID}`),content = document.querySelector(`#${id}-content`);
+        if(!list || !content || !list.offsetWidth) return;
+        const width = list.offsetWidth || list.clientWidth;
+        content.style.width = `${width}px`;
+    },[dimW]);
+    return <tbody id={`${id}-tbody`} data-test-id={`${testID}-tbody`} className={`${clx}-tbody`} style={wStyle}>
+        <tr id={`${id}-tr`} data-test-id={`${testID}-tr`} className={`${clx}-tr`} style={wStyle}>
+            <td colSpan={visibleColsNames.length} id={`${id}-td`} width={"100%"} height={"100%"}  data-test-id={`${testID}-td`} style={wStyle}>
+                <View testID={testID} id={`${id}-content`} style={styles.content}>{content}</View>
+            </td>
+        </tr>
+    </tbody>
+}
+const wStyle = {
+    width : "100%",
+    height : "100%",
+    position : "relative"
+}
+const styles = StyleSheet.create({
+    content : {
+        alignItems:"center",
+        justifyContent : "center",
+        height : "100%",
+        width : "100%",
+    },
+})

package/src/components/Table/EmptyPlaceholder/index.native.js

@@ -0,0 +1,3 @@
+export default function EmptyPlaceholderComponent({emptyContent}){
+    return null;
+}

package/src/components/Table/hooks.js

@@ -1,5 +1,5 @@
 import React,{useMemo} from "$react";
-import {defaultStr,isObj} from "$cutils";
+import {defaultStr,isObj,uniqid} from "$cutils";
 import {DEFAULT_COLUMN_WIDTH} from "./utils";
 import Label from "$ecomponents/Label";
 import HeaderCell from "./Header/Cell";

package/src/components/Table/index.js

@@ -1,5 +1,5 @@
 import View from "$ecomponents/View";
-import {defaultObj,defaultStr,debounce,defaultNumber,isObj,defaultVal} from "$cutils";
+import {defaultObj,defaultStr,debounce,defaultNumber,uniqid,isObj,defaultVal} from "$cutils";
 import PropTypes from "prop-types";
 import React from "$react";
 import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
@@ -15,6 +15,7 @@ import {useIsRowSelected} from "$ecomponents/Datagrid/hooks";
 import {getRowStyle} from "$ecomponents/Datagrid/utils";
 import ScrollNative from "./ScrollNative";
 import VirtuosoTableComponent from "./VirtuosoTable";
+import EmptyPlaceholder from "./EmptyPlaceholder";
 export {styles};
 
 const isSCrollingRef = React.createRef();
@@ -257,6 +258,9 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                                 return <TableRowComponent {...props} style={[getRowStyle(args),props.style]}/>
                             },
                             Table: VirtuosoTableComponent,
+                            EmptyPlaceholder : (props)=>{
+                                return <EmptyPlaceholder testID={testID+"_VirtuosoEmptyPlaceholder"} {...props} content={emptyContent}/>
+                            }
                         }}
                     />
                     {isNative ? <AbsoluteScrollView
@@ -334,20 +338,22 @@ TableComponent.popTypes = {
 
 TableComponent.displayName = "TableComponent";
 
-const TableComponentProvider = React.forwardRef(({children,renderCell,testID,withDatagridContext,getRowKey,filter,data,...props},ref)=>{
+const TableComponentProvider = React.forwardRef(({children,id,renderCell,testID,withDatagridContext,getRowKey,filter,data,...props},ref)=>{
     testID = props.testID = defaultStr(testID,"RN_TableComponent");
-    const prepatedColumns = usePrepareColumns(props);
+    const idRef = React.useRef(defaultStr(id,uniqid("virtuoso-table-list-id")));
+    id = idRef.current;
+    const prepatedColumns = usePrepareColumns({...props,id});
     const keyExtractor = typeof getRowKey =='function'? getRowKey : React.getKey;
     const items = React.useMemo(()=>{
         filter = typeof filter =='function'? filter : x=>true;
         return data.filter((i,...rest)=>isObj(i) && !!filter(i,...rest));
     },[data]);
     const getItem = (index)=>items[index]||null;
-    return <TableContext.Provider value={{...props,...prepatedColumns,getItem,getRowByIndex:getItem,testID,data,withDatagridContext,keyExtractor,
+    return <TableContext.Provider value={{...props,...prepatedColumns,id,getItem,getRowByIndex:getItem,testID,data,withDatagridContext,keyExtractor,
         renderCell,
         items
     }}>
-        <TableComponent {...props} ref={ref}/>
+        <TableComponent {...props} id={id} ref={ref}/>
     </TableContext.Provider>
 });
 TableComponentProvider.displayName = "TableComponentProvider";

package/src/context/Provider.js

@@ -85,6 +85,13 @@ const Provider = ({children,getTableData,navigation,components,convertFiltersToS
           get customCSS(){
              const prevCSS = defaultStr(typeof customCSS ==='function'? customCSS(theme) : customCSS);
              return `
+                #root {
+                  overflow:hidden!important;
+                  width : 100%!important;
+                  height : 100%important;
+                  left : 0!important;
+                  top : 0!important;
+                }
                 .virtuoso-table-component,
                 .virtuoso-table-component th,
                 .virtuoso-table-component tr,

package/src/index.js

@@ -28,7 +28,7 @@ import SimpleSelect from '$ecomponents/SimpleSelect';
 import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
 import { DialogProvider as FormDataDialogProvider } from '$eform/FormData';
 import {Portal } from 'react-native-paper';
-import {PortalProvider} from '$ecomponents/Portal';
+import {PortalProvider,CustomPortal} from '$ecomponents/Portal';
 import ErrorBoundaryProvider from "$ecomponents/ErrorBoundary/Provider";
 import notify, {notificationRef} from "$notify";
 import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
@@ -40,9 +40,6 @@ import StatusBar from "$ecomponents/StatusBar";
 import {Provider as PaperProvider } from 'react-native-paper';
 import FontIcon from "$ecomponents/Icon/Font";
 import useContext from "$econtext/hooks";
-import {GestureHandlerRootView} from "react-native-gesture-handler";
-import KeyboardAvoidingViewComponent from '$ecomponents/KeyboardAvoidingView';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 export * from "./context";
 
 let MAX_BACK_COUNT = 1;
@@ -256,59 +253,55 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount})
       onMountRef.current = true;
     }
   },[isLoaded])
-  const child = isLoaded ? <Navigation
-      initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
-      state = {state}
-      hasGetStarted = {hasGetStarted}
-      isInitialized = {isInitialized}
-      onGetStart = {(e)=>{
-        setState({...state,hasGetStarted:true})
-      }}
-  />: null;
+  const child = isLoaded ? <NavigationContainer 
+    ref={navigationRef}
+    initialState={initialState}
+    onStateChange={(state) =>{
+        setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
+    }
+  }
+  >
+        <Navigation
+          initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
+          state = {state}
+          hasGetStarted = {hasGetStarted}
+          isInitialized = {isInitialized}
+          onGetStart = {(e)=>{
+            setState({...state,hasGetStarted:true})
+          }}
+        />
+  </NavigationContainer>  : null;
   const content = isLoaded ? typeof render == 'function'? render({children:child,appConfig,config:appConfig}) : child : null;
   return <AuthProvider>
-      <NavigationContainer
-          ref={navigationRef}
-          initialState={initialState}
-          onStateChange={(state) =>{
-            if(!isLoaded) return;
-            setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
-          }}
-      >
-      <PaperProvider 
+        <PaperProvider 
           theme={theme}
           settings={{
             icon: (props) => {
               return <FontIcon {...props}/>
             },
           }}
-      >
-        <PortalProvider>
-          <Portal.Host>
+        >
+          <PortalProvider>
+            <ErrorBoundaryProvider/>  
             <PreloaderProvider/>   
-            <DialogProvider responsive/>
+            <DialogProvider responsive testID={"RN_MainAppDialogProvider"}/>
             <AlertProvider SimpleSelect={SimpleSelect}/>
             <FormDataDialogProvider/>  
             <BottomSheetProvider/>
             <DropdownAlert ref={notificationRef}/>
-            <ErrorBoundaryProvider/>
-            <GestureHandlerRootView style={{ flex: 1,flexGrow:1,flexShrink:1}} testID={"RN_GestureHandlerRootView"}>
-              <SafeAreaProvider testID={"RN_AppSafeAreaProvider"}>
+            <Portal.Host testID="RN_NativePaperPortalHost">
+              <ErrorBoundary>
+                <StatusBar/>
                 <SplashScreen isLoaded={isLoaded}>
-                    <ErrorBoundary>
-                      <StatusBar/>
-                      <PreferencesContext.Provider value={preferences}>
-                        {React.isValidElement(content) && content || child}
-                      </PreferencesContext.Provider>  
-                    </ErrorBoundary>
+                  <PreferencesContext.Provider value={preferences}>
+                    {React.isValidElement(content) && content || child}
+                  </PreferencesContext.Provider>  
                 </SplashScreen>
-              </SafeAreaProvider>
-            </GestureHandlerRootView>
-          </Portal.Host>
-        </PortalProvider>
+              </ErrorBoundary>
+            </Portal.Host>
+          </PortalProvider>
       </PaperProvider>
-    </NavigationContainer>
-  </AuthProvider>
+  </AuthProvider>;
 }
 
 export default App;

package/src/navigation/index.js

@@ -15,7 +15,8 @@ export * from "./utils";
  *  lorsque hasGetStarted est à false, celle-ci rend l'écran Start permettant de rendre le contenu GetStarted
 */
 export default function NavigationComponent (props){
-    let {state,hasGetStarted,onGetStart,initialRouteName,...rest} = props;
+    let {state,hasGetStarted,isLoading,onGetStart,initialRouteName,...rest} = props;
+    if(isLoading) return null;
     const {navigation:{screens}} = useContext();
     const allScreens = initScreens({Factory:Stack,screens,ModalFactory:Stack,filter:({name})=>{
         return true;

package/src/screens/Help/openLibraries.js

@@ -1 +1 @@
-module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.25.1","repository":{"type":"git","url":"git+https://github.com/borispipo/expo-ui.git"},"homepage":"https://github.com/borispipo/expo-ui#readme"}};
+module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.26.2","repository":{"type":"git","url":"git+https://github.com/borispipo/expo-ui.git"},"homepage":"https://github.com/borispipo/expo-ui#readme"},"@emotion/native":{"version":"11.11.0","url":"https://emotion.sh","license":"MIT"},"@emotion/react":{"version":"11.11.1","url":"https://github.com/emotion-js/emotion/tree/main/packages/react","license":"MIT"},"@expo/html-elements":{"version":"0.5.1","url":"https://github.com/expo/expo/tree/main/packages/html-elements","license":"MIT"},"@expo/metro-config":{"version":"0.10.7","url":"https://github.com/expo/expo.git","license":"MIT"},"@expo/vector-icons":{"version":"13.0.0","url":"https://expo.github.io/vector-icons","license":"MIT"},"@expo/webpack-config":{"version":"18.1.2","url":"https://github.com/expo/expo-cli.git","license":"MIT"},"@faker-js/faker":{"version":"8.0.2","url":"https://github.com/faker-js/faker.git","license":"MIT"},"@fto-consult/common":{"version":"3.28.4","url":"https://github.com/borispipo/common#readme","license":"ISC"},"@gorhom/portal":{"version":"1.0.14","url":"https://github.com/gorhom/react-native-portal#readme","license":"MIT"},"@pchmn/expo-material3-theme":{"version":"1.3.1","url":"https://github.com/pchmn/expo-material3-theme#readme","license":"MIT"},"@react-native-async-storage/async-storage":{"version":"1.18.2","url":"https://github.com/react-native-async-storage/async-storage#readme","license":"MIT"},"@react-native-community/datetimepicker":{"version":"7.2.0","url":"https://github.com/react-native-community/datetimepicker#readme","license":"MIT"},"@react-native-community/netinfo":{"version":"9.3.10","url":"https://github.com/react-native-netinfo/react-native-netinfo#readme","license":"MIT"},"@react-native/assets-registry":{"version":"0.72.0","url":"git@github.com:facebook/react-native.git","license":"MIT"},"@react-navigation/native":{"version":"6.1.7","url":"https://reactnavigation.org","license":"MIT"},"@react-navigation/native-stack":{"version":"6.9.13","url":"https://github.com/software-mansion/react-native-screens#readme","license":"MIT"},"@shopify/flash-list":{"version":"1.4.3","url":"https://shopify.github.io/flash-list/","license":"MIT"},"apexcharts":{"version":"3.41.1","url":"https://apexcharts.com","license":"MIT"},"babel-plugin-inline-dotenv":{"version":"1.7.0","url":"https://github.com/brysgo/babel-plugin-inline-dotenv#readme","license":"ISC"},"babel-plugin-module-resolver":{"version":"5.0.0","url":"https://github.com/tleunen/babel-plugin-module-resolver.git","license":"MIT"},"expo":{"version":"49.0.7","url":"https://github.com/expo/expo/tree/main/packages/expo","license":"MIT"},"expo-camera":{"version":"13.4.2","url":"https://docs.expo.dev/versions/latest/sdk/camera/","license":"MIT"},"expo-clipboard":{"version":"4.3.1","url":"https://docs.expo.dev/versions/latest/sdk/clipboard","license":"MIT"},"expo-font":{"version":"11.4.0","url":"https://docs.expo.dev/versions/latest/sdk/font/","license":"MIT"},"expo-image-picker":{"version":"14.3.2","url":"https://docs.expo.dev/versions/latest/sdk/imagepicker/","license":"MIT"},"expo-linking":{"version":"5.0.2","url":"https://docs.expo.dev/versions/latest/sdk/linking","license":"MIT"},"expo-sqlite":{"version":"11.3.2","url":"https://docs.expo.dev/versions/latest/sdk/sqlite/","license":"MIT"},"expo-status-bar":{"version":"1.6.0","url":"https://docs.expo.dev/versions/latest/sdk/status-bar/","license":"MIT"},"expo-system-ui":{"version":"2.4.0","url":"https://docs.expo.dev/versions/latest/sdk/system-ui","license":"MIT"},"expo-web-browser":{"version":"12.3.2","url":"https://docs.expo.dev/versions/latest/sdk/webbrowser/","license":"MIT"},"file-saver":{"version":"2.0.5","url":"https://github.com/eligrey/FileSaver.js#readme","license":"MIT"},"fs-extra":{"version":"11.1.1","url":"https://github.com/jprichardson/node-fs-extra","license":"MIT"},"google-libphonenumber":{"version":"3.2.33","url":"https://ruimarinho.github.io/google-libphonenumber/","license":"(MIT AND Apache-2.0)"},"htmlparser2-without-node-native":{"version":"3.9.2","url":"git://github.com/fb55/htmlparser2.git","license":"MIT"},"pdfmake":{"version":"0.2.7","url":"http://pdfmake.org","license":"MIT"},"process":{"version":"0.11.10","url":"git://github.com/shtylman/node-process.git","license":"MIT"},"prop-types":{"version":"15.8.1","url":"https://facebook.github.io/react/","license":"MIT"},"react":{"version":"18.2.0","url":"https://reactjs.org/","license":"MIT"},"react-content-loader":{"version":"6.2.1","url":"https://github.com/danilowoz/react-content-loader","license":"MIT"},"react-dom":{"version":"18.2.0","url":"https://reactjs.org/","license":"MIT"},"react-native":{"version":"0.72.3","license":"MIT"},"react-native-big-list":{"version":"1.6.1","url":"https://marcocesarato.github.io/react-native-big-list-docs/","license":"GPL-3.0-or-later"},"react-native-blob-util":{"version":"0.18.6","url":"https://github.com/RonRadtke/react-native-blob-util","license":"MIT"},"react-native-gesture-handler":{"version":"2.12.1","url":"https://github.com/software-mansion/react-native-gesture-handler#readme","license":"MIT"},"react-native-iphone-x-helper":{"version":"1.3.1","url":"https://github.com/ptelad/react-native-iphone-x-helper#readme","license":"MIT"},"react-native-mime-types":{"version":"2.4.0","license":"MIT"},"react-native-paper":{"version":"5.10.1","url":"https://callstack.github.io/react-native-paper","license":"MIT"},"react-native-paper-dates":{"version":"0.18.14","url":"https://github.com/web-ridge/react-native-paper-dates#readme","license":"MIT"},"react-native-reanimated":{"version":"3.3.0","url":"https://github.com/software-mansion/react-native-reanimated#readme","license":"MIT"},"react-native-safe-area-context":{"version":"4.6.3","url":"https://github.com/th3rdwave/react-native-safe-area-context#readme","license":"MIT"},"react-native-screens":{"version":"3.22.1","url":"https://github.com/software-mansion/react-native-screens#readme","license":"MIT"},"react-native-svg":{"version":"13.9.0","url":"https://github.com/react-native-community/react-native-svg","license":"MIT"},"react-native-web":{"version":"0.19.7","url":"git://github.com/necolas/react-native-web.git","license":"MIT"},"react-native-webview":{"version":"13.2.2","url":"https://github.com/react-native-webview/react-native-webview#readme","license":"MIT"},"react-virtuoso":{"version":"4.5.0","url":"https://virtuoso.dev/","license":"MIT"},"sharp-cli":{"version":"4.1.1","url":"https://github.com/vseventer/sharp-cli","license":"MIT"},"tippy.js":{"version":"6.3.7","url":"https://atomiks.github.io/tippyjs/","license":"MIT"},"uninstall":{"version":"0.0.0","license":"MIT"},"websql":{"version":"2.0.3","url":"git://github.com/nolanlawson/node-websql.git","license":"Apache-2.0"},"xlsx":{"version":"0.18.5","url":"https://sheetjs.com/","license":"Apache-2.0"}};

package/src/components/Icon/IconButton.js

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-} from 'react-native';
-import {TouchableRipple} from "react-native-paper";
-import CrossFadeIcon from 'react-native-paper/lib/commonjs/components/CrossFadeIcon';
-import Surface from '$ecomponents/Surface';
-import { IconButton } from 'react-native-paper';
-import PropTypes from "prop-types";
-import theme,{StyleProp,Colors} from "$theme";
-import {defaultStr} from "$cutils";
-
-const IconButtonComponent = ({
-  icon,
-  iconColor: customIconColor,
-  containerColor,
-  size = 24,
-  accessibilityLabel,
-  disabled,
-  onPress,
-  selected = false,
-  animated = false,
-  mode,
-  containerProps,
-  style,
-  testID,
-  color,
-  ...rest
-}) => {
-  const IconComponent = animated ? CrossFadeIcon : IconButton;
-  testID = defaultStr(testID,"RN_IconButtonComponent");
-  containerProps = defaultObj(containerProps);
-  const containerStyle = StyleSheet.flatten(containerProps.style) || {};
-  const backgroundColor = Colors.isValid(containerColor)? containerColor : Colors.isValid(containerStyle.color) ? containerStyle.color : undefined;
-  const iconColor = Colors.isValid(customIconColor)? customIconColor : Colors.isValid(color)? color : theme.colors.text;
-  const borderColor = theme.colors.outline || theme.colors.divider;
-  const rippleColor = Colors.setAlpha(iconColor,0.32);
-  const buttonSize =  size * 1.5;
-  const borderStyles = {
-    borderWidth: 0,
-    borderRadius: buttonSize / 2,
-    borderColor,
-  };
-
-  return (
-    <Surface
-      testID = {testID+"_Container"}
-      style={
-        [
-          {
-            backgroundColor,
-            width: buttonSize,
-            height: buttonSize,
-          },
-          styles.container,
-          borderStyles,
-          disabled && styles.disabled,
-          style,
-        ]
-      }
-    >
-      <TouchableRipple
-        borderless
-        centered
-        onPress={onPress}
-        rippleColor={rippleColor}
-        accessibilityLabel={accessibilityLabel}
-        style={styles.touchable}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
-        accessibilityComponentType="button"
-        role="button"
-        accessibilityState={{ disabled }}
-        disabled={disabled}
-        hitSlop={
-          TouchableRipple.supported
-            ? { top: 10, left: 10, bottom: 10, right: 10 }
-            : { top: 6, left: 6, bottom: 6, right: 6 }
-        }
-        {...rest}
-        testID = {testID}
-      >
-        <IconComponent testID={testID+"_Icon"} color={iconColor} source={icon} size={size} />
-      </TouchableRipple>
-    </Surface>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    margin: 6,
-    elevation: 0,
-  },
-  touchable: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  disabled: {
-    opacity: 0.32,
-  },
-});
-
-IconButtonComponent.propTypes = {
-    /**
-   * Icon to display.
-   */
-  icon: PropTypes.oneOfType(PropTypes.string,PropTypes.object),
-  /**
-   * @supported Available in v5.x
-   * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
-   */
-  mode : PropTypes.oneOf([
-    'outlined','contained' ,'contained-tonal'
-  ]),
-  /**
-   * @renamed Renamed from 'color' to 'iconColor' in v5.x
-   * Color of the icon.
-   */
-  iconColor: PropTypes.string,
-  /**
-   * @supported Available in v5.x
-   * Background color of the icon container.
-   */
-  containerColor: PropTypes.string,
-  /**
-   * @supported Available in v5.x
-   * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
-   */
-  selected: PropTypes.bool,
-  /**
-   * Size of the icon.
-   */
-  size : PropTypes.number,
-  /**
-   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Whether an icon change is animated.
-   */
-  animated: PropTypes.bool,
-  /**
-   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel: PropTypes.string,
-  /**
-   * Function to execute on press.
-   */
-  onPress : PropTypes.func,//(e: GestureResponderEvent) => void;
-  style : StyleProp,
-  ref : PropTypes.object,
-}
-export default theme.withStyles(IconButtonComponent,{displayName:"IconButtonComponent"});