1
+ package dev.aaa1115910.bv.mobile.componment.home
2
+
3
+ import androidx.compose.foundation.background
4
+ import androidx.compose.foundation.layout.Arrangement
5
+ import androidx.compose.foundation.layout.Box
6
+ import androidx.compose.foundation.layout.Column
7
+ import androidx.compose.foundation.layout.Row
8
+ import androidx.compose.foundation.layout.Spacer
9
+ import androidx.compose.foundation.layout.fillMaxWidth
10
+ import androidx.compose.foundation.layout.height
11
+ import androidx.compose.foundation.layout.padding
12
+ import androidx.compose.material.icons.Icons
13
+ import androidx.compose.material.icons.filled.Menu
14
+ import androidx.compose.material.icons.filled.Search
15
+ import androidx.compose.material.icons.filled.Star
16
+ import androidx.compose.material3.DockedSearchBar
17
+ import androidx.compose.material3.ExperimentalMaterial3Api
18
+ import androidx.compose.material3.Icon
19
+ import androidx.compose.material3.IconButton
20
+ import androidx.compose.material3.MaterialTheme
21
+ import androidx.compose.material3.SearchBar
22
+ import androidx.compose.material3.Tab
23
+ import androidx.compose.material3.TabRow
24
+ import androidx.compose.material3.Text
25
+ import androidx.compose.runtime.Composable
26
+ import androidx.compose.runtime.getValue
27
+ import androidx.compose.runtime.mutableStateOf
28
+ import androidx.compose.runtime.remember
29
+ import androidx.compose.runtime.setValue
30
+ import androidx.compose.ui.Modifier
31
+ import androidx.compose.ui.semantics.isContainer
32
+ import androidx.compose.ui.semantics.semantics
33
+ import androidx.compose.ui.text.style.TextOverflow
34
+ import androidx.compose.ui.unit.dp
35
+ import androidx.compose.ui.zIndex
36
+
37
+ @Composable
38
+ fun HomeSearchTopBarCompact (
39
+ modifier : Modifier = Modifier ,
40
+ query : String ,
41
+ active : Boolean ,
42
+ onQueryChange : (String ) -> Unit ,
43
+ onActiveChange : (Boolean ) -> Unit ,
44
+ onOpenNavDrawer : () -> Unit
45
+ ) {
46
+ var state by remember { mutableStateOf(0 ) }
47
+ val titles = listOf (" Tab 1" , " Tab 2" , " Tab 3 with lots of text" )
48
+
49
+ Box (modifier = modifier) {
50
+ Column {
51
+ Row (
52
+ modifier = Modifier .fillMaxWidth(),
53
+ horizontalArrangement = Arrangement .Center
54
+ ) {
55
+ HomeSearchBar (
56
+ query = query,
57
+ active = active,
58
+ onQueryChange = onQueryChange,
59
+ onActiveChange = onActiveChange,
60
+ onOpenNavDrawer = onOpenNavDrawer
61
+ )
62
+ }
63
+
64
+ TabRow (selectedTabIndex = state) {
65
+ titles.forEachIndexed { index, title ->
66
+ Tab (
67
+ selected = state == index,
68
+ onClick = { state = index },
69
+ text = {
70
+ Text (
71
+ text = title,
72
+ maxLines = 2 ,
73
+ overflow = TextOverflow .Ellipsis
74
+ )
75
+ }
76
+ )
77
+ }
78
+ }
79
+ }
80
+ }
81
+ }
82
+
83
+ @OptIn(ExperimentalMaterial3Api ::class )
84
+ @Composable
85
+ fun HomeSearchTopBarExpanded (
86
+ modifier : Modifier = Modifier ,
87
+ query : String ,
88
+ active : Boolean ,
89
+ onQueryChange : (String ) -> Unit ,
90
+ onActiveChange : (Boolean ) -> Unit ,
91
+ ) {
92
+ Box (
93
+ modifier
94
+ .semantics { isContainer = true }
95
+ .zIndex(1f )
96
+ .fillMaxWidth()
97
+ ) {
98
+ Spacer (
99
+ modifier = Modifier
100
+ .fillMaxWidth()
101
+ .height(60 .dp)
102
+ .background(MaterialTheme .colorScheme.surface)
103
+ )
104
+ Row {
105
+ DockedSearchBar (
106
+ modifier = Modifier .padding(vertical = 3 .dp),
107
+ query = query,
108
+ onQueryChange = { onQueryChange(it) },
109
+ onSearch = { onActiveChange(false ) },
110
+ active = active,
111
+ onActiveChange = { onActiveChange(it) },
112
+ placeholder = { Text (" Hinted search text" ) },
113
+ leadingIcon = { Icon (Icons .Default .Search , contentDescription = null ) },
114
+ ) {
115
+
116
+ }
117
+ val titles = listOf (" Tab 1" , " Tab 2" , " Tab 3 with lots of text" )
118
+ var state by remember { mutableStateOf(0 ) }
119
+ TabRow (
120
+ selectedTabIndex = state
121
+ ) {
122
+ titles.forEachIndexed { index, title ->
123
+ Tab (
124
+ selected = state == index,
125
+ onClick = { state = index },
126
+ text = {
127
+ Text (
128
+ text = title,
129
+ maxLines = 2 ,
130
+ overflow = TextOverflow .Ellipsis
131
+ )
132
+ }
133
+ )
134
+ }
135
+ }
136
+ }
137
+ }
138
+ }
139
+
140
+ @OptIn(ExperimentalMaterial3Api ::class )
141
+ @Composable
142
+ private fun HomeSearchBar (
143
+ modifier : Modifier = Modifier ,
144
+ query : String ,
145
+ active : Boolean ,
146
+ onQueryChange : (String ) -> Unit ,
147
+ onActiveChange : (Boolean ) -> Unit ,
148
+ onOpenNavDrawer : () -> Unit
149
+ ) {
150
+ SearchBar (
151
+ modifier = modifier,
152
+ query = query,
153
+ onQueryChange = onQueryChange,
154
+ onSearch = { onActiveChange(false ) },
155
+ active = active,
156
+ onActiveChange = onActiveChange,
157
+ leadingIcon = {
158
+ if (! active) {
159
+ IconButton (onClick = onOpenNavDrawer) {
160
+ Icon (imageVector = Icons .Default .Menu , contentDescription = null )
161
+ }
162
+ } else {
163
+ Icon (imageVector = Icons .Default .Search , contentDescription = null )
164
+ }
165
+ },
166
+ trailingIcon = {
167
+ if (! active) {
168
+ Icon (imageVector = Icons .Default .Star , contentDescription = null )
169
+ }
170
+ },
171
+ ) { }
172
+ }
0 commit comments