Skip to content

Commit a688b47

Browse files
ovitrifovitrif
authored
Merge pull request #93 from synonymdev/refactor/balance-header
Reorganize BalanceHeaderView sub components
2 parents a72fefe + 585a585 commit a688b47

File tree

1 file changed

+112
-73
lines changed

1 file changed

+112
-73
lines changed

‎app/src/main/java/to/bitkit/ui/components/BalanceHeaderView.kt‎

Lines changed: 112 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,22 @@ package to.bitkit.ui.components
33
import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.Spacer
7+
import androidx.compose.foundation.layout.fillMaxWidth
68
import androidx.compose.foundation.layout.height
79
import androidx.compose.foundation.layout.padding
810
import androidx.compose.runtime.Composable
911
import androidx.compose.ui.Alignment
1012
import androidx.compose.ui.Modifier
11-
import androidx.compose.ui.draw.alpha
13+
import androidx.compose.ui.tooling.preview.Preview
1214
import androidx.compose.ui.unit.dp
1315
import to.bitkit.models.ConvertedAmount
1416
import to.bitkit.models.PrimaryDisplay
1517
import to.bitkit.ui.LocalCurrencies
1618
import to.bitkit.ui.currencyViewModel
1719
import to.bitkit.ui.shared.util.clickableAlpha
20+
import to.bitkit.ui.theme.AppThemeSurface
21+
import to.bitkit.ui.theme.Colors
1822

1923
@Composable
2024
fun BalanceHeaderView(
@@ -27,97 +31,132 @@ fun BalanceHeaderView(
2731
val (rates, _, _, _, displayUnit, primaryDisplay) = LocalCurrencies.current
2832
val converted: ConvertedAmount? = if (rates.isNotEmpty()) currency.convert(sats = sats) else null
2933

34+
converted?.let { converted ->
35+
val btcComponents = converted.bitcoinDisplay(displayUnit)
36+
37+
if (primaryDisplay == PrimaryDisplay.BITCOIN) {
38+
BalanceHeader(
39+
modifier = modifier,
40+
smallRowPrefix = prefix,
41+
smallRowSymbol = converted.symbol,
42+
smallRowText = converted.formatted,
43+
largeRowPrefix = prefix,
44+
largeRowText = btcComponents.value,
45+
largeRowSymbol = btcComponents.symbol,
46+
showSymbol = showBitcoinSymbol,
47+
onClick = { currency.togglePrimaryDisplay() }
48+
)
49+
} else {
50+
BalanceHeader(
51+
modifier = modifier,
52+
smallRowPrefix = prefix,
53+
smallRowSymbol = btcComponents.symbol,
54+
smallRowText = btcComponents.value,
55+
largeRowPrefix = prefix,
56+
largeRowText = converted.formatted,
57+
largeRowSymbol = converted.symbol,
58+
showSymbol = true,
59+
onClick = { currency.togglePrimaryDisplay() }
60+
)
61+
}
62+
}
63+
}
64+
65+
@Composable
66+
fun BalanceHeader(
67+
modifier: Modifier = Modifier,
68+
smallRowPrefix: String? = null,
69+
smallRowSymbol: String? = null,
70+
smallRowText: String,
71+
largeRowPrefix: String? = null,
72+
largeRowText: String,
73+
largeRowSymbol: String,
74+
showSymbol: Boolean,
75+
onClick: () -> Unit
76+
) {
3077
Column(
31-
verticalArrangement = Arrangement.spacedBy(4.dp),
78+
verticalArrangement = Arrangement.Center,
3279
horizontalAlignment = Alignment.Start,
33-
modifier = modifier
34-
.clickableAlpha { currency.togglePrimaryDisplay() }
80+
modifier = modifier.clickableAlpha { onClick() }
3581
) {
36-
converted?.let { converted ->
37-
if (primaryDisplay == PrimaryDisplay.BITCOIN) {
38-
Column {
39-
SmallRow(
40-
prefix = prefix,
41-
text = "${converted.symbol} ${converted.formatted}"
42-
)
82+
SmallRow(
83+
prefix = smallRowPrefix,
84+
symbol = smallRowSymbol,
85+
text = smallRowText
86+
)
4387

44-
// large row
45-
val btcComponents = converted.bitcoinDisplay(displayUnit)
46-
Row(
47-
verticalAlignment = Alignment.CenterVertically,
48-
modifier = Modifier.height(62.dp)
49-
) {
50-
if (prefix != null) {
51-
Display(
52-
text = prefix,
53-
modifier = Modifier
54-
.alpha(0.6f)
55-
.padding(end = 8.dp)
56-
)
57-
}
58-
if (showBitcoinSymbol) {
59-
Display(
60-
text = btcComponents.symbol,
61-
modifier = Modifier
62-
.alpha(0.6f)
63-
.padding(end = 8.dp)
64-
)
65-
}
66-
Display(text = btcComponents.value)
67-
}
68-
}
69-
} else {
70-
Column {
71-
val btcComponents = converted.bitcoinDisplay(displayUnit)
72-
SmallRow(
73-
prefix = prefix,
74-
text = "${btcComponents.symbol} ${btcComponents.value}"
75-
)
88+
Spacer(modifier = Modifier.height(12.dp))
7689

77-
// large row
78-
Row(
79-
verticalAlignment = Alignment.CenterVertically,
80-
modifier = Modifier.height(62.dp)
81-
) {
82-
if (prefix != null) {
83-
Display(
84-
text = prefix,
85-
modifier = Modifier
86-
.alpha(0.6f)
87-
.padding(end = 8.dp)
88-
)
89-
}
90-
Display(
91-
text = converted.symbol,
92-
modifier = Modifier
93-
.alpha(0.6f)
94-
.padding(end = 8.dp)
95-
)
96-
Display(text = converted.formatted)
97-
}
98-
}
99-
}
100-
}
90+
LargeRow(
91+
prefix = largeRowPrefix,
92+
text = largeRowText,
93+
symbol = largeRowSymbol,
94+
showSymbol = showSymbol
95+
)
10196
}
10297
}
10398

10499
@Composable
105-
private fun SmallRow(prefix: String?, text: String) {
100+
fun LargeRow(prefix: String?, text: String, symbol: String, showSymbol: Boolean) {
106101
Row(
107102
verticalAlignment = Alignment.CenterVertically,
108-
modifier = Modifier
109-
.height(24.dp)
110-
.padding(bottom = 4.dp)
103+
) {
104+
if (prefix != null) {
105+
Display(
106+
text = prefix,
107+
color = Colors.White64,
108+
modifier = Modifier.padding(end = 8.dp)
109+
)
110+
}
111+
if (showSymbol) {
112+
Display(
113+
text = symbol,
114+
color = Colors.White64,
115+
modifier = Modifier.padding(end = 8.dp)
116+
)
117+
}
118+
Display(text = text)
119+
}
120+
}
121+
122+
@Composable
123+
private fun SmallRow(prefix: String?, symbol: String?, text: String) {
124+
Row(
125+
verticalAlignment = Alignment.Bottom,
126+
horizontalArrangement = Arrangement.spacedBy(4.dp),
111127
) {
112128
if (prefix != null) {
113129
Caption13Up(
114130
text = prefix,
115-
modifier = Modifier.alpha(0.6f)
131+
color = Colors.White64,
132+
)
133+
}
134+
if (symbol != null) {
135+
Caption13Up(
136+
text = symbol,
137+
color = Colors.White64,
116138
)
117139
}
118140
Caption13Up(
119141
text = text,
120-
modifier = Modifier.alpha(0.6f)
142+
color = Colors.White64,
143+
)
144+
}
145+
}
146+
147+
@Preview(showBackground = true)
148+
@Composable
149+
private fun Preview() {
150+
AppThemeSurface {
151+
BalanceHeader(
152+
smallRowPrefix = "$",
153+
smallRowText = "27.36",
154+
largeRowPrefix = "₿",
155+
largeRowText = "136 825",
156+
largeRowSymbol = "sats",
157+
showSymbol = false,
158+
modifier = Modifier.fillMaxWidth(),
159+
onClick = {}
121160
)
122161
}
123162
}

0 commit comments

Comments
 (0)