1
1
package com.eshc.goonersapp.core.designsystem.component
2
2
3
3
import androidx.compose.foundation.BorderStroke
4
+ import androidx.compose.foundation.background
4
5
import androidx.compose.foundation.clickable
5
6
import androidx.compose.foundation.layout.Box
7
+ import androidx.compose.foundation.layout.Column
8
+ import androidx.compose.foundation.layout.PaddingValues
6
9
import androidx.compose.foundation.layout.fillMaxWidth
10
+ import androidx.compose.foundation.layout.heightIn
7
11
import androidx.compose.foundation.layout.padding
12
+ import androidx.compose.foundation.layout.wrapContentHeight
8
13
import androidx.compose.foundation.lazy.LazyColumn
9
- import androidx.compose.foundation.lazy.itemsIndexed
10
- import androidx.compose.foundation.lazy.rememberLazyListState
14
+ import androidx.compose.foundation.lazy.items
15
+ import androidx.compose.foundation.shape.CircleShape
11
16
import androidx.compose.foundation.shape.RoundedCornerShape
12
17
import androidx.compose.material3.ButtonDefaults
13
18
import androidx.compose.material3.HorizontalDivider
14
19
import androidx.compose.material3.Icon
15
- import androidx.compose.material3.LocalContentColor
16
- import androidx.compose.material3.MaterialTheme
17
20
import androidx.compose.material3.OutlinedButton
18
- import androidx.compose.material3.Surface
19
21
import androidx.compose.material3.Text
20
22
import androidx.compose.runtime.Composable
21
- import androidx.compose.runtime.CompositionLocalProvider
22
- import androidx.compose.runtime.LaunchedEffect
23
23
import androidx.compose.runtime.getValue
24
24
import androidx.compose.runtime.mutableStateOf
25
25
import androidx.compose.runtime.remember
26
26
import androidx.compose.runtime.setValue
27
+ import androidx.compose.ui.Alignment
27
28
import androidx.compose.ui.Modifier
29
+ import androidx.compose.ui.draw.clip
30
+ import androidx.compose.ui.graphics.Color
28
31
import androidx.compose.ui.unit.dp
29
- import androidx.compose.ui.window.Dialog
30
32
import com.eshc.goonersapp.core.designsystem.IconPack
31
33
import com.eshc.goonersapp.core.designsystem.iconpack.IcArrowDown
34
+ import com.eshc.goonersapp.core.designsystem.theme.ColorFF000000
35
+ import com.eshc.goonersapp.core.designsystem.theme.ColorFF181818
32
36
import com.eshc.goonersapp.core.designsystem.theme.ColorFF777777
33
37
import com.eshc.goonersapp.core.designsystem.theme.ColorFF9E9E9E
34
38
import com.eshc.goonersapp.core.designsystem.theme.ColorFFDCDCDC
39
+ import com.eshc.goonersapp.core.designsystem.theme.ColorFFF5F5F5
35
40
import com.eshc.goonersapp.core.designsystem.theme.GnrTypography
36
- import com.eshc.goonersapp.core.designsystem.theme.GoonersAppTheme
37
41
38
42
@Composable
39
- fun <T > GnrDropdownMenu (
43
+ fun GnrDropdownMenuWithBottomSheet (
44
+ label : String ,
40
45
modifier : Modifier = Modifier ,
41
- label : String = "",
42
- items : List <T > = emptyList(),
43
- notSetLabel : String? = null,
44
- selectedIndex : Int = -1,
45
- onItemSelected : (index: Int , item: T ) -> Unit ,
46
- selectedItemToString : (T ) -> String = { it.toString() },
47
- drawItem : @Composable (T , Boolean , Boolean , () -> Unit ) -> Unit = { item, selected, itemEnabled, onClick ->
48
- LargeDropdownMenuItem (
49
- text = item.toString(),
50
- selected = selected,
51
- enabled = itemEnabled,
52
- onClick = onClick,
53
- )
54
- },
46
+ bottomSheetContent : @Composable (()-> Unit ) -> Unit
55
47
) {
56
48
var expanded by remember { mutableStateOf(false ) }
57
49
@@ -61,7 +53,7 @@ fun <T> GnrDropdownMenu(
61
53
contentColor = ColorFF9E9E9E
62
54
),
63
55
border = BorderStroke (1 .dp, ColorFFDCDCDC ),
64
- shape = RoundedCornerShape ( 100 .dp) ,
56
+ shape = CircleShape ,
65
57
onClick = {
66
58
expanded = true
67
59
}
@@ -70,7 +62,7 @@ fun <T> GnrDropdownMenu(
70
62
modifier = Modifier
71
63
.weight(1f )
72
64
.padding(end = 4 .dp),
73
- text = items.getOrNull(selectedIndex)?. let { selectedItemToString(it) } ? : label,
65
+ text = label,
74
66
style = GnrTypography .body1Regular,
75
67
color = ColorFF777777
76
68
)
@@ -81,75 +73,97 @@ fun <T> GnrDropdownMenu(
81
73
}
82
74
83
75
if (expanded) {
84
- Dialog (
85
- onDismissRequest = { expanded = false },
76
+ GnrBottomSheet (
77
+ onDismiss = {
78
+ expanded = ! expanded
79
+ }
86
80
) {
87
- GoonersAppTheme {
88
- Surface (
89
- shape = RoundedCornerShape (12 .dp),
90
- ) {
91
- val listState = rememberLazyListState()
92
- if (selectedIndex > - 1 ) {
93
- LaunchedEffect (" ScrollToSelected" ) {
94
- listState.scrollToItem(index = selectedIndex)
95
- }
96
- }
97
-
98
- LazyColumn (modifier = Modifier .fillMaxWidth(), state = listState) {
99
- if (notSetLabel != null ) {
100
- item {
101
- LargeDropdownMenuItem (
102
- text = notSetLabel,
103
- selected = false ,
104
- enabled = false ,
105
- onClick = { },
106
- )
107
- }
108
- }
109
- itemsIndexed(items) { index, item ->
110
- val selectedItem = index == selectedIndex
111
- drawItem(
112
- item,
113
- selectedItem,
114
- true
115
- ) {
116
- onItemSelected(index, item)
117
- expanded = false
118
- }
81
+ bottomSheetContent{
82
+ expanded = ! expanded
83
+ }
84
+ }
85
+ }
86
+ }
119
87
120
- if (index < items.lastIndex) {
121
- HorizontalDivider (modifier = Modifier .padding(horizontal = 16 .dp))
122
- }
123
- }
124
- }
125
- }
88
+ @Composable
89
+ fun <T > GnrMenuContent (
90
+ title : String ,
91
+ menuItems : List <T >,
92
+ selectedItem : T ? = null,
93
+ onClick : (T ? ) -> Unit ,
94
+ modifier : Modifier = Modifier
95
+ ) {
96
+ var selected by remember {
97
+ mutableStateOf(selectedItem)
98
+ }
99
+ Column (
100
+ modifier = modifier,
101
+ horizontalAlignment = Alignment .CenterHorizontally
102
+ ) {
103
+ Text (
104
+ modifier = Modifier .padding(vertical = 7 .dp),
105
+ text = title,
106
+ style = GnrTypography .heading2SemiBold,
107
+ color = ColorFF181818
108
+ )
109
+ LazyColumn (
110
+ modifier = Modifier
111
+ .fillMaxWidth()
112
+ .heightIn(max = 217 .dp),
113
+ contentPadding = PaddingValues (start = 15 .dp, end = 15 .dp, bottom = 16 .dp)
114
+ ) {
115
+ items(
116
+ menuItems
117
+ ) {
118
+ GnrMenuItem (
119
+ text = it.toString(),
120
+ selected = selected == it,
121
+ onClick = {
122
+ selected = it
123
+ },
124
+ modifier = Modifier .fillMaxWidth()
125
+ )
126
126
}
127
127
}
128
+ HorizontalDivider ()
129
+ GnrTextButton (
130
+ modifier = Modifier
131
+ .padding(vertical = 16 .dp, horizontal = 50 .dp)
132
+ .fillMaxWidth()
133
+ .wrapContentHeight(),
134
+ onClick = {
135
+ onClick(selected)
136
+ },
137
+ text = " OK"
138
+ )
128
139
}
140
+
129
141
}
130
142
131
143
@Composable
132
- fun LargeDropdownMenuItem (
144
+ fun GnrMenuItem (
133
145
text : String ,
134
146
selected : Boolean ,
135
- enabled : Boolean ,
136
147
onClick : () -> Unit ,
148
+ modifier : Modifier = Modifier
137
149
) {
138
- val contentColor = when {
139
- ! enabled -> MaterialTheme .colorScheme.onSurface
140
- selected -> MaterialTheme .colorScheme.primary
141
- else -> MaterialTheme .colorScheme.onSurface
150
+ Box (
151
+ modifier = modifier
152
+ .wrapContentHeight()
153
+ .clip(RoundedCornerShape (10 .dp))
154
+ .background(if (selected) ColorFFF5F5F5 else Color .Transparent )
155
+ .clickable {
156
+ onClick()
157
+ }
158
+ .padding(vertical = 7 .dp)
159
+ ,
160
+ contentAlignment = Alignment .Center
161
+ ) {
162
+ Text (
163
+ text = text,
164
+ style = GnrTypography .body1Medium,
165
+ color = ColorFF000000
166
+ )
142
167
}
143
168
144
- CompositionLocalProvider (LocalContentColor provides contentColor) {
145
- Box (modifier = Modifier
146
- .clickable(enabled) { onClick() }
147
- .fillMaxWidth()
148
- .padding(16 .dp)) {
149
- Text (
150
- text = text,
151
- style = MaterialTheme .typography.titleSmall,
152
- )
153
- }
154
- }
155
169
}
0 commit comments