@admin-layout/gluestack-ui-mobile 7.3.8-alpha.8 → 8.5.3-alpha.0

package/src/components/with-interactions-lifecycle-managed.tsx

@@ -0,0 +1,105 @@
+import React, { ComponentType } from 'react';
+// import { Transition, Transitioning } from 'react-native-reanimated';
+import { Lifecycle } from '../containers/layout/Lifecycle';
+import { LifecyclePhase } from '@workbench-stack/core';
+import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
+import { useAfterInteractions } from '../hooks/use-after-interactions';
+import { Box, Spinner, SafeAreaView, Center } from '@gluestack-ui/themed';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { Platform } from 'react-native';
+
+const LoadingComponent = () => (
+    // <SafeAreaView flex={1}>
+    <Center flex={1} justifyContent={'center'} alignItems={'center'}>
+        {<Spinner color={'$blue500'} />}
+    </Center>
+    // </SafeAreaView>
+);
+
+const IntractionComponent = ({ children, interationTime }) => {
+    const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
+    React.useEffect(() => {
+        if (interationTime) setInteractionsTimeOut(interationTime);
+    }, [interationTime]);
+    console.log('interactionsComplete', interactionsComplete);
+    return (
+        <>
+            {interactionsComplete ? (
+                { children }
+            ) : (
+                <Animated.View
+                    style={{
+                        flex: 1,
+                        opacity: opacity.value,
+                        transform: [{ scale: opacity.value }],
+                    }}
+                >
+                    <LoadingComponent />
+                </Animated.View>
+            )}
+        </>
+    );
+};
+
+const IntractionWithLifeCycleComponent = ({ children, interationTime }) => {
+    const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
+    React.useEffect(() => {
+        if (interationTime) setInteractionsTimeOut(interationTime);
+    }, [interationTime]);
+    console.log('interactionsComplete', interactionsComplete);
+    return (
+        <>
+            {interactionsComplete ? (
+                <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+                    {children}
+                </Lifecycle>
+            ) : (
+                <Animated.View
+                    style={{
+                        flex: 1,
+                        opacity: opacity.value,
+                        transform: [{ scale: opacity.value }],
+                    }}
+                >
+                    <LoadingComponent />
+                </Animated.View>
+            )}
+        </>
+    );
+};
+
+export function withInteractionsManaged(component: any, interationTime?: number) {
+    return (
+        <>
+            {Platform.OS === 'ios' ? (
+                { component }
+            ) : (
+                <IntractionComponent interationTime={interationTime}>{component}</IntractionComponent>
+            )}
+        </>
+    );
+}
+
+export function withLifeCycleInteractionsManaged(component: any, interationTime?: number) {
+    return (
+        <>
+            {Platform.OS === 'ios' ? (
+                <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+                    {component}
+                </Lifecycle>
+            ) : (
+                <IntractionWithLifeCycleComponent interationTime={interationTime}>
+                    {component}
+                </IntractionWithLifeCycleComponent>
+            )}
+        </>
+    );
+}
+
+export function withLifeCycleManaged(component: any) {
+    return (
+        <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+            {component}
+        </Lifecycle>
+    );
+}

package/src/index.ts

@@ -5,11 +5,12 @@ import { settingsReducer } from './redux/settings';
 import { useAfterInteractions } from './hooks/use-after-interactions';
 import useIsReady from './hooks/useIsReady';
 import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
+import {getReplacedRouteConfig} from './utils/getReplacedRouteConfig'
 import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
 import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
 import i18next from './config/i18next';
 import * as reactI18Next from 'react-i18next';
-
+import layoutRouteConfig from './layout.json';
 
 export * from './components';
 export * from './containers/layout/Lifecycle';
@@ -25,6 +26,8 @@ export {
     useLayoutSetting,
     LayoutSettingProps,
     routeConfigKeyReplace,
+    getReplacedRouteConfig,
+    layoutRouteConfig,
     LayoutFeature,
     ProLayout,
     AppFeatures,

package/src/layout.json

@@ -0,0 +1,153 @@
+{
+    "side":{
+        "/":{ 
+            "key":"/",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name": "MainStack",
+            "props": {
+                "initialRouteName": "MainStack.Layout",
+                "screenOptions": {
+                    "headerShown": false
+                }
+            },
+            "path": "/",
+            "_pathPrefix": ""
+       },
+       "/main_drawer":{ 
+            "key":"main_drawer",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name":"Layout",
+            "props":{
+                "initialRouteName":"MainStack.Layout.Home",
+                "screenOptions":{
+                    "headerShown":true,
+                    "swipeEnabled":true
+                }
+            },
+            "path":"/main_drawer",
+            "_pathPrefix": "/"
+      }
+    },
+    "bottom":{
+        "/":{ 
+            "key":"/",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name": "MainStack",
+            "props": {
+                "initialRouteName": "MainStack.Layout",
+                "screenOptions": {
+                    "headerShown": false
+                }
+            },
+            "path": "/",
+            "_pathPrefix": ""
+       },
+       "/bottom_tab":{ 
+            "key":"bottom_tab",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name":"Layout",
+            "props":{
+                "initialRouteName":"MainStack.Layout.Home",
+                "screenOptions":{
+                    "headerShown": true,
+                    "title": "Home",
+                    "headerTitle": "Home"
+                }
+            },
+            "path":"/bottom_tab",
+            "_pathPrefix": "/"
+      }
+    },
+    "host-bottom":{
+        "/":{ 
+            "key":"/",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name": "MainStack",
+            "props": {
+                "initialRouteName": "MainStack.Layout",
+                "screenOptions": {
+                    "headerShown": false
+                }
+            },
+            "path": "/",
+            "_pathPrefix": ""
+        },
+        "/host_tab":{
+            "key":"host_tab",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name":"Layout",
+            "props":{
+                "initialRouteName":"MainStack.Layout.Home",
+                "screenOptions":{
+                    "headerShown": true,
+                    "title": "Home",
+                    "headerTitle": "Home"
+                }
+            },
+            "path":"/host_tab",
+            "_pathPrefix": "/"
+       }
+    },
+    "mixSide":{
+        "/":{ 
+            "key":"/",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name": "MainStack",
+            "props": {
+                "initialRouteName": "MainStack.Layout",
+                "screenOptions": {
+                    "headerShown": false
+                }
+            },
+            "path": "/",
+            "_pathPrefix": ""
+        },
+        "/main_drawer":{
+            "key":"main_drawer",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name":"Layout",
+            "props":{
+                "initialRouteName":"MainStack.Layout",
+                "screenOptions":{
+                    "headerShown":true,
+                    "swipeEnabled":true
+                }
+            },
+            "path":"/main_drawer",
+            "_pathPrefix": "/"
+        },
+        "/main_drawer/bottom_tab":{
+            "key":"bottom_tab",
+            "position": "MIDDLE",
+            "exact": false,
+            "container": {},
+            "name":"MainBottomTab",
+            "props":{
+                "initialRouteName":"MainStack.Layout.Home",
+                "screenOptions":{
+                    "headerShown": false,
+                    "title": "Home",
+                    "headerTitle": "Home"
+                }
+            },
+            "path":"/bottom_tab",
+            "_pathPrefix": "/"
+        }
+    }
+}