Skip to content

Commit

Permalink
Merge pull request #108 from YAPP-Github/feature/MZ-219-check-dialog
Browse files Browse the repository at this point in the history
Feature/mz 219 check dialog 컴포넌트
  • Loading branch information
yangsooplus authored Jan 30, 2024
2 parents 2a8810c + 42d9594 commit 28496e9
Show file tree
Hide file tree
Showing 6 changed files with 277 additions and 66 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
package com.susu.core.designsystem.component.dialog

import androidx.compose.foundation.background
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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.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.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.susu.core.designsystem.component.button.FilledButtonColor
import com.susu.core.designsystem.component.button.GhostButtonColor
import com.susu.core.designsystem.component.button.SmallButtonStyle
import com.susu.core.designsystem.component.button.SusuFilledButton
import com.susu.core.designsystem.component.button.SusuGhostButton
import com.susu.core.designsystem.component.util.CheckCircle
import com.susu.core.designsystem.theme.Gray10
import com.susu.core.designsystem.theme.Gray100
import com.susu.core.designsystem.theme.Gray40
import com.susu.core.designsystem.theme.Gray80
import com.susu.core.designsystem.theme.SusuTheme

@Composable
fun SusuCheckedDialog(
modifier: Modifier = Modifier,
title: String? = null,
text: String? = null,
defaultChecked: Boolean = false,
checkboxText: String = "",
confirmText: String = "",
dismissText: String? = null,
isDimmed: Boolean = true,
textAlign: TextAlign = TextAlign.Center,
onConfirmRequest: (isChecked: Boolean) -> Unit = {},
onDismissRequest: () -> Unit = {},
) {
val rootModifier = modifier
.fillMaxSize()
.background(color = if (isDimmed) Color.Black.copy(alpha = 0.16f) else Color.Transparent)
.padding(horizontal = SusuTheme.spacing.spacing_xl)
var isChecked by remember { mutableStateOf(defaultChecked) }

Box(
modifier = rootModifier,
) {
Column(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.Center)
.background(color = Gray10, shape = RoundedCornerShape(8.dp))
.padding(SusuTheme.spacing.spacing_xl),
horizontalAlignment = Alignment.CenterHorizontally,
) {
title?.let {
Text(
text = it,
style = SusuTheme.typography.title_xs,
color = Gray100,
maxLines = 2,
)
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_xxs))
}
text?.let {
Text(
text = it,
style = SusuTheme.typography.text_xxs,
color = Gray80,
maxLines = 4,
textAlign = textAlign,
)
}
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_xl))
Row(
verticalAlignment = Alignment.CenterVertically,
) {
CheckCircle(
isChecked = isChecked,
onCheckedChange = { isChecked = it },
)
Spacer(modifier = Modifier.width(SusuTheme.spacing.spacing_xxxxs))
Text(
text = checkboxText,
style = SusuTheme.typography.title_xxs,
color = if (isChecked) Gray100 else Gray40,
)
}
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_xl))
Row(
modifier = Modifier.fillMaxWidth(),
) {
dismissText?.let {
SusuGhostButton(
modifier = Modifier.weight(1f),
color = GhostButtonColor.Black,
style = SmallButtonStyle.height40,
text = it,
onClick = onDismissRequest,
)
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_xxs))
}
SusuFilledButton(
modifier = Modifier.weight(1f),
color = FilledButtonColor.Orange,
style = SmallButtonStyle.height40,
text = confirmText,
onClick = { onConfirmRequest(isChecked) },
)
}
}
}
}

@Preview
@Composable
fun SusuCheckedDialogPreview() {
SusuTheme {
SusuCheckedDialog(
title = "제목",
text = "본문",
defaultChecked = true,
checkboxText = "체크박스 메세지",
confirmText = "확인했어요",
)
}
}

@Preview
@Composable
fun SusuCheckedDialogFalsePreview() {
SusuTheme {
SusuCheckedDialog(
title = "제목",
text = "본문",
checkboxText = "체크박스 메세지",
confirmText = "확인",
dismissText = "닫기",
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
package com.susu.core.designsystem.component.util

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.susu.core.designsystem.R
import com.susu.core.designsystem.theme.Gray100
import com.susu.core.designsystem.theme.Gray40
import com.susu.core.designsystem.theme.SusuTheme
import com.susu.core.ui.extension.susuClickable

@Composable
fun CheckCircle(
modifier: Modifier = Modifier,
isChecked: Boolean,
onCheckedChange: (Boolean) -> Unit = {},
) {
Box(
modifier = modifier
.size(20.dp)
.drawBehind {
if (isChecked.not()) {
drawCircle(
color = Gray40,
radius = 8.dp.toPx(),
style = Stroke(width = 1.dp.toPx()),
)
}
}
.susuClickable(
rippleEnabled = false,
onClick = { onCheckedChange(isChecked.not()) },
),
) {
if (isChecked) {
Icon(
painter = painterResource(id = R.drawable.ic_check_circle_background),
contentDescription = null,
tint = Gray100,
)
}
}
}

@Preview(showBackground = true)
@Composable
fun CheckCirclePreview() {
SusuTheme {
Row {
CheckCircle(isChecked = true)
CheckCircle(isChecked = false)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM9.29,16.29L5.7,12.7C5.607,12.607 5.534,12.498 5.484,12.377C5.434,12.256 5.408,12.126 5.408,11.995C5.408,11.864 5.434,11.734 5.484,11.613C5.534,11.493 5.607,11.383 5.7,11.29C5.793,11.197 5.902,11.124 6.023,11.074C6.144,11.024 6.274,10.998 6.405,10.998C6.536,10.998 6.666,11.024 6.787,11.074C6.908,11.124 7.017,11.197 7.11,11.29L10,14.17L16.88,7.29C17.067,7.103 17.321,6.998 17.585,6.998C17.849,6.998 18.103,7.103 18.29,7.29C18.477,7.477 18.582,7.731 18.582,7.995C18.582,8.259 18.477,8.513 18.29,8.7L10.7,16.29C10.608,16.383 10.498,16.456 10.377,16.506C10.256,16.557 10.126,16.582 9.995,16.582C9.864,16.582 9.734,16.557 9.613,16.506C9.492,16.456 9.383,16.383 9.29,16.29Z"
android:fillColor="#242424"/>
</vector>
8 changes: 8 additions & 0 deletions core/ui/src/main/java/com/susu/core/ui/DialogToken.kt
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,21 @@ package com.susu.core.ui

import androidx.compose.ui.text.style.TextAlign

/**
* @param checkboxText 체크박스 메세지. null 일 경우 SusuDialog, null이 아닐 경우 SusuCheckedDialog 가 노출
* @param defaultChecked Dialog 노출 시 기본 체크 상태
* @param onCheckedAction 체크박스 선택 시 추가로 실행하는 로직
* */
data class DialogToken(
val title: String? = null,
val text: String? = null,
val confirmText: String = "",
val dismissText: String? = null,
val checkboxText: String? = null,
val defaultChecked: Boolean = false,
val isDimmed: Boolean = true,
val textAlign: TextAlign = TextAlign.Center,
val onConfirmRequest: () -> Unit = {},
val onCheckedAction: () -> Unit = {},
val onDismissRequest: () -> Unit = {},
)
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
package com.susu.feature.loginsignup.signup.content

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
Expand All @@ -10,27 +9,20 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Check
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.susu.core.designsystem.component.badge.BadgeColor
import com.susu.core.designsystem.component.badge.BadgeStyle
import com.susu.core.designsystem.component.badge.SusuBadge
import com.susu.core.designsystem.theme.Gray100
import com.susu.core.designsystem.theme.Gray15
import com.susu.core.designsystem.component.util.CheckCircle
import com.susu.core.designsystem.theme.Gray30
import com.susu.core.designsystem.theme.Gray40
import com.susu.core.designsystem.theme.SusuTheme
import com.susu.core.model.Term
import com.susu.core.ui.R
Expand Down Expand Up @@ -93,7 +85,7 @@ fun TermListItem(
modifier = modifier.padding(vertical = SusuTheme.spacing.spacing_m),
verticalAlignment = Alignment.CenterVertically,
) {
TermCheckCircle(isChecked = checked, onCheckedChange = onCheckClick)
CheckCircle(isChecked = checked, onCheckedChange = onCheckClick)
Spacer(modifier = Modifier.width(SusuTheme.spacing.spacing_m))
if (isEssential) {
SusuBadge(
Expand Down Expand Up @@ -121,45 +113,6 @@ fun TermListItem(
}
}

@Composable
fun TermCheckCircle(
modifier: Modifier = Modifier,
isChecked: Boolean,
onCheckedChange: (Boolean) -> Unit = {},
) {
Box(
modifier = modifier
.size(20.dp)
.drawBehind {
if (isChecked) {
drawCircle(
color = Gray100,
radius = 8.dp.toPx(),
)
} else {
drawCircle(
color = Gray40,
radius = 8.dp.toPx(),
style = Stroke(width = 1.dp.toPx()),
)
}
}
.susuClickable(
rippleEnabled = false,
onClick = { onCheckedChange(isChecked.not()) },
),
) {
if (isChecked) {
Icon(
modifier = Modifier.padding(2.dp),
imageVector = Icons.Rounded.Check,
contentDescription = null,
tint = Gray15,
)
}
}
}

@Preview(showSystemUi = true)
@Composable
fun TermsContentPreview() {
Expand All @@ -176,6 +129,6 @@ fun TermsContentPreview() {
@Composable
fun TermCheckCirclePreview() {
SusuTheme {
TermCheckCircle(isChecked = true)
CheckCircle(isChecked = true)
}
}
Loading

0 comments on commit 28496e9

Please sign in to comment.