@fto-consult/expo-ui 8.13.4 → 8.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.13.4",
+  "version": "8.14.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",

package/src/App.js

@@ -13,8 +13,8 @@ import App from "./AppEntry";
  * }
  */
 
-export default function ExpoUIAppEntryProvider({children,init,...rest}){
+export default function ExpoUIAppEntryProvider({children,withSplashScreen,init,...rest}){
     return <Provider {...rest}>
-        <App init={init} children={children}/>
+        <App withSplashScreen = {withSplashScreen} init={init} children={children}/>
     </Provider>
 }

package/src/AppEntry/index.js

@@ -59,7 +59,7 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
  *  initialRouteName : la route initiale par défaut
  *  getStartedRouteName : la route par défaut de getStarted lorsque l'application est en mode getStarted, c'est à dire lorsque la fonction init renvoie une erreur (reject)
  */
-function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
+function App({init:initApp,initialRouteName:appInitialRouteName,children,withSplashScreen}) {
   AppStateService.init();
   const SplashScreenComponent = useAppComponent("SplashScreen");
   const {FontsIconsFilter,beforeExit,AppWrapper,preferences:appPreferences,navigation,getStartedRouteName,components:{MainProvider}} = useContext();
@@ -266,6 +266,8 @@ function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
         />
   </NavigationContainer>  : null;
   const content = isLoaded ? typeof children == 'function'? children({children:child,appConfig,config:appConfig}) : child : null;
+  const SplashComponent = withSplashScreen === false ? React.Fragment : SplashScreen;
+  const splashProps = withSplashScreen === false ? {} : {isLoaded,Component:SplashScreenComponent};
   return <SafeAreaProvider>
             <AppEntryRootView MainProvider={MainProvider} isInitialized={state.hasCallInitApp} isLoading={isLoading} hasGetStarted={hasGetStarted} isLoaded={isLoaded}>
                 <PaperProvider 
@@ -286,11 +288,11 @@ function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
                     <DropdownAlert ref={notificationRef}/>
                     <ErrorBoundary>
                       <StatusBar/>
-                      <SplashScreen Component={SplashScreenComponent} isLoaded={isLoaded}>
+                      <SplashComponent {...splashProps}>
                         <PreferencesContext.Provider value={preferences}>
-                          {React.isValidElement(content) && content || child}
+                          {isLoaded ? React.isValidElement(content) && content || child : null}
                         </PreferencesContext.Provider>  
-                      </SplashScreen>
+                      </SplashComponent>
                     </ErrorBoundary>
                   </Portal.Host>
               </PaperProvider>

package/src/components/SplashScreen/index.js

@@ -1,12 +1,14 @@
 /* @flow */
 /*** fork of https://www.npmjs.com/package/react-native-animated-splash-screen */
 import PropTypes from "prop-types"
-import * as React from "react"
+import React from "$react"
 import {Animated, StyleSheet } from "react-native";
 import View from "$ecomponents/View";
-import {isNativeMobile} from "$platform";
-import {defaultDecimal} from "$utils";
+import {isNativeMobile} from "$cplatform";
+import {defaultDecimal} from "$cutils";
 import {LogoProgress} from "$ecomponents/Logo";
+import { Portal } from "react-native-paper";
+import {defaultStr} from "$cutils";
 import styles, {
   _solidBackground,
   _staticBackground,
@@ -14,165 +16,101 @@ import styles, {
   _dynamicCustomComponentStyle,
   _dynamicImageBackground,
   _dynamicBackgroundOpacity,
-} from "./AnimatedSplash.style"
-const isNative = isNativeMobile();
-const Component = isNative? Animated.View : View;
+} from "./styles"
+import {useAppComponent} from "$econtext/hooks";
 
-class AnimatedSplash extends React.Component {
-  static defaultProps = {
-    isLoaded: false,
-  }
-
-  state = {
+const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,logoHeight,backgroundColor,imageBackgroundSource,imageBackgroundResizeMode,
+  testID})=>{
+  const [state,setState] = React.useState({
     animationDone: false,
-    loadingProgress: new Animated.Value(0)
-  }
-
-  componentDidUpdate(prevProps) {
-    const { isLoaded , duration, delay } = this.props
-    const { loadingProgress } = this.state
-
-    if (isLoaded && !prevProps.isLoaded) {
-      if(!isNativeMobile()){
-          this.setState({animationDone:true});
-      } else {
-        Animated.timing(loadingProgress, {
-            toValue: 100,
-            duration: duration || 1000,
-            delay: delay || 0,
-            useNativeDriver: true,
-        }).start(() => {
-            this.setState({
-              animationDone: true,
-            })
-        })
-      }
-    }
-  }
-
-  renderChildren() {
-    const { children, preload, isLoaded } = this.props
-    if (preload || preload == null) {
-      return children
-    } else {
-      if (isLoaded) {
-        return children
-      }
+    loadingProgress: new Animated.Value(0),
+  });
+  const { loadingProgress, animationDone} = state;
+  const prevIsLoaded = React.usePrevious(isLoaded); 
+  const timerRef = React.useRef(null);
+  React.useEffect(()=>{
+    if(isLoaded && !prevIsLoaded){
+      Animated.timing(loadingProgress, {
+          toValue: 100,
+          duration: duration || 100,
+          delay: delay || 0,
+          useNativeDriver: isNativeMobile(),
+      }).start(() => {
+          setState({
+            ...state,
+            animationDone:true,
+          })
+      })
+    } else if(isLoaded){
+       clearTimeout(timerRef.current);
+       timerRef.current = setTimeout(()=>{
+          if(isLoaded && !animationDone){
+            setState({...state,animationDone:true});
+          }
+          clearTimeout(timerRef.current);
+       },delay|2000);
     }
+  },[isLoaded,prevIsLoaded,animationDone]);
+  testID = defaultStr(testID,"RN_SplashscreenComponent")
+  logoWidth = defaultDecimal(logoWidth,150);
+  logoHeight = defaultDecimal(logoHeight,250);
+  const Component = useAppComponent("SplashScreen");
 
-    return null
+  const logoScale = {
+    transform: [
+      {
+        scale: loadingProgress.interpolate({
+          inputRange: [0, 10, 100],
+          outputRange: [1, 0.8, 10],
+        }),
+      },
+    ],
   }
 
-  render() {
-    const { loadingProgress, animationDone } = this.state
-    let {
-      logoWidth,
-      logoHeight,
-      backgroundColor,
-      imageBackgroundSource,
-      imageBackgroundResizeMode,
-      disableAppScale,
-      disableImageBackgroundAnimation,
-    } = this.props
-    logoWidth = defaultDecimal(logoWidth,150);
-    logoHeight = defaultDecimal(logoHeight,150);
-    const opacityClearToVisible = {
-      opacity: loadingProgress.interpolate({
-        inputRange: [0, 15, 30],
-        outputRange: [0, 0, 1],
-        extrapolate: "clamp",
-      }),
-    }
-
-    const imageScale = {
-      transform: [
-        {
-          scale: loadingProgress.interpolate({
-            inputRange: [0, 10, 100],
-            outputRange: [1, 1, 65],
-          }),
-        },
-      ],
-    }
-
-    const logoScale = {
-      transform: [
-        {
-          scale: loadingProgress.interpolate({
-            inputRange: [0, 10, 100],
-            outputRange: [1, 0.8, 10],
-          }),
-        },
-      ],
-    }
-
-    const logoOpacity = {
-      opacity: loadingProgress.interpolate({
-        inputRange: [0, 20, 100],
-        outputRange: [1, 0, 0],
-        extrapolate: "clamp",
-      }),
-    }
-
-    const appScale = {
-      transform: [
-        {
-          scale: loadingProgress.interpolate({
-            inputRange: [0, 7, 100],
-            outputRange: [1.1, 1.05, 1],
-          }),
-        },
-      ],
-    }
-    
-    return (
-      <View style={[styles.container]}>
-        {!animationDone && <View style={StyleSheet.absoluteFill} />}
-        <View style={styles.containerGlue}>
-          {!animationDone && (
-            <Animated.View
-              style={_staticBackground(logoOpacity, backgroundColor)}
-            />
-          )}
-          {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
-            {this.renderChildren()}
-          </Component>}
-          {!animationDone && (
-            <Animated.Image
-              resizeMode={imageBackgroundResizeMode || "cover"}
-              source={imageBackgroundSource}
-              style={[disableImageBackgroundAnimation && _staticBackground(
-                logoOpacity,
-                backgroundColor
-              ), disableImageBackgroundAnimation && _dynamicImageBackground(
-                imageScale,
-                logoOpacity,
-                backgroundColor
-              )]}
-            />
-          )}
-          {!animationDone && (
-            <View style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+  const logoOpacity = {
+    opacity: loadingProgress.interpolate({
+      inputRange: [0, 20, 100],
+      outputRange: [1, 0, 0],
+      extrapolate: "clamp",
+    }),
+  }
+  if(isLoaded && animationDone){
+      return React.isValidElement(children)?children:null;
+  }
+  return <>
+      {!animationDone || !isLoaded ? <Portal>
+          <View style={[styles.container,{backgroundColor}]} testID={testID} id={testID}>
+            {<View style={[StyleSheet.absoluteFill,{backgroundColor}]} testID={testID+"_Animation"}/>}
+            <View style={styles.containerGlue} testID={testID+"_ContainerGlue"}>
               {(
                 <Animated.View
-                  style={_dynamicCustomComponentStyle(
-                        logoScale,
-                        logoOpacity,
-                        logoWidth,
-                        logoHeight
-                    )}>
-                  {<LogoProgress/>}
-                </Animated.View>
+                  style={_staticBackground(logoOpacity, backgroundColor)}
+                  testID={testID+"_AnimationDone"}
+                />
+              )}
+              {(
+                React.isComponent(Component)? <Component testID={testID+"_CustomSplashComponent"}/> : 
+                <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill,{backgroundColor}, styles.logoStyle]}>
+                    <Animated.View
+                      testID={testID+"_Logo"}
+                      style={_dynamicCustomComponentStyle(
+                            logoScale,
+                            logoOpacity,
+                            logoWidth,
+                            logoHeight
+                        )}>
+                      {<LogoProgress />}
+                    </Animated.View>
+                </View>
               )}
             </View>
-          )}
-        </View>
-      </View>
-    )
-  }
+          </View>
+      </Portal> : null}
+  </>
 }
 
-AnimatedSplash.propTypes = {
+
+SplashScreenComponent.propTypes = {
   preload: PropTypes.bool,
   logoWidth: PropTypes.number,
   children: PropTypes.element,
@@ -190,4 +128,5 @@ AnimatedSplash.propTypes = {
   delay: PropTypes.number,
 }
 
-export default AnimatedSplash
+SplashScreenComponent.displayName = "SplashScreenComponent";
+export default SplashScreenComponent;

package/src/components/SplashScreen/old/index.2.js

@@ -0,0 +1,193 @@
+/* @flow */
+/*** fork of https://www.npmjs.com/package/react-native-animated-splash-screen */
+import PropTypes from "prop-types"
+import * as React from "react"
+import {Animated, StyleSheet } from "react-native";
+import View from "$ecomponents/View";
+import {isNativeMobile} from "$platform";
+import {defaultDecimal} from "$utils";
+import {LogoProgress} from "$ecomponents/Logo";
+import styles, {
+  _solidBackground,
+  _staticBackground,
+  _dynamicLogoStyle,
+  _dynamicCustomComponentStyle,
+  _dynamicImageBackground,
+  _dynamicBackgroundOpacity,
+} from "./AnimatedSplash.style"
+const isNative = isNativeMobile();
+const Component = isNative? Animated.View : View;
+
+class AnimatedSplash extends React.Component {
+  static defaultProps = {
+    isLoaded: false,
+  }
+
+  state = {
+    animationDone: false,
+    loadingProgress: new Animated.Value(0)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isLoaded , duration, delay } = this.props
+    const { loadingProgress } = this.state
+
+    if (isLoaded && !prevProps.isLoaded) {
+      if(!isNativeMobile()){
+          this.setState({animationDone:true});
+      } else {
+        Animated.timing(loadingProgress, {
+            toValue: 100,
+            duration: duration || 1000,
+            delay: delay || 0,
+            useNativeDriver: true,
+        }).start(() => {
+            this.setState({
+              animationDone: true,
+            })
+        })
+      }
+    }
+  }
+
+  renderChildren() {
+    const { children, preload, isLoaded } = this.props
+    if (preload || preload == null) {
+      return children
+    } else {
+      if (isLoaded) {
+        return children
+      }
+    }
+
+    return null
+  }
+
+  render() {
+    const { loadingProgress, animationDone } = this.state
+    let {
+      logoWidth,
+      logoHeight,
+      backgroundColor,
+      imageBackgroundSource,
+      imageBackgroundResizeMode,
+      disableAppScale,
+      disableImageBackgroundAnimation,
+    } = this.props
+    logoWidth = defaultDecimal(logoWidth,150);
+    logoHeight = defaultDecimal(logoHeight,150);
+    const opacityClearToVisible = {
+      opacity: loadingProgress.interpolate({
+        inputRange: [0, 15, 30],
+        outputRange: [0, 0, 1],
+        extrapolate: "clamp",
+      }),
+    }
+
+    const imageScale = {
+      transform: [
+        {
+          scale: loadingProgress.interpolate({
+            inputRange: [0, 10, 100],
+            outputRange: [1, 1, 65],
+          }),
+        },
+      ],
+    }
+
+    const logoScale = {
+      transform: [
+        {
+          scale: loadingProgress.interpolate({
+            inputRange: [0, 10, 100],
+            outputRange: [1, 0.8, 10],
+          }),
+        },
+      ],
+    }
+
+    const logoOpacity = {
+      opacity: loadingProgress.interpolate({
+        inputRange: [0, 20, 100],
+        outputRange: [1, 0, 0],
+        extrapolate: "clamp",
+      }),
+    }
+
+    const appScale = {
+      transform: [
+        {
+          scale: loadingProgress.interpolate({
+            inputRange: [0, 7, 100],
+            outputRange: [1.1, 1.05, 1],
+          }),
+        },
+      ],
+    }
+    
+    return (
+      <View style={[styles.container]}>
+        {!animationDone && <View style={StyleSheet.absoluteFill} />}
+        <View style={styles.containerGlue}>
+          {!animationDone && (
+            <Animated.View
+              style={_staticBackground(logoOpacity, backgroundColor)}
+            />
+          )}
+          {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
+            {this.renderChildren()}
+          </Component>}
+          {!animationDone && (
+            <Animated.Image
+              resizeMode={imageBackgroundResizeMode || "cover"}
+              source={imageBackgroundSource}
+              style={[disableImageBackgroundAnimation && _staticBackground(
+                logoOpacity,
+                backgroundColor
+              ), disableImageBackgroundAnimation && _dynamicImageBackground(
+                imageScale,
+                logoOpacity,
+                backgroundColor
+              )]}
+            />
+          )}
+          {!animationDone && (
+            <View style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+              {(
+                <Animated.View
+                  style={_dynamicCustomComponentStyle(
+                        logoScale,
+                        logoOpacity,
+                        logoWidth,
+                        logoHeight
+                    )}>
+                  {<LogoProgress/>}
+                </Animated.View>
+              )}
+            </View>
+          )}
+        </View>
+      </View>
+    )
+  }
+}
+
+AnimatedSplash.propTypes = {
+  preload: PropTypes.bool,
+  logoWidth: PropTypes.number,
+  children: PropTypes.element,
+  logoHeight: PropTypes.number,
+  backgroundColor: PropTypes.string,
+  isLoaded: PropTypes.bool.isRequired,
+  disableBackgroundImage: PropTypes.bool,
+  logoImage: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]),
+  disableAppScale: PropTypes.bool,
+  duration: PropTypes.number,
+  delay: PropTypes.number,
+}
+
+export default AnimatedSplash

package/src/components/SplashScreen/index.web.js

@@ -1,132 +0,0 @@
-/* @flow */
-/*** fork of https://www.npmjs.com/package/react-native-animated-splash-screen */
-import PropTypes from "prop-types"
-import React from "$react"
-import {Animated, StyleSheet } from "react-native";
-import View from "$ecomponents/View";
-import {isNativeMobile} from "$cplatform";
-import {defaultDecimal} from "$cutils";
-import {LogoProgress} from "$ecomponents/Logo";
-import { Portal } from "react-native-paper";
-import {defaultStr} from "$cutils";
-import styles, {
-  _solidBackground,
-  _staticBackground,
-  _dynamicLogoStyle,
-  _dynamicCustomComponentStyle,
-  _dynamicImageBackground,
-  _dynamicBackgroundOpacity,
-} from "./styles"
-import {useAppComponent} from "$econtext/hooks";
-
-const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,logoHeight,backgroundColor,imageBackgroundSource,imageBackgroundResizeMode,
-  testID})=>{
-  const [state,setState] = React.useState({
-    animationDone: false,
-    loadingProgress: new Animated.Value(0),
-  });
-  const { loadingProgress, animationDone} = state;
-  const prevIsLoaded = React.usePrevious(isLoaded); 
-  const timerRef = React.useRef(null);
-  React.useEffect(()=>{
-    if(isLoaded && !prevIsLoaded){
-      Animated.timing(loadingProgress, {
-          toValue: 100,
-          duration: duration || 100,
-          delay: delay || 0,
-          useNativeDriver: isNativeMobile(),
-      }).start(() => {
-          setState({
-            ...state,
-            animationDone:true,
-          })
-      })
-    } else if(isLoaded){
-       clearTimeout(timerRef.current);
-       timerRef.current = setTimeout(()=>{
-          if(isLoaded && !animationDone){
-            setState({...state,animationDone:true});
-          }
-          clearTimeout(timerRef.current);
-       },delay|2000);
-    }
-  },[isLoaded,prevIsLoaded,animationDone]);
-  testID = defaultStr(testID,"RN_SplashscreenComponent")
-  logoWidth = defaultDecimal(logoWidth,150);
-  logoHeight = defaultDecimal(logoHeight,250);
-  const Component = useAppComponent("SplashScreen");
-
-  const logoScale = {
-    transform: [
-      {
-        scale: loadingProgress.interpolate({
-          inputRange: [0, 10, 100],
-          outputRange: [1, 0.8, 10],
-        }),
-      },
-    ],
-  }
-
-  const logoOpacity = {
-    opacity: loadingProgress.interpolate({
-      inputRange: [0, 20, 100],
-      outputRange: [1, 0, 0],
-      extrapolate: "clamp",
-    }),
-  }
-  if(isLoaded && animationDone){
-      return React.isValidElement(children)?children:null;
-  }
-  return <>
-      {!animationDone || !isLoaded ? <Portal>
-          <View style={[styles.container,{backgroundColor}]} testID={testID} id={testID}>
-            {<View style={[StyleSheet.absoluteFill,{backgroundColor}]} testID={testID+"_Animation"}/>}
-            <View style={styles.containerGlue} testID={testID+"_ContainerGlue"}>
-              {(
-                <Animated.View
-                  style={_staticBackground(logoOpacity, backgroundColor)}
-                  testID={testID+"_AnimationDone"}
-                />
-              )}
-              {(
-                React.isComponent(Component)? <Component testID={testID+"_CustomSplashComponent"}/> : 
-                <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill,{backgroundColor}, styles.logoStyle]}>
-                    <Animated.View
-                      testID={testID+"_Logo"}
-                      style={_dynamicCustomComponentStyle(
-                            logoScale,
-                            logoOpacity,
-                            logoWidth,
-                            logoHeight
-                        )}>
-                      {<LogoProgress />}
-                    </Animated.View>
-                </View>
-              )}
-            </View>
-          </View>
-      </Portal> : null}
-  </>
-}
-
-
-SplashScreenComponent.propTypes = {
-  preload: PropTypes.bool,
-  logoWidth: PropTypes.number,
-  children: PropTypes.element,
-  logoHeight: PropTypes.number,
-  backgroundColor: PropTypes.string,
-  isLoaded: PropTypes.bool.isRequired,
-  disableBackgroundImage: PropTypes.bool,
-  logoImage: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.object,
-  ]),
-  disableAppScale: PropTypes.bool,
-  duration: PropTypes.number,
-  delay: PropTypes.number,
-}
-
-SplashScreenComponent.displayName = "SplashScreenComponent";
-export default SplashScreenComponent;