Skip to content

Commit 1a2f369

Browse files
jakerosemanjakeroseman
authored
Timepickers redux (#296)
* Reworking the time picker examples to be more friendly to copy-pasting * Apply Spotless * Updating the time picker examples to be more copy-pastable * Change in-use tag name back to the current form. * Apply Spotless * Renaming region tags * Renaming region tags --------- Co-authored-by: jakeroseman <[email protected]>
1 parent a84c80d commit 1a2f369

File tree

1 file changed

+218
-91
lines changed
  • compose/snippets/src/main/java/com/example/compose/snippets/components

1 file changed

+218
-91
lines changed

‎compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt

Lines changed: 218 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ package com.example.compose.snippets.components
1818

1919
import androidx.compose.foundation.background
2020
import androidx.compose.foundation.layout.Arrangement
21+
import androidx.compose.foundation.layout.Box
2122
import androidx.compose.foundation.layout.Column
2223
import androidx.compose.foundation.layout.IntrinsicSize
2324
import androidx.compose.foundation.layout.Row
@@ -60,79 +61,180 @@ import java.util.Locale
6061
@OptIn(ExperimentalMaterial3Api::class)
6162
@Composable
6263
fun TimePickerExamples() {
64+
var showMenu by remember { mutableStateOf(true) }
65+
6366
var showDialExample by remember { mutableStateOf(false) }
6467
var showInputExample by remember { mutableStateOf(false) }
68+
var showDialWithDialogExample by remember { mutableStateOf(false) }
6569
var showAdvancedExample by remember { mutableStateOf(false) }
6670

6771
var selectedTime: TimePickerState? by remember { mutableStateOf(null) }
6872

6973
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
7074

71-
Column(
72-
modifier = Modifier
73-
.fillMaxSize()
74-
.padding(32.dp),
75-
horizontalAlignment = Alignment.CenterHorizontally,
76-
verticalArrangement = Arrangement.spacedBy(24.dp),
75+
Box(
76+
Modifier.fillMaxSize(),
77+
contentAlignment = Alignment.Center
7778
) {
78-
Button(onClick = {
79-
showDialExample = true
80-
}) {
81-
Text("Dial time picker")
79+
if (showMenu) {
80+
Column(
81+
modifier = Modifier
82+
.fillMaxSize()
83+
.padding(32.dp),
84+
horizontalAlignment = Alignment.CenterHorizontally,
85+
verticalArrangement = Arrangement.spacedBy(24.dp),
86+
) {
87+
Button(onClick = {
88+
showDialExample = true
89+
showMenu = false
90+
}) {
91+
Text("Dial time picker")
92+
}
93+
Button(onClick = {
94+
showInputExample = true
95+
showMenu = false
96+
}) {
97+
Text("Input time picker")
98+
}
99+
Button(onClick = {
100+
showDialWithDialogExample = true
101+
showMenu = false
102+
}) {
103+
Text("Time picker with dialog")
104+
}
105+
Button(onClick = {
106+
showAdvancedExample = true
107+
showMenu = false
108+
}) {
109+
Text("Time picker with custom dialog")
110+
}
111+
if (selectedTime != null) {
112+
val cal = Calendar.getInstance()
113+
cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
114+
cal.set(Calendar.MINUTE, selectedTime!!.minute)
115+
cal.isLenient = false
116+
Text("Selected time = ${formatter.format(cal.time)}")
117+
} else {
118+
Text("No time selected.")
119+
}
120+
}
82121
}
83-
Button(onClick = {
84-
showInputExample = true
85-
}) {
86-
Text("Input time picker")
122+
123+
when {
124+
showDialExample -> DialUseStateExample(
125+
onDismiss = {
126+
showDialExample = false
127+
showMenu = true
128+
},
129+
onConfirm = {
130+
time ->
131+
selectedTime = time
132+
showDialExample = false
133+
showMenu = true
134+
},
135+
)
136+
showInputExample -> InputUseStateExample(
137+
onDismiss = {
138+
showInputExample = false
139+
showMenu = true
140+
},
141+
onConfirm = {
142+
time ->
143+
selectedTime = time
144+
showInputExample = false
145+
showMenu = true
146+
},
147+
)
148+
showDialWithDialogExample -> DialWithDialogExample(
149+
onDismiss = {
150+
showDialWithDialogExample = false
151+
showMenu = true
152+
},
153+
onConfirm = {
154+
time ->
155+
selectedTime = time
156+
showDialWithDialogExample = false
157+
showMenu = true
158+
},
159+
)
160+
showAdvancedExample -> AdvancedTimePickerExample(
161+
onDismiss = {
162+
showAdvancedExample = false
163+
showMenu = true
164+
},
165+
onConfirm = {
166+
time ->
167+
selectedTime = time
168+
showAdvancedExample = false
169+
showMenu = true
170+
},
171+
)
87172
}
88-
Button(onClick = {
89-
showAdvancedExample = true
90-
}) {
91-
Text("Time picker with custom dialog")
173+
}
174+
}
175+
176+
@OptIn(ExperimentalMaterial3Api::class)
177+
// [START android_compose_components_dial]
178+
@Composable
179+
fun DialExample(
180+
onConfirm: () -> Unit,
181+
onDismiss: () -> Unit,
182+
) {
183+
val currentTime = Calendar.getInstance()
184+
185+
val timePickerState = rememberTimePickerState(
186+
initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
187+
initialMinute = currentTime.get(Calendar.MINUTE),
188+
is24Hour = true,
189+
)
190+
191+
Column {
192+
TimePicker(
193+
state = timePickerState,
194+
)
195+
Button(onClick = onDismiss) {
196+
Text("Dismiss picker")
92197
}
93-
if (selectedTime != null) {
94-
val cal = Calendar.getInstance()
95-
cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
96-
cal.set(Calendar.MINUTE, selectedTime!!.minute)
97-
cal.isLenient = false
98-
Text("Selected time = ${formatter.format(cal.time)}")
99-
} else {
100-
Text("No time selected.")
198+
Button(onClick = onConfirm) {
199+
Text("Confirm selection")
101200
}
102201
}
202+
}
203+
// [END android_compose_components_dial]
103204

104-
when {
105-
showDialExample -> DialExample(
106-
onDismiss = { showDialExample = false },
107-
onConfirm = {
108-
time ->
109-
selectedTime = time
110-
showDialExample = false
111-
},
112-
)
113-
showInputExample -> InputExample(
114-
onDismiss = { showInputExample = false },
115-
onConfirm = {
116-
time ->
117-
selectedTime = time
118-
showInputExample = false
119-
},
120-
)
121-
showAdvancedExample -> AdvancedTimePickerExample(
122-
onDismiss = { showAdvancedExample = false },
123-
onConfirm = {
124-
time ->
125-
selectedTime = time
126-
showAdvancedExample = false
127-
},
205+
@OptIn(ExperimentalMaterial3Api::class)
206+
// [START android_compose_components_input]
207+
@Composable
208+
fun InputExample(
209+
onConfirm: () -> Unit,
210+
onDismiss: () -> Unit,
211+
) {
212+
val currentTime = Calendar.getInstance()
213+
214+
val timePickerState = rememberTimePickerState(
215+
initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
216+
initialMinute = currentTime.get(Calendar.MINUTE),
217+
is24Hour = true,
218+
)
219+
220+
Column {
221+
TimeInput(
222+
state = timePickerState,
128223
)
224+
Button(onClick = onDismiss) {
225+
Text("Dismiss picker")
226+
}
227+
Button(onClick = onConfirm) {
228+
Text("Confirm selection")
229+
}
129230
}
130231
}
232+
// [END android_compose_components_input]
131233

132234
@OptIn(ExperimentalMaterial3Api::class)
133-
// [START android_compose_components_dial]
235+
// [START android_compose_components_dial_usestate]
134236
@Composable
135-
fun DialExample(
237+
fun DialUseStateExample(
136238
onConfirm: (TimePickerState) -> Unit,
137239
onDismiss: () -> Unit,
138240
) {
@@ -144,22 +246,53 @@ fun DialExample(
144246
is24Hour = true,
145247
)
146248

147-
// For information on how to implement a time picker dialog, see the "Dialogs for time pickers" guide.
148-
TimePickerDialog(
149-
onDismiss = { onDismiss() },
150-
onConfirm = { onConfirm(timePickerState) }
151-
) {
249+
Column {
152250
TimePicker(
153251
state = timePickerState,
154252
)
253+
Button(onClick = onDismiss) {
254+
Text("Dismiss picker")
255+
}
256+
Button(onClick = { onConfirm(timePickerState) }) {
257+
Text("Confirm selection")
258+
}
155259
}
156260
}
157-
// [END android_compose_components_dial]
261+
// [END android_compose_components_dial_usestate]
158262

159263
@OptIn(ExperimentalMaterial3Api::class)
160-
// [START android_compose_components_input]
264+
// [START android_compose_components_input_usestate]
161265
@Composable
162-
fun InputExample(
266+
fun InputUseStateExample(
267+
onConfirm: (TimePickerState) -> Unit,
268+
onDismiss: () -> Unit,
269+
) {
270+
val currentTime = Calendar.getInstance()
271+
272+
val timePickerState = rememberTimePickerState(
273+
initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
274+
initialMinute = currentTime.get(Calendar.MINUTE),
275+
is24Hour = true,
276+
)
277+
278+
Column {
279+
TimeInput(
280+
state = timePickerState,
281+
)
282+
Button(onClick = onDismiss) {
283+
Text("Dismiss picker")
284+
}
285+
Button(onClick = { onConfirm(timePickerState) }) {
286+
Text("Confirm selection")
287+
}
288+
}
289+
}
290+
// [END android_compose_components_input_usestate]
291+
292+
@OptIn(ExperimentalMaterial3Api::class)
293+
// [START android_compose_components_timepickerdialog]
294+
@Composable
295+
fun DialWithDialogExample(
163296
onConfirm: (TimePickerState) -> Unit,
164297
onDismiss: () -> Unit,
165298
) {
@@ -171,17 +304,38 @@ fun InputExample(
171304
is24Hour = true,
172305
)
173306

174-
// For information on how to implement a time picker dialog, see the "Dialogs for time pickers" guide.
175307
TimePickerDialog(
176308
onDismiss = { onDismiss() },
177309
onConfirm = { onConfirm(timePickerState) }
178310
) {
179-
TimeInput(
311+
TimePicker(
180312
state = timePickerState,
181313
)
182314
}
183315
}
184-
// [END android_compose_components_input]
316+
317+
@Composable
318+
fun TimePickerDialog(
319+
onDismiss: () -> Unit,
320+
onConfirm: () -> Unit,
321+
content: @Composable () -> Unit
322+
) {
323+
AlertDialog(
324+
onDismissRequest = onDismiss,
325+
dismissButton = {
326+
TextButton(onClick = { onDismiss() }) {
327+
Text("Dismiss")
328+
}
329+
},
330+
confirmButton = {
331+
TextButton(onClick = { onConfirm() }) {
332+
Text("OK")
333+
}
334+
},
335+
text = { content() }
336+
)
337+
}
338+
// [END android_compose_components_timepickerdialog]
185339

186340
@OptIn(ExperimentalMaterial3Api::class)
187341
// [START android_compose_components_advanced]
@@ -209,7 +363,6 @@ fun AdvancedTimePickerExample(
209363
Icons.Filled.AccessTime
210364
}
211365

212-
// For information on how to implement a time picker dialog, see the "Dialogs for time pickers" guide.
213366
AdvancedTimePickerDialog(
214367
onDismiss = { onDismiss() },
215368
onConfirm = { onConfirm(timePickerState) },
@@ -233,33 +386,7 @@ fun AdvancedTimePickerExample(
233386
}
234387
}
235388
}
236-
// [END android_compose_components_advanced]
237-
238-
// [START android_compose_components_timepickerdialog]
239-
@Composable
240-
fun TimePickerDialog(
241-
onDismiss: () -> Unit,
242-
onConfirm: () -> Unit,
243-
content: @Composable () -> Unit
244-
) {
245-
AlertDialog(
246-
onDismissRequest = onDismiss,
247-
dismissButton = {
248-
TextButton(onClick = { onDismiss() }) {
249-
Text("Dismiss")
250-
}
251-
},
252-
confirmButton = {
253-
TextButton(onClick = { onConfirm() }) {
254-
Text("OK")
255-
}
256-
},
257-
text = { content() }
258-
)
259-
}
260-
// [END android_compose_components_timepickerdialog]
261389

262-
// [START android_compose_components_advanceddialog]
263390
@Composable
264391
fun AdvancedTimePickerDialog(
265392
title: String = "Select Time",
@@ -310,4 +437,4 @@ fun AdvancedTimePickerDialog(
310437
}
311438
}
312439
}
313-
// [END android_compose_components_advanceddialog]
440+
// [END android_compose_components_advanced]

0 commit comments

Comments
 (0)