Skip to content

Commit bf43c68

Browse files
bmc08gtbmc08gt
committed
chore(ui): extract ListItem and BetaIndicator into shared ui/components
Move BetaIndicator from menu module to ui/components (migrate to Material3) and extract the inline menu ListItem into a reusable ListItem composable with configurable icon, headline, beta indicator, and chevron support. Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent 9932271 commit bf43c68

6 files changed

Lines changed: 96 additions & 68 deletions

File tree

‎apps/flipcash/core/src/main/res/values/strings.xml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@
114114

115115
<string name="title_labsAreEmpty">Nothing Cooking in the Lab Right Now</string>
116116
<string name="subtitle_labsAreEmpty">Check back in the next app update.</string>
117-
<string name="subtitle_beta">Beta</string>
118117

119118
<string name="prompt_title_deleteAccount">Permanently Delete Account?</string>
120119
<string name="prompt_description_deleteAccount">This will permanently delete your Flipcash account</string>

‎apps/flipcash/features/myaccount/src/main/kotlin/com/flipcash/app/myaccount/internal/AccountInfoHeader.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import androidx.compose.ui.Modifier
2222
import androidx.compose.ui.text.font.FontWeight.Companion.W600
2323
import androidx.compose.ui.text.style.TextOverflow
2424
import androidx.compose.ui.unit.dp
25-
import com.flipcash.app.menu.BetaIndicator
25+
import com.getcode.ui.components.BetaIndicator
2626
import com.getcode.theme.CodeTheme
2727
import com.getcode.ui.core.rememberedClickable
2828

‎apps/flipcash/shared/menu/src/main/kotlin/com/flipcash/app/menu/MenuList.kt‎

Lines changed: 8 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,14 @@
11
package com.flipcash.app.menu
22

3-
import androidx.compose.foundation.Image
43
import androidx.compose.foundation.layout.PaddingValues
5-
import androidx.compose.foundation.layout.Row
6-
import androidx.compose.foundation.layout.Spacer
7-
import androidx.compose.foundation.layout.fillMaxWidth
8-
import androidx.compose.foundation.layout.height
9-
import androidx.compose.foundation.layout.padding
10-
import androidx.compose.foundation.layout.width
11-
import androidx.compose.foundation.layout.wrapContentHeight
124
import androidx.compose.foundation.lazy.LazyColumn
135
import androidx.compose.foundation.lazy.LazyListState
146
import androidx.compose.foundation.lazy.items
157
import androidx.compose.foundation.lazy.rememberLazyListState
16-
import androidx.compose.material.Divider
17-
import androidx.compose.material.Icon
18-
import androidx.compose.material.Text
198
import androidx.compose.runtime.Composable
20-
import androidx.compose.ui.Alignment.Companion.CenterVertically
219
import androidx.compose.ui.Modifier
22-
import androidx.compose.ui.graphics.ColorFilter
23-
import androidx.compose.ui.res.painterResource
24-
import androidx.compose.ui.text.font.FontWeight
2510
import androidx.compose.ui.unit.dp
26-
import com.flipcash.shared.menu.R
27-
import com.getcode.theme.CodeTheme
28-
import com.getcode.ui.core.rememberedClickable
11+
import com.getcode.ui.components.ListItem
2912
import com.getcode.ui.core.verticalScrollStateGradient
3013
import com.getcode.ui.utils.sheetResignmentBehavior
3114

@@ -66,50 +49,12 @@ private fun <T> ListItem(
6649
showChevron: Boolean = false,
6750
onClick: () -> Unit
6851
) {
69-
Row(
70-
modifier = modifier
71-
.rememberedClickable { onClick() }
72-
.padding(CodeTheme.dimens.grid.x5)
73-
.fillMaxWidth()
74-
.wrapContentHeight(),
75-
verticalAlignment = CenterVertically
76-
) {
77-
Image(
78-
modifier = Modifier
79-
.padding(end = CodeTheme.dimens.inset)
80-
.height(CodeTheme.dimens.staticGrid.x5)
81-
.width(CodeTheme.dimens.staticGrid.x5),
82-
painter = item.icon,
83-
colorFilter = ColorFilter.tint(CodeTheme.colors.onBackground),
84-
contentDescription = ""
85-
)
86-
87-
Text(
88-
modifier = Modifier.align(CenterVertically),
89-
text = item.name,
90-
style = CodeTheme.typography.textLarge.copy(
91-
fontWeight = FontWeight.Bold
92-
),
93-
)
94-
95-
Spacer(Modifier.weight(1f))
96-
97-
if (item.isStaffOnly) {
98-
BetaIndicator()
99-
}
100-
101-
if (showChevron) {
102-
Icon(
103-
painter = painterResource(id = R.drawable.ic_chevron_right),
104-
contentDescription = null,
105-
tint = CodeTheme.colors.secondary,
106-
)
107-
}
108-
}
109-
110-
Divider(
111-
modifier = Modifier.padding(horizontal = CodeTheme.dimens.inset),
112-
color = CodeTheme.colors.divider,
113-
thickness = 0.5.dp
52+
ListItem(
53+
headline = item.name,
54+
icon = item.icon,
55+
modifier = modifier,
56+
onClick = onClick,
57+
showChevron = showChevron,
58+
showBetaIndicator = item.isStaffOnly,
11459
)
11560
}

apps/flipcash/shared/menu/src/main/kotlin/com/flipcash/app/menu/BetaIndicator.kt renamed to ui/components/src/main/kotlin/com/getcode/ui/components/BetaIndicator.kt

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
package com.flipcash.app.menu
1+
package com.getcode.ui.components
22

33
import androidx.compose.foundation.background
44
import androidx.compose.foundation.layout.Arrangement
55
import androidx.compose.foundation.layout.Box
66
import androidx.compose.foundation.layout.Row
77
import androidx.compose.foundation.layout.size
88
import androidx.compose.foundation.shape.CircleShape
9-
import androidx.compose.material.Text
9+
import androidx.compose.material3.Text
1010
import androidx.compose.runtime.Composable
1111
import androidx.compose.ui.Alignment.Companion.CenterVertically
1212
import androidx.compose.ui.Modifier
1313
import androidx.compose.ui.res.stringResource
14-
import com.flipcash.shared.menu.R
1514
import com.getcode.theme.CodeTheme
1615

1716
@Composable

‎ui/components/src/main/kotlin/com/getcode/ui/components/ListItem.kt‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
package com.getcode.ui.components
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.Spacer
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.height
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.width
10+
import androidx.compose.foundation.layout.wrapContentHeight
11+
import androidx.compose.material3.HorizontalDivider
12+
import androidx.compose.material3.Icon
13+
import androidx.compose.material3.Text
14+
import androidx.compose.runtime.Composable
15+
import androidx.compose.ui.Alignment.Companion.CenterVertically
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.graphics.ColorFilter
18+
import androidx.compose.ui.graphics.painter.Painter
19+
import androidx.compose.ui.res.painterResource
20+
import androidx.compose.ui.text.font.FontWeight
21+
import androidx.compose.ui.unit.dp
22+
import com.getcode.theme.CodeTheme
23+
import com.getcode.ui.core.rememberedClickable
24+
25+
@Composable
26+
fun ListItem(
27+
headline: String,
28+
icon: Painter?,
29+
modifier: Modifier = Modifier,
30+
showBetaIndicator: Boolean = false,
31+
showChevron: Boolean = true,
32+
onClick: () -> Unit,
33+
) {
34+
Row(
35+
modifier = modifier
36+
.rememberedClickable { onClick() }
37+
.padding(CodeTheme.dimens.grid.x5)
38+
.fillMaxWidth()
39+
.wrapContentHeight(),
40+
verticalAlignment = CenterVertically
41+
) {
42+
if (icon != null) {
43+
Image(
44+
modifier = Modifier
45+
.padding(end = CodeTheme.dimens.inset)
46+
.height(CodeTheme.dimens.staticGrid.x5)
47+
.width(CodeTheme.dimens.staticGrid.x5),
48+
painter = icon,
49+
colorFilter = ColorFilter.tint(CodeTheme.colors.onBackground),
50+
contentDescription = ""
51+
)
52+
}
53+
54+
Text(
55+
modifier = Modifier.align(CenterVertically),
56+
text = headline,
57+
style = CodeTheme.typography.textLarge.copy(
58+
fontWeight = FontWeight.Bold
59+
),
60+
color = CodeTheme.colors.textMain,
61+
)
62+
63+
Spacer(Modifier.weight(1f))
64+
65+
if (showBetaIndicator) {
66+
BetaIndicator()
67+
}
68+
69+
if (showChevron) {
70+
Icon(
71+
painter = painterResource(id = R.drawable.ic_chevron_right),
72+
contentDescription = null,
73+
tint = CodeTheme.colors.secondary,
74+
)
75+
}
76+
}
77+
78+
HorizontalDivider(
79+
modifier = Modifier.padding(horizontal = CodeTheme.dimens.inset),
80+
color = CodeTheme.colors.divider,
81+
thickness = 0.5.dp
82+
)
83+
}

‎ui/components/src/main/res/values/strings.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,6 @@
2929

3030
<string name="action_showMore">Show More</string>
3131
<string name="action_showLess">Show Less</string>
32+
33+
<string name="subtitle_beta">Beta</string>
3234
</resources>

0 commit comments

Comments
 (0)