Skip to content
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

Jump to bottom

refactor: 공통 다이얼로그 세분화 #333

Merged
merged 3 commits into from
Jan 16, 2024
Merged

refactor: 공통 다이얼로그 세분화 #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efd16cf
refactor: 공통 다이얼로그 세분화
hoyahozz Jan 13, 2024
02676c8
fix: 다이얼로그 프리뷰 오탈자 수정
hoyahozz Jan 13, 2024
e0adf57
Merge branch 'develop' into refactor/dialog-with-slot-api
hoyahozz Jan 14, 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
336 changes: 253 additions & 83 deletions common/src/main/java/com/yapp/common/yds/YDSPopupDialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,15 @@ import com.yapp.common.theme.AttendanceTypography
@ExperimentalComposeUiApi
@Composable
fun YDSPopupDialog(
modifier: Modifier = Modifier,
title: String,
content: String,
modifier: Modifier = Modifier,
negativeButtonText: String? = null,
negativeButtonText: String,
positiveButtonText: String,
onClickNegativeButton: (() -> Unit)? = null,
onClickNegativeButton: () -> Unit,
onClickPositiveButton: () -> Unit,
editTextInitValue: String = "",
editTextHint: String? = null,
editTextChangedListener: (String) -> Unit = { },
onDismiss: () -> Unit
onDismiss: () -> Unit,
) {
var isTextFieldFocused by remember { mutableStateOf<Boolean>(false) }

Dialog(
onDismissRequest = { onDismiss() },
properties = DialogProperties(
Expand Down Expand Up @@ -83,87 +78,167 @@ fun YDSPopupDialog(
style = AttendanceTypography.body1,
color = AttendanceTheme.colors.grayScale.Gray800
)

if (editTextHint != null) {
TextField(
value = editTextInitValue,
onValueChange = { editTextChangedListener(it) },
singleLine = true,
Row(
modifier = Modifier.padding(top = 18.dp)
) {
Button(
onClick = onClickNegativeButton,
modifier = Modifier
.padding(top = 20.dp)
.fillMaxWidth()
.onFocusEvent { state ->
isTextFieldFocused = state.isFocused
}
.background(
color = AttendanceTheme.colors.grayScale.Gray200,
shape = RoundedCornerShape(10.dp)
),
placeholder = {
if (!isTextFieldFocused) {
Text(
modifier = Modifier.fillMaxWidth(),
text = editTextHint,
textAlign = TextAlign.Center,
color = AttendanceTheme.colors.grayScale.Gray400,
)
}
},
textStyle = AttendanceTypography.body2.copy(
color = AttendanceTheme.colors.grayScale.Gray800,
textAlign = TextAlign.Center
.width(0.dp)
.weight(1f)
.height(46.dp)
.padding(end = 6.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = AttendanceTheme.colors.grayScale.Gray200
),
colors = TextFieldDefaults.textFieldColors(
textColor = AttendanceTheme.colors.grayScale.Gray800,
disabledTextColor = Color.Transparent,
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
shape = RoundedCornerShape(10.dp),
elevation = null
) {
Text(
text = negativeButtonText,
style = AttendanceTypography.body1,
color = AttendanceTheme.colors.grayScale.Gray800,
overflow = TextOverflow.Ellipsis
)
}
Button(
onClick = onClickPositiveButton,
modifier = Modifier
.weight(1f)
.height(46.dp)
.padding(start = 6.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = AttendanceTheme.colors.etcColors.EtcRed // EtcRed or YappOrange
),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
visualTransformation = PasswordVisualTransformation()
)
shape = RoundedCornerShape(10.dp),
elevation = null
) {
Text(
text = positiveButtonText,
style = AttendanceTypography.body1,
color = Color.White
)
}
}
}
}
}
}

Row(
modifier = Modifier.padding(top = 18.dp)
) {
if (onClickNegativeButton != null && negativeButtonText != null) {
Button(
onClick = onClickNegativeButton,
modifier = Modifier
.width(0.dp)
.weight(1f)
.height(46.dp)
.padding(end = 6.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = AttendanceTheme.colors.grayScale.Gray200
),
shape = RoundedCornerShape(10.dp),
elevation = null
) {
@Composable
fun YDSTextFieldPopupDialog(
modifier: Modifier = Modifier,
title: String,
content: String,
negativeButtonText: String,
positiveButtonText: String,
onClickNegativeButton: () -> Unit,
onClickPositiveButton: () -> Unit,
textFieldInitValue: String,
textFieldHint: String,
textFieldChangedListener: (String) -> Unit,
onDismiss: () -> Unit,
) {
var isTextFieldFocused by remember { mutableStateOf(false) }

Dialog(
onDismissRequest = { onDismiss() },
properties = DialogProperties(
usePlatformDefaultWidth = false
)
) {
Surface(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(horizontal = 32.dp),
shape = RoundedCornerShape(10.dp),
color = AttendanceTheme.colors.backgroundColors.backgroundElevated
) {
Column(
modifier = Modifier
.background(AttendanceTheme.colors.backgroundColors.backgroundElevated)
.padding(24.dp)
) {
Text(
text = title,
style = AttendanceTypography.h3,
color = AttendanceTheme.colors.grayScale.Gray1200
)
Text(
text = content,
modifier = Modifier.padding(top = 8.dp),
style = AttendanceTypography.body1,
color = AttendanceTheme.colors.grayScale.Gray800
)
TextField(
value = textFieldInitValue,
onValueChange = { textFieldChangedListener(it) },
singleLine = true,
modifier = Modifier
.padding(top = 20.dp)
.fillMaxWidth()
.onFocusEvent { state ->
isTextFieldFocused = state.isFocused
}
.background(
color = AttendanceTheme.colors.grayScale.Gray200,
shape = RoundedCornerShape(10.dp)
),
placeholder = {
if (!isTextFieldFocused) {
Text(
text = negativeButtonText,
style = AttendanceTypography.body1,
color = AttendanceTheme.colors.grayScale.Gray800,
overflow = TextOverflow.Ellipsis
modifier = Modifier.fillMaxWidth(),
text = textFieldHint,
textAlign = TextAlign.Center,
color = AttendanceTheme.colors.grayScale.Gray400,
)
}
},
textStyle = AttendanceTypography.body2.copy(
color = AttendanceTheme.colors.grayScale.Gray800,
textAlign = TextAlign.Center
),
colors = TextFieldDefaults.textFieldColors(
textColor = AttendanceTheme.colors.grayScale.Gray800,
disabledTextColor = Color.Transparent,
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
visualTransformation = PasswordVisualTransformation()
)
Row(
modifier = Modifier.padding(top = 18.dp)
) {
Button(
onClick = onClickNegativeButton,
modifier = Modifier
.width(0.dp)
.weight(1f)
.height(46.dp)
.padding(end = 6.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = AttendanceTheme.colors.grayScale.Gray200
),
shape = RoundedCornerShape(10.dp),
elevation = null
) {
Text(
text = negativeButtonText,
style = AttendanceTypography.body1,
color = AttendanceTheme.colors.grayScale.Gray800,
overflow = TextOverflow.Ellipsis
)
}

val positiveButtonPadding =
if (onClickNegativeButton != null && negativeButtonText != null)
Modifier.padding(horizontal = 12.dp)
else Modifier.padding(start = 6.dp)

Button(
onClick = onClickPositiveButton,
modifier = Modifier
.width(0.dp)
.weight(1f)
.height(46.dp)
.then(positiveButtonPadding),
.padding(start = 6.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = AttendanceTheme.colors.etcColors.EtcRed // EtcRed or YappOrange
),
Expand All @@ -173,8 +248,7 @@ fun YDSPopupDialog(
Text(
text = positiveButtonText,
style = AttendanceTypography.body1,
color = Color.White,
overflow = TextOverflow.Ellipsis
color = Color.White
)
}
}
Expand All @@ -183,19 +257,115 @@ fun YDSPopupDialog(
}
}

@Composable
fun YDSSingleButtonPopupDialog(
modifier: Modifier = Modifier,
title: String,
content: String,
buttonText: String,
onClickButton: () -> Unit,
onDismiss: () -> Unit,
) {
Dialog(
onDismissRequest = { onDismiss() },
properties = DialogProperties(
usePlatformDefaultWidth = false
)
) {
Surface(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(horizontal = 32.dp),
shape = RoundedCornerShape(10.dp),
color = AttendanceTheme.colors.backgroundColors.backgroundElevated
) {
Column(
modifier = Modifier
.background(AttendanceTheme.colors.backgroundColors.backgroundElevated)
.padding(24.dp)
) {
Text(
text = title,
style = AttendanceTypography.h3,
color = AttendanceTheme.colors.grayScale.Gray1200
)
Text(
text = content,
modifier = Modifier.padding(top = 8.dp),
style = AttendanceTypography.body1,
color = AttendanceTheme.colors.grayScale.Gray800
)
Button(
onClick = onClickButton,
modifier = Modifier
.fillMaxWidth()
.padding(top = 18.dp)
.height(46.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = AttendanceTheme.colors.etcColors.EtcRed
),
shape = RoundedCornerShape(10.dp),
elevation = null
) {
Text(
text = buttonText,
style = AttendanceTypography.body1,
color = Color.White
)
}
}
}
}
}

@OptIn(ExperimentalComposeUiApi::class)
@Preview(device = "spec:width=480px,height=800px,dpi=240")
@Composable
fun YDSPopupDialogPreview() {
private fun YDSPopupDialogPreview() {
AttendanceTheme {
YDSPopupDialog(
title = "팀을 선택해 주세요",
content = "원활한 출석체크를 위해\\n팀과 직무 선택이 꼭 필요해요!",
content = "원활한 출석체크를 위해\n팀과 직무 선택이 꼭 필요해요!",
negativeButtonText = "취소",
positiveButtonText = "팀 선택하기",
onClickNegativeButton = { },
onClickPositiveButton = { },
onDismiss = { }
onClickPositiveButton = { },
onDismiss = { }
)
}
}
}

@Preview(device = "spec:width=480px,height=800px,dpi=240")
@Composable
private fun YDSTextFieldPopupDialogPreview() {
AttendanceTheme {
YDSTextFieldPopupDialog(
title = "암호를 대라!",
content = "코드 넘버를 입력해주세요",
negativeButtonText = "취소",
positiveButtonText = "확인",
onClickNegativeButton = { },
onClickPositiveButton = { },
textFieldInitValue = "",
textFieldHint = "****",
textFieldChangedListener = { },
onDismiss = { },
)
}
}


@Preview(device = "spec:width=480px,height=800px,dpi=240")
@Composable
private fun YDSSingleButtonPopupDialogPreview() {
AttendanceTheme {
YDSSingleButtonPopupDialog(
title = "업데이트가 필요해요!",
content = "더 멋진 기능을 사용하기 위해\n지금 바로 업데이트를 진행해주세요.",
buttonText = "업데이트",
onClickButton = { },
onDismiss = { }
)
}
}
Loading
Loading