Skip to content

Commit cb4248e

Browse files
jihee-devjihee-dev
committed
[NDGL-31] NDGLChipTab 추가
1 parent 5fd393a commit cb4248e

File tree

1 file changed

+154
-0
lines changed
  • core/ui/src/main/java/com/yapp/ndgl/core/ui/designSystem

1 file changed

+154
-0
lines changed

‎core/ui/src/main/java/com/yapp/ndgl/core/ui/designSystem/NDGLChipTab.kt‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
package com.yapp.ndgl.core.ui.designSystem
2+
3+
import androidx.annotation.DrawableRes
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.border
6+
import androidx.compose.foundation.clickable
7+
import androidx.compose.foundation.horizontalScroll
8+
import androidx.compose.foundation.layout.Arrangement
9+
import androidx.compose.foundation.layout.Row
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.layout.size
12+
import androidx.compose.foundation.layout.widthIn
13+
import androidx.compose.foundation.rememberScrollState
14+
import androidx.compose.foundation.shape.CircleShape
15+
import androidx.compose.material3.Icon
16+
import androidx.compose.material3.Text
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.runtime.getValue
19+
import androidx.compose.runtime.mutableIntStateOf
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.draw.clip
25+
import androidx.compose.ui.graphics.vector.ImageVector
26+
import androidx.compose.ui.res.vectorResource
27+
import androidx.compose.ui.tooling.preview.Preview
28+
import androidx.compose.ui.unit.dp
29+
import com.yapp.ndgl.core.ui.R
30+
import com.yapp.ndgl.core.ui.theme.NDGLTheme
31+
import kotlinx.collections.immutable.PersistentList
32+
import kotlinx.collections.immutable.persistentListOf
33+
34+
object NDGLChipTabAttr {
35+
data class Tab(
36+
val tag: String,
37+
val name: String,
38+
@param:DrawableRes val leadingIcon: Int? = null,
39+
)
40+
}
41+
42+
@Composable
43+
fun NDGLChipTab(
44+
tabs: PersistentList<NDGLChipTabAttr.Tab>,
45+
selectedIndex: Int,
46+
onTabSelected: (Int) -> Unit,
47+
modifier: Modifier = Modifier,
48+
) {
49+
val scrollState = rememberScrollState()
50+
51+
Row(
52+
modifier = modifier.horizontalScroll(scrollState),
53+
horizontalArrangement = Arrangement.spacedBy(8.dp),
54+
) {
55+
tabs.forEachIndexed { index, tab ->
56+
NDGLChipTabItem(
57+
isSelected = index == selectedIndex,
58+
name = tab.name,
59+
leadingIcon = tab.leadingIcon,
60+
onTabSelected = { onTabSelected(index) },
61+
)
62+
}
63+
}
64+
}
65+
66+
@Composable
67+
private fun NDGLChipTabItem(
68+
isSelected: Boolean,
69+
name: String,
70+
onTabSelected: () -> Unit,
71+
@DrawableRes leadingIcon: Int?,
72+
) {
73+
Row(
74+
modifier = Modifier
75+
.clip(CircleShape)
76+
.chipStyle(isSelected)
77+
.clickable(onClick = onTabSelected)
78+
.widthIn(min = 72.dp)
79+
.padding(horizontal = 14.dp, vertical = 6.dp),
80+
horizontalArrangement = Arrangement.spacedBy(
81+
space = 4.dp,
82+
alignment = Alignment.CenterHorizontally,
83+
),
84+
verticalAlignment = Alignment.CenterVertically,
85+
) {
86+
leadingIcon?.let { icon ->
87+
Icon(
88+
imageVector = ImageVector.vectorResource(icon),
89+
contentDescription = null,
90+
modifier = Modifier.size(20.dp),
91+
tint = isSelected.chipContentColor(),
92+
)
93+
}
94+
95+
Text(
96+
text = name,
97+
style = NDGLTheme.typography.bodyMdMedium,
98+
color = isSelected.chipContentColor(),
99+
)
100+
}
101+
}
102+
103+
@Composable
104+
private fun Modifier.chipStyle(
105+
isSelected: Boolean,
106+
): Modifier = this.then(
107+
if (isSelected) {
108+
Modifier.background(NDGLTheme.colors.black900, CircleShape)
109+
} else {
110+
Modifier
111+
.background(NDGLTheme.colors.white, CircleShape)
112+
.border(
113+
width = 1.dp,
114+
color = NDGLTheme.colors.black200,
115+
shape = CircleShape,
116+
)
117+
},
118+
)
119+
120+
@Composable
121+
private fun Boolean.chipContentColor() = if (this) {
122+
NDGLTheme.colors.white
123+
} else {
124+
NDGLTheme.colors.black400
125+
}
126+
127+
@Preview(showBackground = true)
128+
@Composable
129+
private fun NDGLChipTabPreview() {
130+
NDGLTheme {
131+
var selectedIndex by remember { mutableIntStateOf(0) }
132+
133+
NDGLChipTab(
134+
tabs = persistentListOf(
135+
NDGLChipTabAttr.Tab(
136+
tag = "1",
137+
name = "1일차",
138+
leadingIcon = R.drawable.ic_20_tv,
139+
),
140+
NDGLChipTabAttr.Tab(
141+
tag = "1",
142+
name = "2일차",
143+
leadingIcon = R.drawable.ic_20_tv,
144+
),
145+
NDGLChipTabAttr.Tab(
146+
tag = "1",
147+
name = "3일차",
148+
),
149+
),
150+
selectedIndex = selectedIndex,
151+
onTabSelected = { selectedIndex = it },
152+
)
153+
}
154+
}

0 commit comments

Comments
 (0)