@fto-consult/expo-ui 8.13.0 → 8.13.2

package/package.json

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

package/src/AppEntry/index.js

@@ -15,6 +15,7 @@ import {set as setSession,get as getSession} from "$session";
 import { showConfirm } from "$ecomponents/Dialog";
 import {close as closePreloader, isVisible as isPreloaderVisible} from "$epreloader";
 import SplashScreen from "$ecomponents/SplashScreen";
+import {useAppComponent} from "$econtext/hooks";
 import {decycle} from "$cutils/json";
 import { setIsInitialized} from "$capp/utils";
 import {isObj,defaultObj,defaultStr} from "$cutils";
@@ -60,6 +61,7 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
  */
 function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
   AppStateService.init();
+  const SplashScreenComponent = useAppComponent("SplashScreen");
   const {FontsIconsFilter,beforeExit,AppWrapper,preferences:appPreferences,navigation,getStartedRouteName,components:{MainProvider}} = useContext();
   const {containerProps} = navigation;
   const [initialState, setInitialState] = React.useState(undefined);
@@ -284,7 +286,7 @@ function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
                     <DropdownAlert ref={notificationRef}/>
                     <ErrorBoundary>
                       <StatusBar/>
-                      <SplashScreen isLoaded={isLoaded}>
+                      <SplashScreen Component={SplashScreenComponent} isLoaded={isLoaded}>
                         <PreferencesContext.Provider value={preferences}>
                           {React.isValidElement(content) && content || child}
                         </PreferencesContext.Provider>  

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

@@ -1,98 +1,138 @@
+//@see : https://www.npmjs.com/package/react-native-animated-splash-screen
+
 /* @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 * as React from "react"
+import { Animated, StatusBar, StyleSheet } from "react-native"
 import styles, {
-  _solidBackground,
   _staticBackground,
   _dynamicLogoStyle,
   _dynamicCustomComponentStyle,
   _dynamicImageBackground,
   _dynamicBackgroundOpacity,
-} from "./styles"
-import {useAppComponent} from "$econtext/hooks";
+} from "./AnimatedSplash.style";
+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";
 
-const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,logoHeight,backgroundColor,imageBackgroundSource,imageBackgroundResizeMode,
-  testID})=>{
-  const [state,setState] = React.useState({
+class AnimatedSplash extends React.Component {
+  static defaultProps = {
+    isLoaded: false,
+  }
+
+  state = {
     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){
+    showStatusBar: true,
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isLoaded , duration, delay } = this.props
+    const { loadingProgress } = this.state
+    if (isLoaded && !prevProps.isLoaded) {
       Animated.timing(loadingProgress, {
-          toValue: 100,
-          duration: duration || 100,
-          delay: delay || 0,
-          useNativeDriver: isNativeMobile(),
+        toValue: 100,
+        duration: duration || 1000,
+        delay: delay || 0,
+        useNativeDriver: isNativeMobile(),
       }).start(() => {
-          setState({
-            ...state,
-            animationDone:true,
-          })
+        this.setState({
+          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;
+  renderChildren() {
+    const { children, preload, isLoaded } = this.props
+    if (isLoaded) {
+        return children
+    }
+    return 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]}>
+
+  render() {
+    const { loadingProgress, animationDone } = this.state
+    const {
+      logoImage,
+      logoWidth,
+      logoHeight,
+      backgroundColor,
+      customComponent,
+      disableAppScale,
+    } = this.props
+
+    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],
+          }),
+        },
+      ],
+    }
+    const testID = defaultStr(testID,"RN_MainSplashScreen");
+    const {Component} = this.props;
+    return (
+      <View testID={testID} style={[styles.container]}>
+        {!animationDone && <View style={StyleSheet.absoluteFill} testID={`${testID}_AbsoluteFill`} />}
+        <View style={styles.containerGlue} testID={`${testID}_ContainerGlue`}>
+          {!animationDone && (
+            <Animated.View
+              testID={`${testID}_StaticBackground`}
+              style={_staticBackground(logoOpacity, backgroundColor)}
+            />
+          )}
+          <Animated.View testID={`${testID}_ChildrenContainer`} style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
+            {this.renderChildren()}
+          </Animated.View>
+          {!animationDone && (React.isComponent(Component)? <Component testID={testID+"_CustomSplashComponent"}/> : 
+            <View testID={`${testID}_AbsoluteFillContainer`} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+              {<View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill,{backgroundColor}, styles.logoStyle]}>
                     <Animated.View
-                      testID={testID+"_Logo"}
+                      testID={testID+"_LogoProgressContainer"}
                       style={_dynamicCustomComponentStyle(
                             logoScale,
                             logoOpacity,
@@ -101,32 +141,27 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
                         )}>
                       {<LogoProgress />}
                     </Animated.View>
-                </View>
-              )}
+                </View>}
             </View>
-          </View>
-      </Portal> : null}
-  </>
+          )}
+        </View>
+      </View>
+    )
+  }
 }
 
-
-SplashScreenComponent.propTypes = {
+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,
-  ]),
+  translucent: PropTypes.bool,
+  customComponent: PropTypes.element,
   disableAppScale: PropTypes.bool,
   duration: PropTypes.number,
   delay: PropTypes.number,
 }
 
-SplashScreenComponent.displayName = "SplashScreenComponent";
-export default SplashScreenComponent;
+export default AnimatedSplash

package/src/components/SplashScreen/index.js

@@ -1,22 +1,22 @@
-//@see : https://www.npmjs.com/package/react-native-animated-splash-screen
-
 /* @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, StatusBar, StyleSheet } from "react-native"
+import {Animated, StyleSheet } from "react-native";
+import View from "$components/View";
+import {isNativeMobile} from "$platform";
+import {defaultDecimal} from "$utils";
+import {LogoProgress} from "$components/Logo";
 import styles, {
+  _solidBackground,
   _staticBackground,
   _dynamicLogoStyle,
   _dynamicCustomComponentStyle,
   _dynamicImageBackground,
   _dynamicBackgroundOpacity,
-} from "./AnimatedSplash.style";
-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";
+} from "./AnimatedSplash.style"
+const isNative = isNativeMobile();
+const Component = isNative? Animated.View : View;
 
 class AnimatedSplash extends React.Component {
   static defaultProps = {
@@ -25,46 +25,57 @@ class AnimatedSplash extends React.Component {
 
   state = {
     animationDone: false,
-    loadingProgress: new Animated.Value(0),
-    showStatusBar: true,
+    loadingProgress: new Animated.Value(0)
   }
 
   componentDidUpdate(prevProps) {
     const { isLoaded , duration, delay } = this.props
     const { loadingProgress } = this.state
+
     if (isLoaded && !prevProps.isLoaded) {
-      Animated.timing(loadingProgress, {
-        toValue: 100,
-        duration: duration || 1000,
-        delay: delay || 0,
-        useNativeDriver: isNativeMobile(),
-      }).start(() => {
-        this.setState({
-          animationDone: true,
+      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 (isLoaded) {
+    if (preload || preload == null) {
+      return children
+    } else {
+      if (isLoaded) {
         return children
+      }
     }
+
     return null
   }
 
   render() {
     const { loadingProgress, animationDone } = this.state
-    const {
-      logoImage,
+    let {
       logoWidth,
       logoHeight,
       backgroundColor,
-      customComponent,
+      imageBackgroundSource,
+      imageBackgroundResizeMode,
       disableAppScale,
+      disableImageBackgroundAnimation,
     } = this.props
-
+    logoWidth = defaultDecimal(logoWidth,150);
+    logoHeight = defaultDecimal(logoHeight,150);
     const opacityClearToVisible = {
       opacity: loadingProgress.interpolate({
         inputRange: [0, 15, 30],
@@ -113,9 +124,9 @@ class AnimatedSplash extends React.Component {
         },
       ],
     }
-    const testID = defaultStr(testID,"RN_MainSplashScreen")
+    
     return (
-      <View testID={testID} style={[styles.container]}>
+      <View style={[styles.container]}>
         {!animationDone && <View style={StyleSheet.absoluteFill} />}
         <View style={styles.containerGlue}>
           {!animationDone && (
@@ -123,23 +134,36 @@ class AnimatedSplash extends React.Component {
               style={_staticBackground(logoOpacity, backgroundColor)}
             />
           )}
-          <Animated.View style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
+          {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
             {this.renderChildren()}
-          </Animated.View>
+          </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]}>
-              {<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>}
+              {(
+                <Animated.View
+                  style={_dynamicCustomComponentStyle(
+                        logoScale,
+                        logoOpacity,
+                        logoWidth,
+                        logoHeight
+                    )}>
+                  {<LogoProgress/>}
+                </Animated.View>
+              )}
             </View>
           )}
         </View>
@@ -155,8 +179,12 @@ AnimatedSplash.propTypes = {
   logoHeight: PropTypes.number,
   backgroundColor: PropTypes.string,
   isLoaded: PropTypes.bool.isRequired,
-  translucent: PropTypes.bool,
-  customComponent: PropTypes.element,
+  disableBackgroundImage: PropTypes.bool,
+  logoImage: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]),
   disableAppScale: PropTypes.bool,
   duration: PropTypes.number,
   delay: PropTypes.number,

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

@@ -0,0 +1,132 @@
+/* @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;