pytech-ui 1.0.17 → 1.0.23

package/android/src/main/java/expo/modules/myui/MyUiModule.kt

@@ -0,0 +1,168 @@
+package expo.modules.myui
+
+import okhttp3.OkHttpClient
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.records.recordFromMap
+
+import expo.modules.ui.ExpoUIView
+import expo.modules.ui.ModifierRegistry
+
+//ExtendedTheme
+import expo.modules.myui.theme.colors.ExtendedColorBridge
+
+//TypographySlot
+import expo.modules.myui.TypographySlot.TypographySlotBridge
+import expo.modules.myui.TypographySlot.TypographySlotProps
+import expo.modules.myui.TypographySlot.TypographySlotContent
+import expo.modules.myui.foreach.ForEachContent
+import expo.modules.myui.foreach.ForEachItemPressEvent
+import expo.modules.myui.foreach.ForEachProps
+import expo.modules.myui.ListItem.ListItemFromSlots
+import expo.modules.myui.ListItem.ListItemProps
+import expo.modules.myui.section.SectionHostProps
+import expo.modules.myui.section.SectionHostViewContent
+import expo.modules.myui.menu.DropdownMenuContent
+import expo.modules.myui.menu.DropdownMenuProps
+import expo.modules.myui.gradient.GradientProps
+import expo.modules.myui.gradient.GradientViewContent
+import java.io.Serializable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+
+class MyUiModule : Module() {
+	var okHttpClient: OkHttpClient? = null
+		private set
+		
+	override fun definition() = ModuleDefinition {
+		Name("MyUi")
+
+		OnCreate {
+			okHttpClient = OkHttpClient.Builder().build()
+			registerModifiers()
+		}
+	  
+		OnDestroy {
+			okHttpClient?.dispatcher?.executorService?.shutdown()
+			okHttpClient?.connectionPool?.evictAll()
+			okHttpClient?.cache?.close()
+			okHttpClient = null
+		}
+
+		Function("getExtendedColor") { name: String, scheme: String ->
+			val context = appContext.reactContext ?: throw IllegalStateException("React context is not available")
+			ExtendedColorBridge.extendedColorHex(name, scheme, context)
+		}
+
+		Function("getSlotTextStyle") { slotName: String ->
+			TypographySlotBridge.slotTextStylePayload(slotName)
+		}
+
+		ExpoUIView<IconProps>("IconView") {
+			Content { props ->
+				IconViewContent(props)
+			}
+		}
+
+		ExpoUIView<GradientProps>("GradientView") {
+			Content { props ->
+				GradientViewContent(props)
+			}
+		}
+
+		ExpoUIView<SearchBarProps>("SearchBarView") {
+			val onDismiss by Event<SearchBarDismissEvent>()
+			val onChangeText by Event<SearchBarChangeTextEvent>()
+
+			Content { props ->
+				SearchBarViewContent(
+					props,
+					onDismiss = { onDismiss(SearchBarDismissEvent()) },
+					onChangeText = { text ->
+						onChangeText(SearchBarChangeTextEvent(text))
+					},
+				)
+			}
+		}
+
+		ExpoUIView<ExtendedThemeProps>("ExtendedTheme") {
+			Content { props ->
+				ExtendedThemeViewContent(props)
+			}
+		}
+
+		ExpoUIView<TypographySlotProps>("TypographySlotView") {
+			Content { props ->
+				TypographySlotContent(props)
+			}
+		}
+
+		ExpoUIView<TextFieldProps>("TextFieldView") {
+			val focus by AsyncFunction()
+			val blur by AsyncFunction()
+			val onValueChange by Event<TextFieldValueChangeEvent>()
+			val onFocusChanged by Event<TextFieldFocusChangeEvent>()
+			val onKeyboardAction by Event<KeyboardActionEvent>()
+		  
+			Content { props ->
+				TextFieldContent(
+					props,
+					focus,
+					blur,
+					onValueChange = { value ->
+						onValueChange(TextFieldValueChangeEvent(value))
+					},
+					onFocusChanged = { focused ->
+						onFocusChanged(TextFieldFocusChangeEvent(focused))
+					},
+					onKeyboardActionTriggered = { event ->
+						onKeyboardAction(event)
+					}
+				)
+			}
+		}
+
+		ExpoUIView<DialogProps>("DialogView") {
+			val onDismissRequest by Event<DialogDismissEvent>()
+
+			Content { props ->
+				DialogContent(
+					props,
+					onDismissRequest = { onDismissRequest(DialogDismissEvent()) },
+				)
+			}
+		}
+
+		ExpoUIView<DropdownMenuProps>("DropdownMenuView") {
+			val onDismissRequest by Event<Unit>()
+
+			Content { props ->
+				DropdownMenuContent(props) { onDismissRequest(Unit) }
+			}
+		}
+
+		ExpoUIView<ForEachProps>("ForEach") {
+			val onItemPress by Event<ForEachItemPressEvent>()
+
+			Content { props ->
+				ForEachContent(props) { id ->
+					onItemPress(ForEachItemPressEvent(id))
+				}
+			}
+		}
+
+		ExpoUIView<ListItemProps>("ListItemView") {
+			Content { props ->
+				ListItemFromSlots(props)
+			}
+		}
+
+		ExpoUIView<SectionHostProps>("SectionHostView") {
+			Content { props ->
+				SectionHostViewContent(props)
+			}
+		}
+		
+	}
+}

package/android/src/main/java/expo/modules/myui/SearchBar.kt

@@ -0,0 +1,213 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package expo.modules.myui
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.relocation.BringIntoViewRequester
+import androidx.compose.foundation.relocation.bringIntoViewRequester
+import androidx.compose.foundation.text.input.rememberTextFieldState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.ArrowBackIosNew
+import androidx.compose.material.icons.rounded.Clear
+import androidx.compose.material.icons.rounded.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.ui.ModifierList
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+import expo.modules.myui.theme.tokens.SearchBarTokens
+import expo.modules.myui.theme.ExtendedTheme
+
+import java.io.Serializable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+
+
+data class SearchBarDismissEvent(
+	@Field val dismissed: Boolean = true,
+) : Record, Serializable
+
+data class SearchBarChangeTextEvent(
+	@Field val text: String = "",
+) : Record, Serializable
+
+
+/**
+ * Campo de búsqueda con look de chip M3 (sin expandir a pantalla completa).
+ */
+data class SearchBarProps(
+	val placeholder: String? = null,
+	val autoFocus: Boolean = false,
+	/** Si es true, muestra ← clicable; si es false, muestra lupa decorativa. */
+	val showBackButton: Boolean = true,
+	val modifiers: ModifierList = emptyList(),
+) : ComposeProps
+
+@Composable
+internal fun FunctionalComposableScope.SearchBarViewContent(
+	props: SearchBarProps,
+	onDismiss: () -> Unit = {},
+	onChangeText: (String) -> Unit = {},
+) {
+	val textFieldState = rememberTextFieldState()
+	val focusRequester = remember { FocusRequester() }
+	val bringIntoViewRequester = remember { BringIntoViewRequester() }
+	val scope = rememberCoroutineScope()
+	val focusManager = LocalFocusManager.current
+	var isFocused by remember { mutableStateOf(false) }
+
+	val dismiss = {
+		focusManager.clearFocus()
+		onChangeText("")
+		onDismiss()
+	}
+
+	if (props.autoFocus) {
+		LaunchedEffect(Unit) {
+			delay(150)
+			runCatching { focusRequester.requestFocus() }
+		}
+	}
+
+	BackHandler(enabled = props.showBackButton && isFocused) {
+		dismiss()
+	}
+
+	LaunchedEffect(textFieldState) {
+		try {
+			snapshotFlow { textFieldState.text.toString() }.collect { text ->
+				onChangeText(text)
+			}
+		} finally {
+			onChangeText("")
+		}
+	}
+
+	val labelColor = ExtendedTheme.colorScheme.label
+	val placeholderColor = ExtendedTheme.colorScheme.placeholderText
+	val fieldTextStyle = LocalTextStyle.current
+
+	Surface(
+		modifier = Modifier
+			.fillMaxWidth()
+			.height(SearchBarTokens.ContainerHeight),
+		shape = SearchBarDefaults.inputFieldShape,
+		color = ExtendedTheme.colorScheme.secondarySystemGroupedBackground,
+
+	) {
+		SearchBarDefaults.InputField(
+			state = textFieldState,
+			onSearch = { focusManager.clearFocus() },
+			expanded = false,
+			onExpandedChange = { /* nunca expandir */ },
+			textStyle = fieldTextStyle,
+			placeholder = {
+				val text = props.placeholder
+				if (!text.isNullOrBlank()) {
+					Text(
+						text = text,
+						style = fieldTextStyle,
+						color = placeholderColor,
+					)
+				}
+			},
+			leadingIcon = {
+				if (props.showBackButton) {
+					IconButton(
+						onClick = dismiss,
+					) {
+						Icon(
+							imageVector = Icons.Rounded.ArrowBackIosNew,
+							contentDescription = "Volver",
+							tint = labelColor,
+							modifier = Modifier.size(20.dp),
+						)
+					}
+				} else {
+					Icon(
+						imageVector = Icons.Rounded.Search,
+						contentDescription = "Buscar",
+						tint = labelColor,
+						modifier = Modifier.size(24.dp),
+					)
+				}
+			},
+			trailingIcon = {
+				if (textFieldState.text.isNotEmpty()) {
+					IconButton(
+						onClick = {
+							textFieldState.edit {
+								replace(0, length, "")
+							}
+						}
+					) {
+						Icon(
+							imageVector = Icons.Rounded.Clear,
+							contentDescription = "Borrar",
+							tint = labelColor,
+							modifier = Modifier.size(24.dp),
+						)
+					}
+				}
+			},
+			modifier = Modifier
+				.fillMaxWidth()
+				.focusRequester(focusRequester)
+				.bringIntoViewRequester(bringIntoViewRequester)
+				.onFocusChanged { focusState ->
+					isFocused = focusState.isFocused
+					if (focusState.isFocused) {
+						scope.launch {
+							delay(100)
+							bringIntoViewRequester.bringIntoView()
+						}
+					}
+				},
+			shape = SearchBarDefaults.inputFieldShape,
+			colors = SearchBarDefaults.inputFieldColors(
+				focusedTextColor = labelColor,
+				unfocusedTextColor = labelColor,
+				focusedPlaceholderColor = placeholderColor,
+				unfocusedPlaceholderColor = placeholderColor,
+				focusedLeadingIconColor = labelColor,
+				unfocusedLeadingIconColor = labelColor,
+				focusedTrailingIconColor = labelColor,
+				unfocusedTrailingIconColor = labelColor,
+				cursorColor = ExtendedTheme.colorScheme.systemBlue,
+				focusedContainerColor = Color.Transparent,
+				unfocusedContainerColor = Color.Transparent,
+				disabledContainerColor = Color.Transparent,
+			),
+		)
+	}
+}

package/android/src/main/java/expo/modules/myui/Section/SectionHost.kt

@@ -0,0 +1,81 @@
+package expo.modules.myui.section
+
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.runtime.mutableIntStateOf
+import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.myui.ListItem.ListItemProps
+
+internal val SectionHostStateTag = Any()
+internal const val LIST_ITEM_VIEW_NAME = "ListItemView"
+
+data class SectionItemPosition(
+  val isFirst: Boolean,
+  val isLast: Boolean,
+)
+
+internal class SectionHostState {
+  val generation = mutableIntStateOf(0)
+  private val positions = mutableMapOf<ExpoComposeView<*>, SectionItemPosition>()
+
+  fun update(listItems: List<ExpoComposeView<*>>) {
+    positions.clear()
+    listItems.forEachIndexed { index, view ->
+      positions[view] = SectionItemPosition(
+        isFirst = index == 0,
+        isLast = index == listItems.lastIndex,
+      )
+    }
+    generation.intValue++
+  }
+
+  fun positionFor(view: ExpoComposeView<*>): SectionItemPosition? = positions[view]
+}
+
+internal fun isListItemView(view: ExpoComposeView<*>): Boolean {
+  if (view.props is ListItemProps) return true
+  return view.javaClass.name.contains(LIST_ITEM_VIEW_NAME, ignoreCase = true)
+}
+
+internal fun ViewGroup.collectListItemViewsDeep(): List<ExpoComposeView<*>> {
+  val result = mutableListOf<ExpoComposeView<*>>()
+  collectListItemViewsDeepInto(result)
+  return result
+}
+
+private fun ViewGroup.collectListItemViewsDeepInto(out: MutableList<ExpoComposeView<*>>) {
+  for (i in 0 until childCount) {
+    when (val child = getChildAt(i)) {
+      is ExpoComposeView<*> -> {
+        if (isListItemView(child)) {
+          out.add(child)
+        }
+        if (child is ViewGroup) {
+          child.collectListItemViewsDeepInto(out)
+        }
+      }
+      is ViewGroup -> child.collectListItemViewsDeepInto(out)
+    }
+  }
+}
+
+internal fun View.findSectionHostState(): SectionHostState? {
+  var current: View? = this
+  while (current != null) {
+    (current.tag as? SectionHostState)?.let { return it }
+    current = current.parent as? View
+  }
+  return null
+}
+
+internal fun ExpoComposeView<*>.sectionItemPosition(props: ListItemProps): SectionItemPosition? {
+  props.isFirst?.let { isFirst ->
+    props.isLast?.let { isLast ->
+      return SectionItemPosition(isFirst = isFirst, isLast = isLast)
+    }
+  }
+  val hostState = (this as View).findSectionHostState() ?: return null
+  @Suppress("UNUSED_VARIABLE")
+  val generation = hostState.generation.intValue
+  return hostState.positionFor(this)
+}

package/android/src/main/java/expo/modules/myui/Section/SectionHostView.kt

@@ -0,0 +1,65 @@
+package expo.modules.myui.section
+
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.myui.Children
+import expo.modules.myui.getHost
+import expo.modules.ui.ModifierList
+
+data class SectionHostProps(
+  val modifiers: ModifierList = emptyList(),
+) : ComposeProps
+
+@Composable
+internal fun FunctionalComposableScope.SectionHostViewContent(
+  @Suppress("UNUSED_PARAMETER") props: SectionHostProps,
+) {
+  val host = getHost() ?: return
+  val state = remember(host) {
+    SectionHostState().also { host.tag = it }
+  }
+  var childGeneration by remember(host) { mutableIntStateOf(host.childCount) }
+
+  DisposableEffect(host) {
+    fun syncPositions() {
+      val count = host.childCount
+      if (childGeneration != count) {
+        childGeneration = count
+      }
+      state.update(host.collectListItemViewsDeep())
+    }
+
+    syncPositions()
+
+    val hierarchyListener = object : ViewGroup.OnHierarchyChangeListener {
+      override fun onChildViewAdded(parent: View?, child: View?) = syncPositions()
+      override fun onChildViewRemoved(parent: View?, child: View?) = syncPositions()
+    }
+
+    val layoutListener = View.OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+      syncPositions()
+    }
+
+    host.setOnHierarchyChangeListener(hierarchyListener)
+    host.addOnLayoutChangeListener(layoutListener)
+
+    onDispose {
+      host.setOnHierarchyChangeListener(null)
+      host.removeOnLayoutChangeListener(layoutListener)
+      host.tag = null
+    }
+  }
+
+  @Suppress("UNUSED_VARIABLE")
+  val generation = state.generation.intValue
+
+  Children()
+}