Adding advanced examples (#289)

* Adding advanced examples

* Apply Spotless

* Adding advanced examples

* Rename AdvancedTimePickerExample

---------

Co-authored-by: jakeroseman <[email protected]>

Author: jakeroseman

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

@@ -16,13 +16,27 @@
 
 package com.example.compose.snippets.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccessTime
+import androidx.compose.material.icons.filled.EditCalendar
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TimeInput
@@ -37,6 +51,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
 import java.text.SimpleDateFormat
 import java.util.Calendar
 import java.util.Locale
@@ -46,6 +62,7 @@ import java.util.Locale
 fun TimePickerExamples() {
     var showDialExample by remember { mutableStateOf(false) }
     var showInputExample by remember { mutableStateOf(false) }
+    var showAdvancedExample by remember { mutableStateOf(false) }
 
     var selectedTime: TimePickerState? by remember { mutableStateOf(null) }
 
@@ -60,16 +77,19 @@ fun TimePickerExamples() {
     ) {
         Button(onClick = {
             showDialExample = true
-            showInputExample = false
         }) {
             Text("Dial time picker")
         }
         Button(onClick = {
-            showDialExample = false
             showInputExample = true
         }) {
             Text("Input time picker")
         }
+        Button(onClick = {
+            showAdvancedExample = true
+        }) {
+            Text("Time picker with custom dialog")
+        }
         if (selectedTime != null) {
             val cal = Calendar.getInstance()
             cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
@@ -98,6 +118,14 @@ fun TimePickerExamples() {
                 showInputExample = false
             },
         )
+        showAdvancedExample -> AdvancedTimePickerExample(
+            onDismiss = { showAdvancedExample = false },
+            onConfirm = {
+                time ->
+                selectedTime = time
+                showAdvancedExample = false
+            },
+        )
     }
 }
 
@@ -153,6 +181,57 @@ fun InputExample(
 }
 // [END android_compose_components_input]
 
+@OptIn(ExperimentalMaterial3Api::class)
+// [START android_compose_components_advanced]
+@Composable
+fun AdvancedTimePickerExample(
+    onConfirm: (TimePickerState) -> Unit,
+    onDismiss: () -> Unit,
+) {
+
+    val currentTime = Calendar.getInstance()
+
+    val timePickerState = rememberTimePickerState(
+        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
+        initialMinute = currentTime.get(Calendar.MINUTE),
+        is24Hour = true,
+    )
+
+    /** Determines whether the time picker is dial or input */
+    var showDial by remember { mutableStateOf(true) }
+
+    /** The icon used for the icon button that switches from dial to input */
+    val toggleIcon = if (showDial) {
+        Icons.Filled.EditCalendar
+    } else {
+        Icons.Filled.AccessTime
+    }
+
+    AdvancedTimePickerDialog(
+        onDismiss = { onDismiss() },
+        onConfirm = { onConfirm(timePickerState) },
+        toggle = {
+            IconButton(onClick = { showDial = !showDial }) {
+                Icon(
+                    imageVector = toggleIcon,
+                    contentDescription = "Time picker type toggle",
+                )
+            }
+        },
+    ) {
+        if (showDial) {
+            TimePicker(
+                state = timePickerState,
+            )
+        } else {
+            TimeInput(
+                state = timePickerState,
+            )
+        }
+    }
+}
+// [END android_compose_components_advanced]
+
 // [START android_compose_components_timepickerdialog]
 @Composable
 fun TimePickerDialog(
@@ -176,3 +255,56 @@ fun TimePickerDialog(
     )
 }
 // [END android_compose_components_timepickerdialog]
+
+// [START android_compose_components_advanceddialog]
+@Composable
+fun AdvancedTimePickerDialog(
+    title: String = "Select Time",
+    onDismiss: () -> Unit,
+    onConfirm: () -> Unit,
+    toggle: @Composable () -> Unit = {},
+    content: @Composable () -> Unit,
+) {
+    Dialog(
+        onDismissRequest = onDismiss,
+        properties = DialogProperties(usePlatformDefaultWidth = false),
+    ) {
+        Surface(
+            shape = MaterialTheme.shapes.extraLarge,
+            tonalElevation = 6.dp,
+            modifier =
+            Modifier
+                .width(IntrinsicSize.Min)
+                .height(IntrinsicSize.Min)
+                .background(
+                    shape = MaterialTheme.shapes.extraLarge,
+                    color = MaterialTheme.colorScheme.surface
+                ),
+        ) {
+            Column(
+                modifier = Modifier.padding(24.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 20.dp),
+                    text = title,
+                    style = MaterialTheme.typography.labelMedium
+                )
+                content()
+                Row(
+                    modifier = Modifier
+                        .height(40.dp)
+                        .fillMaxWidth()
+                ) {
+                    toggle()
+                    Spacer(modifier = Modifier.weight(1f))
+                    TextButton(onClick = onDismiss) { Text("Cancel") }
+                    TextButton(onClick = onConfirm) { Text("OK") }
+                }
+            }
+        }
+    }
+}
+// [END android_compose_components_advanceddialog]