Skip to content

Commit bb5065e

Browse files
doyeon0307doyeon0307
committed
[Feat/#17] 공통 바텀시트 구현
1 parent 9f3b38e commit bb5065e

File tree

1 file changed

+150
-0
lines changed
  • app/src/main/java/com/poti/android/core/designsystem/component/bottomsheet

1 file changed

+150
-0
lines changed

‎app/src/main/java/com/poti/android/core/designsystem/component/bottomsheet/PotiBottomSheet.kt‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
package com.poti.android.core.designsystem.component.bottomsheet
2+
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.ColumnScope
5+
import androidx.compose.foundation.layout.PaddingValues
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.lazy.LazyColumn
10+
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.material3.ExperimentalMaterial3Api
12+
import androidx.compose.material3.Icon
13+
import androidx.compose.material3.ModalBottomSheet
14+
import androidx.compose.material3.ModalBottomSheetProperties
15+
import androidx.compose.material3.Text
16+
import androidx.compose.material3.rememberModalBottomSheetState
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.runtime.getValue
19+
import androidx.compose.runtime.mutableStateOf
20+
import androidx.compose.runtime.remember
21+
import androidx.compose.runtime.setValue
22+
import androidx.compose.ui.Alignment
23+
import androidx.compose.ui.Modifier
24+
import androidx.compose.ui.graphics.vector.ImageVector
25+
import androidx.compose.ui.res.vectorResource
26+
import androidx.compose.ui.tooling.preview.Preview
27+
import androidx.compose.ui.unit.dp
28+
import com.poti.android.R
29+
import com.poti.android.core.common.extension.noRippleClickable
30+
import com.poti.android.core.designsystem.component.button.PotiActionButton
31+
import com.poti.android.core.designsystem.component.button.PotiFloatingButton
32+
import com.poti.android.core.designsystem.theme.PotiTheme
33+
34+
/**
35+
* 바텀시트 기본 레이아웃입니다.
36+
*
37+
* @param onDismissRequest 바텀시트를 닫는 콜백입니다.
38+
* @param modifier
39+
* @param skipPartiallyExpanded 바텀시트 content가 길 때, 바텀시트가 부분적으로 열리고, 사용자가 드래그해야 전체 content가 노출되는지 여부를 조정합니다. 기본값 true여서, 기본값 사용 시 바텀시트 열면 모든 content가 한 번에 보이게 됩니다.
40+
* @param shouldDismissOnBackPress 시스템 뒤로가기 시 바텀시트가 닫히는지 여부입니다. 기본값 true로, 닫히도록 설정되어 있습니다.
41+
* @param content
42+
*
43+
* @author 도연
44+
* @sample PotiBottomSheetPreview
45+
*/
46+
@OptIn(ExperimentalMaterial3Api::class)
47+
@Composable
48+
fun PotiBottomSheet(
49+
onDismissRequest: () -> Unit,
50+
modifier: Modifier = Modifier,
51+
skipPartiallyExpanded: Boolean = true,
52+
shouldDismissOnBackPress: Boolean = true,
53+
content: @Composable ColumnScope.() -> Unit,
54+
) {
55+
val sheetState = rememberModalBottomSheetState(
56+
skipPartiallyExpanded = skipPartiallyExpanded,
57+
)
58+
59+
val properties = remember {
60+
ModalBottomSheetProperties(
61+
shouldDismissOnBackPress = shouldDismissOnBackPress
62+
)
63+
}
64+
65+
ModalBottomSheet(
66+
onDismissRequest = onDismissRequest,
67+
modifier = modifier,
68+
sheetState = sheetState,
69+
shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
70+
containerColor = PotiTheme.colors.white,
71+
scrimColor = PotiTheme.colors.blackA40,
72+
dragHandle = null,
73+
properties = properties
74+
) {
75+
// TODO: [도연] Navigation 컴포넌트 병합 시, header-pager로 대체
76+
BottomSheetHeader(
77+
onXIconClick = onDismissRequest,
78+
modifier = Modifier.padding(top = 4.dp)
79+
)
80+
81+
content()
82+
}
83+
}
84+
85+
// TODO: [도연] Navigation 컴포넌트 병합 시, 삭제
86+
@Composable
87+
private fun BottomSheetHeader(
88+
onXIconClick: () -> Unit,
89+
modifier: Modifier = Modifier,
90+
) {
91+
Icon(
92+
imageVector = ImageVector.vectorResource(R.drawable.ic_x),
93+
tint = PotiTheme.colors.black,
94+
contentDescription = null,
95+
modifier = modifier
96+
.noRippleClickable(onClick = onXIconClick)
97+
.padding(all = 12.dp)
98+
)
99+
}
100+
101+
@Preview
102+
@Composable
103+
private fun PotiBottomSheetPreview() {
104+
var showBottomSheet by remember { mutableStateOf(true) }
105+
106+
PotiTheme {
107+
if (showBottomSheet) {
108+
PotiBottomSheet(
109+
onDismissRequest = { showBottomSheet = false },
110+
content = {
111+
Text(
112+
text = "멤버",
113+
modifier = Modifier
114+
.padding(horizontal = 16.dp)
115+
)
116+
117+
LazyColumn(
118+
contentPadding = PaddingValues(horizontal = 16.dp),
119+
) {
120+
items(5) {
121+
Text(
122+
text = "멤버",
123+
modifier = Modifier
124+
.padding(vertical = 8.dp)
125+
)
126+
}
127+
}
128+
129+
PotiActionButton(
130+
text = "계속",
131+
onClick = {},
132+
modifier = Modifier
133+
.fillMaxWidth()
134+
.padding(horizontal = 16.dp)
135+
.padding(top = 4.dp, bottom = 14.dp),
136+
)
137+
}
138+
)
139+
}
140+
141+
Box(
142+
modifier = Modifier.fillMaxSize(),
143+
contentAlignment = Alignment.Center
144+
) {
145+
PotiFloatingButton(
146+
onClick = { showBottomSheet = true },
147+
)
148+
}
149+
}
150+
}

0 commit comments

Comments
 (0)