Skip to content

library: Add new component ListPopup #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 2, 2024
Merged

library: Add new component ListPopup #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
26f92c9
feat: new component ListPopup;
HowieHChen Dec 1, 2024
8beca08
fix: fix popup can't appear above anchor
HowieHChen Dec 1, 2024
342d604
misc: cleanup
YuKongA Dec 1, 2024
9008781
fix: fix window size not updating immediately after rotating the screen;
HowieHChen Dec 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 131 additions & 17 deletions composeApp/src/commonMain/kotlin/UITest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,11 @@ import androidx.compose.foundation.layout.captionBarPadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Favorite
import androidx.compose.material.icons.rounded.Home
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.material.icons.rounded.Settings
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
Expand All @@ -40,16 +37,26 @@ import top.yukonga.miuix.kmp.basic.FloatingActionButton
import top.yukonga.miuix.kmp.basic.HorizontalPager
import top.yukonga.miuix.kmp.basic.Icon
import top.yukonga.miuix.kmp.basic.IconButton
import top.yukonga.miuix.kmp.basic.ListPopup
import top.yukonga.miuix.kmp.basic.ListPopupDefaults
import top.yukonga.miuix.kmp.basic.MiuixScrollBehavior
import top.yukonga.miuix.kmp.basic.NavigationBar
import top.yukonga.miuix.kmp.basic.NavigationItem
import top.yukonga.miuix.kmp.basic.PopupPositionProvider
import top.yukonga.miuix.kmp.basic.Scaffold
import top.yukonga.miuix.kmp.basic.ScrollBehavior
import top.yukonga.miuix.kmp.basic.SmallTopAppBar
import top.yukonga.miuix.kmp.basic.TopAppBar
import top.yukonga.miuix.kmp.basic.rememberTopAppBarState
import top.yukonga.miuix.kmp.extra.DropdownImpl
import top.yukonga.miuix.kmp.icon.MiuixIcons
import top.yukonga.miuix.kmp.icon.icons.GitHub
import top.yukonga.miuix.kmp.icon.icons.ImmersionMore
import top.yukonga.miuix.kmp.icon.icons.Info
import top.yukonga.miuix.kmp.icon.icons.More
import top.yukonga.miuix.kmp.icon.icons.NavigatorSwitch
import top.yukonga.miuix.kmp.icon.icons.Settings
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissPopup
import utils.FPSMonitor

@OptIn(FlowPreview::class)
Expand All @@ -76,9 +83,10 @@ fun UITest(
}

val items = listOf(
NavigationItem("HomePage", Icons.Rounded.Home),
NavigationItem("DropDown", Icons.Rounded.Favorite),
NavigationItem("Settings", Icons.Rounded.Settings)
NavigationItem("HomePage", MiuixIcons.NavigatorSwitch),
NavigationItem("DropDown", MiuixIcons.Info),
NavigationItem("Settings", MiuixIcons.Settings),
NavigationItem("More", MiuixIcons.More)
)

LaunchedEffect(pagerState) {
Expand All @@ -93,6 +101,11 @@ fun UITest(
val showFloatingActionButton = remember { mutableStateOf(true) }
val enablePageUserScroll = remember { mutableStateOf(false) }

val isTopPopupExpanded = remember { mutableStateOf(false) }
val showTopPopup = remember { mutableStateOf(false) }
val isBottomPopupExpanded = remember { mutableStateOf(false) }
val showBottomPopup = remember { mutableStateOf(false) }

val uriHandler = LocalUriHandler.current

Scaffold(
Expand All @@ -109,12 +122,45 @@ fun UITest(
title = "Miuix",
scrollBehavior = currentScrollBehavior,
actions = {
if (isTopPopupExpanded.value) {
ListPopup(
show = showTopPopup,
popupPositionProvider = ListPopupDefaults.ContextMenuPositionProvider,
alignment = PopupPositionProvider.Align.TopRight,
onDismissRequest = {
isTopPopupExpanded.value = false
}
) {
LazyColumn {
items(items.take(3).size) { index ->
DropdownImpl(
text = items[index].label,
optionSize = items.take(3).size,
isSelected = items[index] == items[targetPage],
onSelectedIndexChange = {
targetPage = index
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
dismissPopup(showTopPopup)
isTopPopupExpanded.value = false
},
textWidthDp = 100.dp,
index = index
)
}
}
}
showTopPopup.value = true
}
IconButton(
modifier = Modifier.padding(end = 12.dp),
onClick = { }
modifier = Modifier.padding(end = 21.dp).size(40.dp),
onClick = {
isTopPopupExpanded.value = true
}
) {
Icon(
imageVector = Icons.Rounded.Menu,
imageVector = MiuixIcons.ImmersionMore,
contentDescription = "Menu"
)
}
Expand All @@ -125,12 +171,45 @@ fun UITest(
title = "Miuix",
scrollBehavior = currentScrollBehavior,
actions = {
if (isTopPopupExpanded.value) {
ListPopup(
show = showTopPopup,
popupPositionProvider = ListPopupDefaults.ContextMenuPositionProvider,
alignment = PopupPositionProvider.Align.TopRight,
onDismissRequest = {
isTopPopupExpanded.value = false
}
) {
LazyColumn {
items(items.take(3).size) { index ->
DropdownImpl(
text = items[index].label,
optionSize = items.take(3).size,
isSelected = items[index] == items[targetPage],
onSelectedIndexChange = {
targetPage = index
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
dismissPopup(showTopPopup)
isTopPopupExpanded.value = false
},
textWidthDp = 100.dp,
index = index
)
}
}
}
showTopPopup.value = true
}
IconButton(
modifier = Modifier.padding(end = 12.dp),
onClick = { }
modifier = Modifier.padding(end = 21.dp).size(40.dp),
onClick = {
isTopPopupExpanded.value = true
}
) {
Icon(
imageVector = Icons.Rounded.Menu,
imageVector = MiuixIcons.ImmersionMore,
contentDescription = "Menu"
)
}
Expand All @@ -146,13 +225,48 @@ fun UITest(
enter = fadeIn() + expandVertically(),
exit = fadeOut() + shrinkVertically()
) {
if (isBottomPopupExpanded.value) {
ListPopup(
show = showBottomPopup,
popupPositionProvider = ListPopupDefaults.ContextMenuPositionProvider,
alignment = PopupPositionProvider.Align.BottomRight,
onDismissRequest = {
isBottomPopupExpanded.value = false
}
) {
LazyColumn {
items(items.take(3).size) { index ->
DropdownImpl(
text = items[index].label,
optionSize = items.take(3).size,
isSelected = items[index] == items[targetPage],
onSelectedIndexChange = {
targetPage = index
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
dismissPopup(showBottomPopup)
isBottomPopupExpanded.value = false
},
textWidthDp = 100.dp,
index = index
)
}
}
}
showBottomPopup.value = true
}
NavigationBar(
items = items,
selected = targetPage,
onClick = { index ->
targetPage = index
coroutineScope.launch {
pagerState.animateScrollToPage(index)
if (index in 0..2) {
targetPage = index
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
} else {
isBottomPopupExpanded.value = true
}
}
)
Expand Down
3 changes: 1 addition & 2 deletions composeApp/src/commonMain/kotlin/component/TextComponent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,8 +449,7 @@ fun dialog2(showDialog: MutableState<Boolean>) {
title = "Dropdown",
items = dropdownOptions,
selectedIndex = dropdownSelectedOption.value,
onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption },
defaultWindowInsetsPadding = false
onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption }
)
SuperSwitch(
title = "Switch",
Expand Down
11 changes: 10 additions & 1 deletion miuix/src/androidMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.android.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,29 @@ import android.annotation.SuppressLint
import android.os.Build
import android.view.RoundedCorner
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.window.layout.WindowMetricsCalculator
import kotlin.math.max
import kotlin.math.min

@Composable
actual fun getWindowSize(): WindowSize {
val configuration = LocalConfiguration.current
val screenWidthDp = configuration.screenWidthDp
val screenHeightDp = configuration.screenHeightDp
val context = LocalContext.current
val windowMetrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(context)
val widthPx = windowMetrics.bounds.width()
val heightPx = windowMetrics.bounds.height()
return WindowSize(widthPx, heightPx)
return if (screenWidthDp > screenHeightDp)
WindowSize(max(widthPx, heightPx), min(widthPx, heightPx))
else
WindowSize(min(widthPx, heightPx), max(widthPx, heightPx))
}

actual fun platform(): Platform = Platform.Android
Expand Down
Loading