@fto-consult/expo-ui 8.12.7 → 8.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.12.7",
+  "version": "8.13.1",
   "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/AnimatedSplash.style.js

@@ -0,0 +1,75 @@
+import { StyleSheet, Dimensions } from "react-native"
+
+const { width, height } = Dimensions.get("screen")
+
+export const _staticBackground = (logoOpacity, backgroundColor) => [
+  logoOpacity,
+  StyleSheet.absoluteFill,
+  { backgroundColor: backgroundColor || null },
+]
+
+export const _dynamicImageBackground = (
+  imageScale,
+  logoOpacity,
+  backgroundColor
+) => [
+  imageScale,
+  logoOpacity,
+  {
+    ...StyleSheet.absoluteFill,
+    width,
+    height,
+    top: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    tintColor: backgroundColor || null,
+  },
+]
+
+export const _dynamicLogoStyle = (
+  logoScale,
+  logoOpacity,
+  logoWidth,
+  logoHeight
+) => [
+  logoScale,
+  logoOpacity,
+  {
+    width: logoWidth || 150,
+    height: logoHeight || 150,
+  },
+]
+
+export const _dynamicCustomComponentStyle = (
+  logoScale,
+  logoOpacity,
+  logoWidth,
+  logoHeight
+) => [
+  logoScale,
+  logoOpacity,
+  {
+    width: logoWidth || 150,
+    height: logoHeight || 150,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+]
+
+export default {
+  container: {
+    flex: 1,
+  },
+  containerGlue: {
+    flex: 1,
+    alignContent: "center",
+    justifyContent: "center",
+  },
+  flex: {
+    flex: 1,
+  },
+  logoStyle: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+}

package/src/components/SplashScreen/index.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.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;