feat(authenticator): Add a material3 datepicker to date fields. (#34)

Author: mattcreaser

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/DateInputField.kt

@@ -15,24 +15,41 @@
 
 package com.amplifyframework.ui.authenticator.ui
 
+import android.widget.DatePicker
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Button
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusDirection
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.OffsetMapping
 import androidx.compose.ui.text.input.TransformedText
 import androidx.compose.ui.text.input.VisualTransformation
+import com.amplifyframework.ui.authenticator.R
 import com.amplifyframework.ui.authenticator.forms.FieldConfig
 import com.amplifyframework.ui.authenticator.forms.MutableFieldState
 import com.amplifyframework.ui.authenticator.strings.StringResolver
+import java.time.Duration
+import java.time.LocalDate
 
 private val invalidDateChars = """[^\d-]+""".toRegex()
 
@@ -70,6 +87,7 @@ private object DateVisualTransformation : VisualTransformation {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun DateInputField(
     fieldConfig: FieldConfig.Date,
@@ -81,6 +99,9 @@ internal fun DateInputField(
 
     val label = StringResolver.label(fieldConfig)
     val hint = StringResolver.hint(fieldConfig)
+
+    var dialogVisible by remember { mutableStateOf(false) }
+
     OutlinedTextField(
         modifier = modifier,
         enabled = enabled,
@@ -98,6 +119,14 @@ internal fun DateInputField(
         keyboardActions = KeyboardActions(
             onNext = { focusManager.moveFocus(FocusDirection.Next) }
         ),
+        trailingIcon = {
+            IconButton(onClick = { dialogVisible = true }) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_authenticator_calendar),
+                    contentDescription = stringResource(R.string.amplify_ui_authenticator_field_a11y_date_picker)
+                )
+            }
+        },
         supportingText = {
             AuthenticatorFieldError(
                 modifier = Modifier.fillMaxWidth(),
@@ -106,6 +135,28 @@ internal fun DateInputField(
             )
         }
     )
+
+    if (dialogVisible) {
+        val datePickerState = rememberDatePickerState()
+        DatePickerDialog(
+            onDismissRequest = { dialogVisible = false },
+            confirmButton = {
+                Button(
+                    onClick = {
+                        datePickerState.selectedDateMillis?.let {
+                            // Convert the UTC milliseconds into an ISO 8601 date string
+                            fieldState.content = LocalDate.ofEpochDay(Duration.ofMillis(it).toDays()).toString()
+                        }
+                        dialogVisible = false
+                    }
+                ) {
+                    Text(stringResource(R.string.amplify_ui_authenticator_button_submit))
+                }
+            }
+        ) {
+            DatePicker(state = datePickerState, showModeToggle = false)
+        }
+    }
 }
 
 private fun filterDate(value: String): String {

authenticator/src/main/res/drawable/ic_authenticator_calendar.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4 3.01,4.9 3.01,6L3,20c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2V6C21,4.9 20.1,4 19,4zM19,20H5V10h14V20zM9,14H7v-2h2V14zM13,14h-2v-2h2V14zM17,14h-2v-2h2V14zM9,18H7v-2h2V18zM13,18h-2v-2h2V18zM17,18h-2v-2h2V18z"/>
+</vector>

authenticator/src/main/res/values/fields.xml

@@ -56,6 +56,9 @@
         <item quantity="other">* at least %d characters</item>
     </plurals>
 
+    <!-- Date field specific strings -->
+    <string name="amplify_ui_authenticator_field_a11y_date_picker">Select date</string>
+
     <!-- Confirm Password field specific strings -->
     <string name="amplify_ui_authenticator_field_hint_password_confirm">Re-enter your password</string>
     <string name="amplify_ui_authenticator_field_warn_unmatched_password">Passwords do not match</string>