1 /*
2  * Copyright (C) 2022 The Android Open Source Project
3  *
4  * Licensed under the Apache License, Version 2.0 (the "License");
5  * you may not use this file except in compliance with the License.
6  * You may obtain a copy of the License at
7  *
8  *      http://www.apache.org/licenses/LICENSE-2.0
9  *
10  * Unless required by applicable law or agreed to in writing, software
11  * distributed under the License is distributed on an "AS IS" BASIS,
12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13  * See the License for the specific language governing permissions and
14  * limitations under the License.
15  */
16 
17 package com.android.settingslib.spa.widget.ui
18 
19 import androidx.compose.foundation.background
20 import androidx.compose.foundation.layout.Box
21 import androidx.compose.foundation.layout.PaddingValues
22 import androidx.compose.foundation.layout.padding
23 import androidx.compose.foundation.selection.selectableGroup
24 import androidx.compose.material.icons.Icons
25 import androidx.compose.material.icons.outlined.ExpandLess
26 import androidx.compose.material.icons.outlined.ExpandMore
27 import androidx.compose.material3.Button
28 import androidx.compose.material3.ButtonDefaults
29 import androidx.compose.material3.DropdownMenu
30 import androidx.compose.material3.DropdownMenuItem
31 import androidx.compose.material3.Icon
32 import androidx.compose.material3.MaterialTheme
33 import androidx.compose.material3.Text
34 import androidx.compose.runtime.Composable
35 import androidx.compose.runtime.getValue
36 import androidx.compose.runtime.mutableStateOf
37 import androidx.compose.runtime.saveable.rememberSaveable
38 import androidx.compose.runtime.setValue
39 import androidx.compose.ui.Modifier
40 import androidx.compose.ui.graphics.Color
41 import androidx.compose.ui.tooling.preview.Preview
42 import androidx.compose.ui.unit.dp
43 import com.android.settingslib.spa.framework.theme.SettingsDimension
44 import com.android.settingslib.spa.framework.theme.SettingsTheme
45 
46 data class SpinnerOption(
47     val id: Int,
48     val text: String,
49 )
50 
51 @Composable
52 fun Spinner(options: List<SpinnerOption>, selectedId: Int?, setId: (id: Int) -> Unit) {
53     if (options.isEmpty()) {
54         return
55     }
56 
57     var expanded by rememberSaveable { mutableStateOf(false) }
58 
59     Box(
60         modifier = Modifier
61             .padding(
62                 start = SettingsDimension.itemPaddingStart,
63                 top = SettingsDimension.itemPaddingAround,
64                 end = SettingsDimension.itemPaddingEnd,
65                 bottom = SettingsDimension.itemPaddingAround,
66             )
67             .selectableGroup(),
68     ) {
69         val contentPadding = PaddingValues(horizontal = SettingsDimension.itemPaddingEnd)
70         Button(
71             onClick = { expanded = true },
72             colors = ButtonDefaults.buttonColors(
73                 containerColor = SettingsTheme.colorScheme.spinnerHeaderContainer,
74                 contentColor = SettingsTheme.colorScheme.onSpinnerHeaderContainer,
75             ),
76             contentPadding = contentPadding,
77         ) {
78             SpinnerText(options.find { it.id == selectedId })
79             Icon(
80                 imageVector = when {
81                     expanded -> Icons.Outlined.ExpandLess
82                     else -> Icons.Outlined.ExpandMore
83                 },
84                 contentDescription = null,
85             )
86         }
87         DropdownMenu(
88             expanded = expanded,
89             onDismissRequest = { expanded = false },
90             modifier = Modifier.background(SettingsTheme.colorScheme.spinnerItemContainer),
91         ) {
92             for (option in options) {
93                 DropdownMenuItem(
94                     text = {
95                         SpinnerText(
96                             option = option,
97                             modifier = Modifier.padding(end = 24.dp),
98                             color = SettingsTheme.colorScheme.onSpinnerItemContainer,
99                         )
100                     },
101                     onClick = {
102                         expanded = false
103                         setId(option.id)
104                     },
105                     contentPadding = contentPadding,
106                 )
107             }
108         }
109     }
110 }
111 
112 @Composable
113 private fun SpinnerText(
114     option: SpinnerOption?,
115     modifier: Modifier = Modifier,
116     color: Color = Color.Unspecified,
117 ) {
118     Text(
119         text = option?.text ?: "",
120         modifier = modifier
121             .padding(end = SettingsDimension.itemPaddingEnd)
122             .padding(vertical = SettingsDimension.itemPaddingAround),
123         color = color,
124         style = MaterialTheme.typography.labelLarge,
125     )
126 }
127 
128 @Preview(showBackground = true)
129 @Composable
130 private fun SpinnerPreview() {
131     SettingsTheme {
132         var selectedId by rememberSaveable { mutableStateOf(1) }
133         Spinner(
134             options = (1..3).map { SpinnerOption(id = it, text = "Option $it") },
135             selectedId = selectedId,
136             setId = { selectedId = it },
137         )
138     }
139 }
140