pytech-ui 1.0.31 → 1.0.32

package/android/build.gradle

@@ -35,6 +35,7 @@ dependencies {
   implementation 'androidx.compose.foundation:foundation-android:1.10.6'
   implementation 'androidx.compose.ui:ui-android:1.10.6'
   implementation 'androidx.compose.material3:material3-android:1.5.0-alpha17'
+  implementation 'androidx.navigation:navigation-compose:2.10.2'
   if (findProject(':expo-ui') != null) {
     implementation project(':expo-ui')
   } else {

package/android/src/main/java/expo/modules/pytechui/Navigation/NavigationWrapperView.kt

@@ -0,0 +1,80 @@
+package expo.modules.pytechui.navigation
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.pytechui.findChildBySlotName
+import expo.modules.ui.SlotView
+
+object PytechRoutes {
+  const val SCREEN_A = "screen_A"
+  const val SCREEN_B = "screen_B"
+}
+
+/**
+ * Referencia global al NavController del wrapper activo.
+ * Se setea al montar `NavigationWrapperView` y se limpia al desmontarlo.
+ * Debe usarse sólo desde el hilo principal.
+ */
+object PytechNavigation {
+  var navController: NavHostController? = null
+    internal set
+
+  fun navigate(route: String) {
+    navController?.navigate(route)
+  }
+
+  fun goBack(): Boolean = navController?.popBackStack() ?: false
+}
+
+/** Disponible para cualquier composable renderizado dentro del wrapper. */
+val LocalPytechNavController = staticCompositionLocalOf<NavHostController?> { null }
+
+data class NavigationWrapperProps(
+  val startDestination: String = PytechRoutes.SCREEN_A,
+) : ComposeProps
+
+@Composable
+internal fun FunctionalComposableScope.NavigationWrapperViewContent(props: NavigationWrapperProps) {
+  val navController = rememberNavController()
+
+  DisposableEffect(navController) {
+    PytechNavigation.navController = navController
+    onDispose {
+      if (PytechNavigation.navController === navController) {
+        PytechNavigation.navController = null
+      }
+    }
+  }
+
+  val screenA = findChildBySlotName(PytechRoutes.SCREEN_A)
+  val screenB = findChildBySlotName(PytechRoutes.SCREEN_B)
+
+  CompositionLocalProvider(LocalPytechNavController provides navController) {
+    NavHost(
+      navController = navController,
+      startDestination = props.startDestination,
+      modifier = Modifier.fillMaxSize(),
+    ) {
+      composable(PytechRoutes.SCREEN_A) { RenderScreen(screenA) }
+      composable(PytechRoutes.SCREEN_B) { RenderScreen(screenB) }
+    }
+  }
+}
+
+@Composable
+private fun FunctionalComposableScope.RenderScreen(slot: SlotView?) {
+  slot ?: return
+  with(composableScope) {
+    with(slot) { Content() }
+  }
+}

package/android/src/main/java/expo/modules/pytechui/PytechUiModule.kt

@@ -26,6 +26,10 @@ import expo.modules.pytechui.menu.DropdownMenuContent
 import expo.modules.pytechui.menu.DropdownMenuProps
 import expo.modules.pytechui.gradient.GradientProps
 import expo.modules.pytechui.gradient.GradientViewContent
+import expo.modules.pytechui.navigation.NavigationWrapperProps
+import expo.modules.pytechui.navigation.NavigationWrapperViewContent
+import expo.modules.pytechui.navigation.PytechNavigation
+import expo.modules.kotlin.functions.Queues
 import java.io.Serializable
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
@@ -59,6 +63,20 @@ class PytechUiModule : Module() {
 			TypographySlotBridge.slotTextStylePayload(slotName)
 		}
 
+		AsyncFunction("navigate") { route: String ->
+			PytechNavigation.navigate(route)
+		}.runOnQueue(Queues.MAIN)
+
+		AsyncFunction("goBack") {
+			PytechNavigation.goBack()
+		}.runOnQueue(Queues.MAIN)
+
+		ExpoUIView<NavigationWrapperProps>("NavigationWrapperView") {
+			Content { props ->
+				NavigationWrapperViewContent(props)
+			}
+		}
+
 		ExpoUIView<IconProps>("IconView") {
 			Content { props ->
 				IconViewContent(props)

package/build/jetpack-compose/components/Host.d.ts

@@ -1,3 +1,4 @@
-import { HostProps } from '@expo/ui/jetpack-compose';
-export declare const Host: ({ style, ...props }: HostProps) => import("react").JSX.Element;
-export { HostProps };
+import { HostProps as ExpoHostProps } from '@expo/ui/jetpack-compose';
+import { NavigationWrapperProps } from './NavigationWrapper';
+export type HostProps = ExpoHostProps & Partial<NavigationWrapperProps>;
+export declare const Host: ({ style, screenA, screenB, startDestination, ...props }: HostProps) => import("react").JSX.Element;

package/build/jetpack-compose/components/Host.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Host = void 0;
 const expo_1 = require("expo");
 const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const NavigationWrapper_1 = require("./NavigationWrapper");
 const ExtendedTheme = (0, expo_1.requireNativeView)('PytechUi', 'ExtendedTheme');
-const Host = ({ style, ...props }) => {
+const Host = ({ style, screenA, screenB, startDestination, ...props }) => {
+    const hasNavigation = screenA != null && screenB != null;
     return (<jetpack_compose_1.Host style={{ flex: 1, ...style }} {...props}>
-            <ExtendedTheme>{props.children}</ExtendedTheme>
+            <ExtendedTheme>
+                {hasNavigation ? (<NavigationWrapper_1.NavigationWrapper screenA={screenA} screenB={screenB} startDestination={startDestination}/>) : (props.children)}
+            </ExtendedTheme>
         </jetpack_compose_1.Host>);
 };
 exports.Host = Host;

package/build/jetpack-compose/components/NavigationButton.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '@expo/ui/jetpack-compose';
+import { NavigationRoute } from './NavigationWrapper';
+export type NavigationButtonProps = Omit<ButtonProps, 'onClick'> & {
+    route: NavigationRoute;
+    onClick?: (route: NavigationRoute) => void;
+};
+export declare const NavigationButton: ({ route, onClick, children, ...props }: NavigationButtonProps) => import("react").JSX.Element;

package/build/jetpack-compose/components/NavigationButton.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationButton = void 0;
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const NavigationWrapper_1 = require("./NavigationWrapper");
+const TextSlot_1 = require("./TextSlot");
+const NavigationButton = ({ route, onClick, children, ...props }) => {
+    const handleClick = () => {
+        onClick?.(route);
+        (0, NavigationWrapper_1.navigate)(route);
+    };
+    return (<jetpack_compose_1.Button {...props} onClick={handleClick}>
+			{typeof children === 'string' ? <TextSlot_1.Text>{children}</TextSlot_1.Text> : children}
+		</jetpack_compose_1.Button>);
+};
+exports.NavigationButton = NavigationButton;

package/build/jetpack-compose/components/NavigationWrapper.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type NavigationRoute = 'screen_A' | 'screen_B';
+export type NavigationWrapperProps = {
+    screenA: ReactNode;
+    screenB: ReactNode;
+    startDestination?: NavigationRoute;
+};
+export declare const navigate: (route: NavigationRoute) => Promise<void>;
+export declare const goBack: () => Promise<boolean>;
+export declare const NavigationWrapper: ({ screenA, screenB, startDestination }: NavigationWrapperProps) => import("react").JSX.Element;

package/build/jetpack-compose/components/NavigationWrapper.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationWrapper = exports.goBack = exports.navigate = void 0;
+const expo_1 = require("expo");
+const SlotNativeView = (0, expo_1.requireNativeView)('ExpoUI', 'SlotView');
+const NavigationWrapperNativeView = (0, expo_1.requireNativeView)('PytechUi', 'NavigationWrapperView');
+const Native = (0, expo_1.requireNativeModule)('PytechUi');
+const navigate = (route) => Native.navigate(route);
+exports.navigate = navigate;
+const goBack = () => Native.goBack();
+exports.goBack = goBack;
+const NavigationWrapper = ({ screenA, screenB, startDestination }) => (<NavigationWrapperNativeView startDestination={startDestination}>
+		<SlotNativeView slotName="screen_A">{screenA}</SlotNativeView>
+		<SlotNativeView slotName="screen_B">{screenB}</SlotNativeView>
+	</NavigationWrapperNativeView>);
+exports.NavigationWrapper = NavigationWrapper;

package/build/jetpack-compose/index.d.ts

@@ -10,6 +10,8 @@ export * from './components/IconSection';
 export * from './components/List';
 export * from './components/ListItem/index';
 export * from './components/Menu';
+export * from './components/NavigationWrapper';
+export * from './components/NavigationButton';
 export * from './components/PagePicker';
 export * from './components/PullToRefreshBox';
 export * from './components/Section';

package/build/jetpack-compose/index.js

@@ -26,6 +26,8 @@ __exportStar(require("./components/IconSection"), exports);
 __exportStar(require("./components/List"), exports);
 __exportStar(require("./components/ListItem/index"), exports);
 __exportStar(require("./components/Menu"), exports);
+__exportStar(require("./components/NavigationWrapper"), exports);
+__exportStar(require("./components/NavigationButton"), exports);
 __exportStar(require("./components/PagePicker"), exports);
 __exportStar(require("./components/PullToRefreshBox"), exports);
 __exportStar(require("./components/Section"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pytech-ui",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Librería de componentes de UI para Pytech",
   "keywords": [
     "react-native",