Skip to content

Commit

Permalink
example: Move the State Hoisting of TextComponent() to upper
Browse files Browse the repository at this point in the history
  • Loading branch information
@YuKongA
YuKongA committed Dec 2, 2024
1 parent df8a47d commit 21ca9c8
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 52 deletions.
43 changes: 37 additions & 6 deletions composeApp/src/commonMain/kotlin/MainPage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,35 @@ fun MainPage(
) {
var miuixSearchValue by remember { mutableStateOf("") }
var expanded by rememberSaveable { mutableStateOf(false) }
var showDialog = rememberSaveable { mutableStateOf(false) }
var showDialog2 = rememberSaveable { mutableStateOf(false) }
var checkbox = remember { mutableStateOf(false) }
var checkboxTrue = remember { mutableStateOf(true) }
var switch = remember { mutableStateOf(false) }
var switchTrue = remember { mutableStateOf(true) }
val dropdownOptionSelected = remember { mutableStateOf(0) }
val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
val spinnerOptionSelected = remember { mutableStateOf(0) }
val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
var miuixSuperCheckbox = remember { mutableStateOf("State: false") }
var miuixSuperCheckboxState = remember { mutableStateOf(false) }
var miuixSuperRightCheckbox = remember { mutableStateOf("false") }
var miuixSuperRightCheckboxState = remember { mutableStateOf(false) }
var miuixSuperSwitch = remember { mutableStateOf("false") }
var miuixSuperSwitchState = remember { mutableStateOf(false) }
var miuixSuperSwitchAnimState = remember { mutableStateOf(false) }

val textComponent = @Composable {
TextComponent(
showDialog, showDialog2, checkbox, checkboxTrue, switch, switchTrue, dropdownOptionSelected,
dropdownOptionSelectedRight, spinnerOptionSelected, spinnerOptionSelectedRight,
spinnerOptionSelectedDialog, miuixSuperCheckbox, miuixSuperCheckboxState,
miuixSuperRightCheckbox, miuixSuperRightCheckboxState, miuixSuperSwitch,
miuixSuperSwitchState, miuixSuperSwitchAnimState
)
}
val otherComponent = @Composable { OtherComponent(padding) }

BoxWithConstraints(
modifier = Modifier.fillMaxSize()
Expand Down Expand Up @@ -113,12 +142,12 @@ fun MainPage(
item(
key = "text"
) {
TextComponent()
textComponent()
}
item(
key = "other"
) {
OtherComponent(padding)
otherComponent()
}
}
}
Expand Down Expand Up @@ -195,9 +224,9 @@ fun MainPage(
}
if (!expanded) {
item(
key = "text"
key = "other"
) {
OtherComponent(padding)
otherComponent()
Spacer(modifier = Modifier.height(6.dp))
}
}
Expand All @@ -209,8 +238,10 @@ fun MainPage(
contentPadding = PaddingValues(top = padding.calculateTopPadding()),
topAppBarScrollBehavior = topAppBarScrollBehavior
) {
item {
TextComponent()
item(
key = "text"
) {
textComponent()
Spacer(modifier = Modifier.height(12.dp + padding.calculateBottomPadding()))
}
}
Expand Down
86 changes: 43 additions & 43 deletions composeApp/src/commonMain/kotlin/component/TextComponent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,33 +54,33 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissDialog

@Composable
fun TextComponent() {
val showDialog = remember { mutableStateOf(false) }
val showDialog2 = remember { mutableStateOf(false) }
var checkbox by remember { mutableStateOf(false) }
var checkboxTrue by remember { mutableStateOf(true) }
var switch by remember { mutableStateOf(false) }
var switchTrue by remember { mutableStateOf(true) }
fun TextComponent(
showDialog: MutableState<Boolean>,
showDialog2: MutableState<Boolean>,
checkbox: MutableState<Boolean>,
checkboxTrue: MutableState<Boolean>,
switch: MutableState<Boolean>,
switchTrue: MutableState<Boolean>,
dropdownOptionSelected: MutableState<Int>,
dropdownOptionSelectedRight: MutableState<Int>,
spinnerOptionSelected: MutableState<Int>,
spinnerOptionSelectedRight: MutableState<Int>,
spinnerOptionSelectedDialog: MutableState<Int>,
miuixSuperCheckbox: MutableState<String>,
miuixSuperCheckboxState: MutableState<Boolean>,
miuixSuperRightCheckbox: MutableState<String>,
miuixSuperRightCheckboxState: MutableState<Boolean>,
miuixSuperSwitch: MutableState<String>,
miuixSuperSwitchState: MutableState<Boolean>,
miuixSuperSwitchAnimState: MutableState<Boolean>,
) {
val dropdownOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4")
val dropdownOptionSelected = remember { mutableStateOf(0) }
val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
val spinnerOptions = listOf(
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) }, "Option 1", "Red"),
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) }, "Option 2", "Green"),
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) }, "Option 3", "Blue"),
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) }, "Option 4", "Yellow"),
)
val spinnerOptionSelected = remember { mutableStateOf(0) }
val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
var miuixSuperCheckbox by remember { mutableStateOf("State: false") }
var miuixSuperCheckboxState by remember { mutableStateOf(false) }
var miuixSuperRightCheckbox by remember { mutableStateOf("false") }
var miuixSuperRightCheckboxState by remember { mutableStateOf(false) }
var miuixSuperSwitch by remember { mutableStateOf("false") }
var miuixSuperSwitchState by remember { mutableStateOf(false) }
var miuixSuperSwitchAnimState by remember { mutableStateOf(false) }

SmallTitle(text = "Basic")
Card(
modifier = Modifier
Expand Down Expand Up @@ -182,12 +182,12 @@ fun TextComponent() {
horizontalArrangement = Arrangement.SpaceBetween
) {
Checkbox(
checked = checkbox,
onCheckedChange = { checkbox = it }
checked = checkbox.value,
onCheckedChange = { checkbox.value = it }
)
Checkbox(
checked = checkboxTrue,
onCheckedChange = { checkboxTrue = it },
checked = checkboxTrue.value,
onCheckedChange = { checkboxTrue.value = it },
modifier = Modifier.padding(start = 8.dp)
)
Checkbox(
Expand All @@ -207,27 +207,27 @@ fun TextComponent() {
SuperCheckbox(
checkboxLocation = CheckboxLocation.Right,
title = "Checkbox",
checked = miuixSuperRightCheckboxState,
checked = miuixSuperRightCheckboxState.value,
rightActions = {
Text(
modifier = Modifier.padding(end = 10.dp),
text = miuixSuperRightCheckbox,
text = miuixSuperRightCheckbox.value,
color = MiuixTheme.colorScheme.onSurfaceVariantActions
)
},
onCheckedChange = {
miuixSuperRightCheckboxState = it
miuixSuperRightCheckbox = "$it"
miuixSuperRightCheckboxState.value = it
miuixSuperRightCheckbox.value = "$it"
},
)

SuperCheckbox(
title = "Checkbox",
summary = miuixSuperCheckbox,
checked = miuixSuperCheckboxState,
summary = miuixSuperCheckbox.value,
checked = miuixSuperCheckboxState.value,
onCheckedChange = {
miuixSuperCheckboxState = it
miuixSuperCheckbox = "State: $it"
miuixSuperCheckboxState.value = it
miuixSuperCheckbox.value = "State: $it"
},
)

Expand All @@ -252,12 +252,12 @@ fun TextComponent() {
horizontalArrangement = Arrangement.SpaceBetween
) {
Switch(
checked = switch,
onCheckedChange = { switch = it }
checked = switch.value,
onCheckedChange = { switch.value = it }
)
Switch(
checked = switchTrue,
onCheckedChange = { switchTrue = it },
checked = switchTrue.value,
onCheckedChange = { switchTrue.value = it },
modifier = Modifier.padding(start = 6.dp)
)
Switch(
Expand All @@ -277,30 +277,30 @@ fun TextComponent() {
SuperSwitch(
title = "Switch",
summary = "Click to expand a Switch",
checked = miuixSuperSwitchAnimState,
checked = miuixSuperSwitchAnimState.value,
onCheckedChange = {
miuixSuperSwitchAnimState = it
miuixSuperSwitchAnimState.value = it
},
)

AnimatedVisibility(
visible = miuixSuperSwitchAnimState,
visible = miuixSuperSwitchAnimState.value,
enter = fadeIn() + expandVertically(),
exit = fadeOut() + shrinkVertically()
) {
SuperSwitch(
title = "Switch",
checked = miuixSuperSwitchState,
checked = miuixSuperSwitchState.value,
rightActions = {
Text(
modifier = Modifier.padding(end = 6.dp),
text = miuixSuperSwitch,
text = miuixSuperSwitch.value,
color = MiuixTheme.colorScheme.onSurfaceVariantActions
)
},
onCheckedChange = {
miuixSuperSwitchState = it
miuixSuperSwitch = "$it"
miuixSuperSwitchState.value = it
miuixSuperSwitch.value = "$it"
},
)
}
Expand Down
9 changes: 6 additions & 3 deletions miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@ fun SuperDialog(
defaultWindowInsetsPadding: Boolean = true,
content: @Composable () -> Unit
) {
if (show.value) {
if (!show.value) {
dialogStates.remove(show)
onDismissRequest?.invoke()
} else {
if (!dialogStates.contains(show)) dialogStates.add(show)
LaunchedEffect(show.value) {
if (show.value) {
Expand All @@ -82,7 +85,7 @@ fun SuperDialog(
val paddingModifier = remember(outsideMargin) { Modifier.padding(horizontal = outsideMargin.width).padding(bottom = outsideMargin.height) }
val roundedCorner by rememberUpdatedState(getRoundedCorner())
val bottomCornerRadius by remember { derivedStateOf { if (roundedCorner != 0.dp) roundedCorner - outsideMargin.width else 32.dp } }
val contentAlignment by rememberUpdatedState { derivedStateOf { if (windowHeight >= 480.dp && windowWidth >= 840.dp) Alignment.Center else Alignment.BottomCenter } }
val contentAlignment by remember { derivedStateOf { if (windowHeight >= 480.dp && windowWidth >= 840.dp) Alignment.Center else Alignment.BottomCenter } }

BackHandler(enabled = show.value) {
onDismissRequest?.invoke()
Expand Down Expand Up @@ -114,7 +117,7 @@ fun SuperDialog(
.pointerInput(Unit) {
detectTapGestures { /* Do nothing to consume the click */ }
}
.align(contentAlignment.invoke().value)
.align(contentAlignment)
.graphicsLayer(
shape = SmoothRoundedCornerShape(bottomCornerRadius),
clip = false
Expand Down

0 comments on commit 21ca9c8

Please sign in to comment.