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 98cc086
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 71 deletions.
49 changes: 41 additions & 8 deletions composeApp/src/commonMain/kotlin/MainPage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
Expand All @@ -41,7 +40,39 @@ fun MainPage(
padding: PaddingValues
) {
var miuixSearchValue by remember { mutableStateOf("") }
var expanded by rememberSaveable { mutableStateOf(false) }
var expanded by remember { mutableStateOf(false) }

val showDialog = remember { mutableStateOf(false) }
val dialogTextFieldValue = remember { mutableStateOf("") }
val showDialog2 = remember { mutableStateOf(false) }
val dialog2dropdownSelectedOption = remember { mutableStateOf(0) }
val dialog2SuperSwitchState = remember { mutableStateOf(false) }
val checkbox = remember { mutableStateOf(false) }
val checkboxTrue = remember { mutableStateOf(true) }
val switch = remember { mutableStateOf(false) }
val 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) }
val miuixSuperCheckbox = remember { mutableStateOf("State: false") }
val miuixSuperCheckboxState = remember { mutableStateOf(false) }
val miuixSuperRightCheckbox = remember { mutableStateOf("false") }
val miuixSuperRightCheckboxState = remember { mutableStateOf(false) }
val miuixSuperSwitch = remember { mutableStateOf("false") }
val miuixSuperSwitchState = remember { mutableStateOf(false) }
val miuixSuperSwitchAnimState = remember { mutableStateOf(false) }

val textComponent = @Composable {
TextComponent(
showDialog, dialogTextFieldValue, showDialog2, dialog2dropdownSelectedOption, dialog2SuperSwitchState,
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 +144,12 @@ fun MainPage(
item(
key = "text"
) {
TextComponent()
textComponent()
}
item(
key = "other"
) {
OtherComponent(padding)
otherComponent()
}
}
}
Expand Down Expand Up @@ -195,9 +226,9 @@ fun MainPage(
}
if (!expanded) {
item(
key = "text"
key = "other"
) {
OtherComponent(padding)
otherComponent()
Spacer(modifier = Modifier.height(6.dp))
}
}
Expand All @@ -209,8 +240,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
123 changes: 63 additions & 60 deletions composeApp/src/commonMain/kotlin/component/TextComponent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
Expand Down Expand Up @@ -54,33 +50,36 @@ 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>,
dialogTextFieldValue: MutableState<String>,
showDialog2: MutableState<Boolean>,
dialog2dropdownSelectedOption: MutableState<Int>,
dialog2SuperSwitchState: 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 +181,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 +206,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 +251,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 +276,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 Expand Up @@ -386,13 +385,15 @@ fun TextComponent() {
)
}

dialog(showDialog)
dialog2(showDialog2)
dialog(showDialog, dialogTextFieldValue)
dialog2(showDialog2, dialog2dropdownSelectedOption, dialog2SuperSwitchState)
}

@Composable
fun dialog(showDialog: MutableState<Boolean>) {
val value = remember { mutableStateOf("") }
fun dialog(
showDialog: MutableState<Boolean>,
dialogTextFieldValue: MutableState<String>
) {
SuperDialog(
title = "Dialog 1",
summary = "Summary",
Expand All @@ -403,9 +404,9 @@ fun dialog(showDialog: MutableState<Boolean>) {
) {
TextField(
modifier = Modifier.padding(bottom = 16.dp),
value = value.value,
value = dialogTextFieldValue.value,
maxLines = 1,
onValueChange = { value.value = it }
onValueChange = { dialogTextFieldValue.value = it }
)
Row(
horizontalArrangement = Arrangement.SpaceBetween
Expand All @@ -431,10 +432,12 @@ fun dialog(showDialog: MutableState<Boolean>) {
}

@Composable
fun dialog2(showDialog: MutableState<Boolean>) {
fun dialog2(
showDialog: MutableState<Boolean>,
dialog2dropdownSelectedOption: MutableState<Int>,
dialog2SuperSwitchState: MutableState<Boolean>
) {
val dropdownOptions = listOf("Option 1", "Option 2")
val dropdownSelectedOption = remember { mutableStateOf(0) }
var miuixSuperSwitchState by remember { mutableStateOf(false) }
SuperDialog(
title = "Dialog 2",
show = showDialog,
Expand All @@ -448,14 +451,14 @@ fun dialog2(showDialog: MutableState<Boolean>) {
SuperDropdown(
title = "Dropdown",
items = dropdownOptions,
selectedIndex = dropdownSelectedOption.value,
onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption }
selectedIndex = dialog2dropdownSelectedOption.value,
onSelectedIndexChange = { newOption -> dialog2dropdownSelectedOption.value = newOption }
)
SuperSwitch(
title = "Switch",
checked = miuixSuperSwitchState,
checked = dialog2SuperSwitchState.value,
onCheckedChange = {
miuixSuperSwitchState = it
dialog2SuperSwitchState.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 98cc086

Please sign in to comment.