cilly/Banksia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: port skeleton search bar

Browse source
This commit is contained in:
LavaDesu 2025-04-14 13:35:26 +10:00
parent 0ffd415874
commit ad50e700d4
Signed by: cilly
GPG key ID: 6500251E087653C9
2 changed files with 123 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

30
composeApp/src/commonMain/kotlin/moe/lava/banksia/App.kt
View file

@ -1,26 +1,22 @@
package moe.lava.banksia
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SheetValue
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import banksia.composeapp.generated.resources.Res
import banksia.composeapp.generated.resources.compose_multiplatform
import moe.lava.banksia.native.maps.Maps
import moe.lava.banksia.ui.Searcher
import org.jetbrains.compose.ui.tooling.preview.Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -32,6 +28,10 @@ fun App() {
skipHiddenState = false
)
)
var searchTextState by remember { mutableStateOf("") }
var searchExpandedState by remember { mutableStateOf(false) }
MaterialTheme {
BottomSheetScaffold(
scaffoldState = scaffoldState,
@ -41,6 +41,12 @@ fun App() {
modifier = Modifier.fillMaxSize(),
sheetState = scaffoldState.bottomSheetState,
)
Searcher(
expanded = searchExpandedState,
onExpandedChange = { searchExpandedState = it },
text = searchTextState,
onTextChange = { searchTextState = it },
)
}
}
}

105
composeApp/src/commonMain/kotlin/moe/lava/banksia/ui/Searcher.kt Normal file
View file

@ -0,0 +1,105 @@
package moe.lava.banksia.ui
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Searcher(
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
text: String,
onTextChange: (String) -> Unit,
) {
val animatedPadding by animateDpAsState(
if (expanded) {
0.dp
} else {
20.dp
},
label = "padding"
)
Box(modifier = Modifier.fillMaxSize()) {
LaunchedEffect(Unit) {
/*cache.routes()*/
}
SearchBar(
colors = SearchBarDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer),
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxWidth()
.padding(horizontal = animatedPadding),
inputField = {
SearchBarDefaults.InputField(
query = text,
onQueryChange = onTextChange,
onSearch = {},
expanded = expanded,
onExpandedChange = onExpandedChange,
leadingIcon = { Icon(Icons.Default.Search, null) },
trailingIcon = {
if (expanded && text.isNotEmpty())
Icon(
imageVector = Icons.Default.Clear,
contentDescription = null,
modifier = Modifier.clickable { onTextChange("") }
)
}
)
},
expanded = expanded,
onExpandedChange = onExpandedChange,
) {
LazyColumn(modifier = Modifier.fillMaxWidth()) {
/*val r = cache.sortedRoutes()
for ((_, route) in r) {
if (!route.route_number.contains(text) &&
!route.route_name.lowercase().contains(text.lowercase()))
continue
item {
ListItem(
headlineContent = { Text(route.route_number.ifEmpty { route.route_name }) },
supportingContent = {
if (route.route_number.isNotEmpty()) {
Text(route.route_name)
}
},
leadingContent = { route.route_type.ComposableIcon() },
colors = ListItemDefaults.colors(containerColor = Color.Transparent),
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 4.dp)
.clickable {
text = "${route.route_number} - ${route.route_name}"
onRouteChanged(route)
expanded = false
}
)
}
}*/
}
}
}
}