From 91314f09813c71b474aa4862cbcc15c0ceddbfc7 Mon Sep 17 00:00:00 2001 From: Ray Jang Date: Wed, 24 Jan 2024 01:06:26 +0900 Subject: [PATCH] =?UTF-8?q?[System]=20DialogScreen=20=EA=B3=A0=EB=8F=84?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../presentation/common/view/DialogScreen.kt | 222 +++++++++--------- .../ui/main/home/setting/SettingScreen.kt | 14 +- presentation/src/main/res/values/strings.xml | 8 +- 3 files changed, 130 insertions(+), 114 deletions(-) diff --git a/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt b/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt index 51b08480..969f6a94 100644 --- a/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt +++ b/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt @@ -1,76 +1,125 @@ package ac.dnd.bookkeeping.android.presentation.common.view -import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.fadeIn -import androidx.compose.animation.fadeOut +import ac.dnd.bookkeeping.android.presentation.R import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Surface +import androidx.compose.material.ButtonDefaults +import androidx.compose.material.Card import androidx.compose.material.Text +import androidx.compose.material.TextButton import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -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.draw.clip -import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.unit.Dp +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Dialog +import androidx.compose.ui.window.DialogProperties @Composable fun DialogScreen( - dialogIsShowingState: MutableState, - width: Dp = 300.dp, - content: @Composable () -> Unit = { SampleDialogComponent(dialogIsShowingState) } + isShowing: Boolean, + isCancelable: Boolean = true, + title: String = "", + message: String = "", + confirmMessage: String = stringResource(id = R.string.dialog_confirm), + cancelMessage: String = stringResource(id = R.string.dialog_cancel), + onConfirm: () -> Unit = {}, + onCancel: (() -> Unit)? = null, + onDismissRequest: (() -> Unit), ) { - val animateIn = remember { mutableStateOf(false) } - if (dialogIsShowingState.value) { + if (isShowing) { Dialog( + properties = DialogProperties( + dismissOnBackPress = isCancelable, + dismissOnClickOutside = isCancelable + ), onDismissRequest = { - dialogIsShowingState.value = false + onDismissRequest() } ) { - Box( - modifier = Modifier.fillMaxSize(), - contentAlignment = Alignment.Center + Card( + modifier = Modifier.background( + color = Color.White, + shape = RoundedCornerShape(10.dp) + ), ) { - LaunchedEffect(Unit) { animateIn.value = true } - AnimatedVisibility( - visible = animateIn.value && dialogIsShowingState.value, - enter = fadeIn(), - exit = fadeOut() + Column( + modifier = Modifier + .wrapContentSize() + .padding(top = 25.dp, start = 20.dp, end = 20.dp, bottom = 20.dp), + horizontalAlignment = Alignment.CenterHorizontally ) { - Box( - modifier = Modifier - .shadow( - elevation = 8.dp, - shape = RoundedCornerShape(10.dp) - ) - .width(width) - .clip(RoundedCornerShape(16.dp)) - .background( - color = Color.LightGray + Text( + text = title, + fontSize = 16.sp, + color = Color.Black + ) + + if (message.isNotEmpty()) { + Spacer(modifier = Modifier.height(15.dp)) + + Text( + text = message, + fontSize = 12.sp, + color = Color.Black + ) + } + + Spacer(modifier = Modifier.height(20.dp)) + + Row(modifier = Modifier.wrapContentSize()) { + if (onCancel != null) { + TextButton( + modifier = Modifier + .weight(1f), + shape = RoundedCornerShape(4.dp), + colors = ButtonDefaults.textButtonColors( + backgroundColor = Color.Gray + ), + onClick = { + onCancel() + onDismissRequest() + }, + ) { + Text(text = cancelMessage) + } + + Spacer(modifier = Modifier.width(10.dp)) + } + + TextButton( + modifier = Modifier + .weight(1f), + shape = RoundedCornerShape(4.dp), + colors = ButtonDefaults.textButtonColors( + backgroundColor = Color.Gray ), - contentAlignment = Alignment.Center - ) { - content() + onClick = { + onConfirm() + onDismissRequest() + } + ) { + Text( + text = confirmMessage, + textAlign = TextAlign.Center + ) + } } } } @@ -78,79 +127,32 @@ fun DialogScreen( } } +@Preview @Composable -fun SampleDialogComponent( - dialogState: MutableState -) { - Surface( - modifier = Modifier.background( - color = Color.White, - shape = RoundedCornerShape(8.dp) - ), - ) { - Column( - modifier = Modifier - .wrapContentSize() - .padding(24.dp), - horizontalAlignment = Alignment.CenterHorizontally - ) { - Text( - "Sample Dialog Component", - fontSize = 16.sp, - color = Color.Black - ) - Spacer(modifier = Modifier.height(50.dp)) - Row(modifier = Modifier.wrapContentSize()) { - Box( - modifier = Modifier - .background( - color = Color.Gray, - shape = RoundedCornerShape(4.dp) - ) - .weight(1f) - .clickable { - dialogState.value = false - }, - contentAlignment = Alignment.Center - ) { - Text( - "취소", - color = Color.White, - textAlign = TextAlign.Center, - modifier = Modifier - .padding( - vertical = 10.5.dp, - horizontal = 12.dp - ), - ) - } +fun DialogScreenPreview1() { + var isShowing by remember { mutableStateOf(true) } - Spacer(modifier = Modifier.width(8.dp)) + DialogScreen( + isShowing = isShowing, + title = "제목", + message = "내용", + onCancel = {}, + onDismissRequest = { + isShowing = false + } + ) +} - Box( - modifier = Modifier - .background( - color = Color.Gray, - shape = RoundedCornerShape(4.dp) - ) - .weight(1f) - .clickable { - dialogState.value = false - }, - contentAlignment = Alignment.Center - ) { - Text( - "확인", - color = Color.White, - textAlign = TextAlign.Center, - modifier = Modifier - .padding( - vertical = 10.5.dp, - horizontal = 12.dp - ) - ) - } - } +@Preview +@Composable +fun DialogScreenPreview2() { + var isShowing by remember { mutableStateOf(true) } + + DialogScreen( + isShowing = isShowing, + title = "제목", + onDismissRequest = { + isShowing = false } - } + ) } diff --git a/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt b/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt index efd2348e..c8464d54 100644 --- a/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt +++ b/presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt @@ -1,5 +1,6 @@ package ac.dnd.bookkeeping.android.presentation.ui.main.home.setting +import ac.dnd.bookkeeping.android.presentation.R import ac.dnd.bookkeeping.android.presentation.common.util.ErrorObserver import ac.dnd.bookkeeping.android.presentation.common.view.BottomSheetScreen import ac.dnd.bookkeeping.android.presentation.common.view.DialogScreen @@ -12,11 +13,14 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material.Text 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.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.hilt.navigation.compose.hiltViewModel @@ -32,7 +36,7 @@ fun SettingScreen( viewModel = viewModel ) - val dialogIsShowingState = remember { mutableStateOf(false) } + var isDialogShowing by remember { mutableStateOf(false) } val bottomSheetIsShowingState = remember { mutableStateOf(false) } Column( @@ -65,7 +69,7 @@ fun SettingScreen( modifier = Modifier .padding(vertical = 10.dp) .clickable { - dialogIsShowingState.value = true + isDialogShowing = true } ) Text( @@ -80,7 +84,11 @@ fun SettingScreen( ) } BottomSheetScreen(bottomSheetIsShowingState = bottomSheetIsShowingState) - DialogScreen(dialogIsShowingState = dialogIsShowingState) + DialogScreen( + isShowing = isDialogShowing, + title = stringResource(R.string.setting_dialog_title), + onDismissRequest = { isDialogShowing = false } + ) } @Composable diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml index 1e077817..8f8b0669 100644 --- a/presentation/src/main/res/values/strings.xml +++ b/presentation/src/main/res/values/strings.xml @@ -1,4 +1,10 @@ - + + + 확인 + 취소 + + 테스트 +