feat: Improving the implementation of DatePicker (#23)

Author: sebaland

Sources/Authenticator/Models/SignUpField.swift

@@ -308,21 +308,23 @@ public extension SignUpField where Self == BaseSignUpField {
     /// A date-based field associated with the given attribute key
     /// - Parameter key: The `AuthUserAttributeKey`
     /// - Parameter label: The label that is displayed along the field
+    /// - Parameter placeholder: The placeholder that is displayed in the field
     /// - Parameter isRequired: Whether the view will require a date to be entered before proceeding. Defaults to false.
     /// - Parameter minDate: The minimum date this field's value can be set to. Defaults to nil
     /// - Parameter maxDate: The maximum date this field's value can be set to. Defaults to nil
     /// - Parameter validator: An additional validator that will be invoked before proceeding. Defaults to nil
     static func date(
         key: AuthUserAttributeKey,
         label: String,
+        placeholder: String,
         isRequired: Bool = false,
         minDate: Date? = nil,
         maxDate: Date? = nil,
         validator: FieldValidator? = nil
     ) -> SignUpField {
         return signUpField(
             label: label,
-            placeholder: "",
+            placeholder: placeholder,
             isRequired: isRequired,
             attributeType: .custom(attributeKey: key),
             inputType: .date,

Sources/Authenticator/Resources/en.lproj/Localizable.strings

@@ -15,6 +15,7 @@
 "authenticator.imageButton.open" = "Open";
 "authenticator.imageButton.showPassword" = "Show password";
 "authenticator.imageButton.hidePassword" = "Hide password";
+"authenticator.imageButton.calendar" = "Calendar";
 
 "authenticator.field.username.label" = "Username";
 "authenticator.field.username.placeholder" = "Enter your username";

Sources/Authenticator/Views/Internal/SignUpInputField.swift

@@ -52,6 +52,7 @@ struct SignUpInputField: View {
                 DatePicker(
                     field.label,
                     text: $field.value,
+                    placeholder: field.placeholder,
                     validator: validator
                 )
             case .phoneNumber:

Sources/Authenticator/Views/Primitives/DatePicker.swift

@@ -7,104 +7,157 @@
 
 import SwiftUI
 
-/// This field allows the user to select a Date and parse it to a ISO-8601 format.
-/// It displays a label and a "Select date" button, which when tapped shows a native DatePicker
-/// This is done in order to allow not selecting anything, which the native component doesn't
+/// This field allows the user to select a date and parse it to a ISO-8601 format.
+/// It allows to select a date by revealing a native `SwiftUI.DatePicker` when tapped.
+/// It also applies Amplify UI theming
 struct DatePicker: View {
     @Environment(\.isEnabled) private var isEnabled: Bool
     @Environment(\.authenticatorOptions) private var options
     @Environment(\.authenticatorTheme) var theme
     @ObservedObject private var validator: Validator
     @State private var selectedDate: Date = .now
     @State private var actualDate: Date? = nil
+    @State private var isShowingDatePicker = false
     @FocusState private var isFocused: Bool
     @Binding private var text: String
     private let label: String
+    private let placeholder: String
     private let formatter = ISO8601DateFormatter()
 
     init(_ label: String,
          text: Binding<String>,
+         placeholder: String,
          validator: Validator? = nil) {
         self.label = label
         self._text = text
-
+        self.placeholder = placeholder
         self.validator = validator ?? .init(
             using: FieldValidators.none
         )
         self.validator.value = text
     }
 
+#if os(iOS)
     var body: some View {
         VStack(alignment: .trailing, spacing: theme.components.field.spacing.vertical) {
-            HStack(alignment: .center, spacing: theme.components.field.spacing.horizontal) {
-                SwiftUI.Text(label)
-                    .foregroundColor(foregroundColor)
-                    .font(theme.fonts.body)
-                    .accessibilityHidden(true)
-
-                Spacer()
-
-                if actualDate == nil {
-                    HStack(spacing: 0) {
-                        Button("authenticator.field.date.label".localized()) {
-                            updateDate(selectedDate)
+            AuthenticatorField(
+                label,
+                placeholder: placeholder,
+                validator: validator,
+                isFocused: isFocused
+            ) {
+                HStack(spacing: 0) {
+                    createDisplayedDateText()
+
+                    Spacer()
+
+                    if !text.isEmpty {
+                        ImageButton(.clear) {
+                            actualDate = nil
+                            text = ""
+                            validator.validate()
                         }
-                        .buttonStyle(.link)
-                        .frame(maxWidth: nil)
+                        .tintColor(clearButtonColor)
+                        .padding([.top, .bottom, .trailing], theme.components.field.padding)
+                    }
 
-                        ImageButton(.open) {
-                            updateDate(selectedDate)
+                    Divider()
+                        .frame(width: 1)
+                        .overlay(theme.colors.border.primary)
+
+                    ImageButton(.calendar) {
+                        withAnimation {
+                            isShowingDatePicker.toggle()
                         }
-                        .tintColor(tintColor)
-                        .padding([.top, .bottom], theme.components.field.padding)
-                        .accessibilityHidden(true)
                     }
-                    .accessibilityAddTraits(.isButton)
-                    .accessibilityElement(children: .combine)
-                } else {
-                    SwiftUI.DatePicker(
-                        "",
-                        selection: $selectedDate,
-                        displayedComponents: .date
-                    )
-                    .fixedSize()
-                    .tint(theme.colors.background.interactive)
-                    .focused($isFocused)
-                    .onChange(of: selectedDate) { date in
-                        updateDate(date)
+                    .tintColor(tintColor)
+                    .padding(theme.components.field.padding)
+                    .frame(maxHeight: .infinity)
+                }
+            }
+            .contentShape(Rectangle())
+            .onTapGesture {
+                withAnimation {
+                    isShowingDatePicker.toggle()
+                }
+            }
+
+            createDatePicker(style: .graphical)
+                .frame(height: isShowingDatePicker ? nil : 0, alignment: .top)
+                .clipped()
+        }
+    }
+#elseif os(macOS)
+    var body: some View {
+        VStack(alignment: .trailing, spacing: theme.components.field.spacing.vertical) {
+            AuthenticatorField(
+                label,
+                placeholder: placeholder,
+                validator: validator,
+                isFocused: isFocused
+            ) {
+                HStack(spacing: 0) {
+                    if isShowingDatePicker {
+                        createDatePicker(height: 20, style: .stepperField)
+                    } else {
+                        createDisplayedDateText()
                     }
-                    .onChange(of: isFocused) { isFocused in
-                        if !isFocused {
+
+                    Spacer()
+
+                    if isShowingDatePicker {
+                        ImageButton(.clear) {
+                            actualDate = nil
+                            text = ""
                             validator.validate()
+                            isShowingDatePicker = false
                         }
+                        .tintColor(clearButtonColor)
+                        .padding([.top, .bottom, .trailing], theme.components.field.padding)
                     }
-
-                    ImageButton(.clear) {
-                        actualDate = nil
-                        text = ""
-                        validator.validate()
-                    }
-                    .tintColor(tintColor)
-                    .padding([.top, .bottom], theme.components.field.padding)
                 }
             }
-
-            if let errorMessage = errorMessage {
-                SwiftUI.Text(errorMessage)
-                    .font(theme.fonts.subheadline)
-                    .foregroundColor(borderColor)
-                .transition(options.contentTransition)
+            .contentShape(Rectangle())
+            .onTapGesture {
+                guard !Platform.isMacOS || text.isEmpty else {
+                    return
+                }
+                withAnimation {
+                    isShowingDatePicker.toggle()
+                }
             }
         }
-        .accessibilityElement(children: .contain)
-        .accessibilityLabel(accessibilityLabel)
-        .background(backgroundColor)
-        .animation(options.contentAnimation, value: validator.state)
+    }
+#endif
+
+    @ViewBuilder private func createDatePicker<S: DatePickerStyle>(
+        height: CGFloat? = nil,
+        style: S
+    ) -> some View {
+        SwiftUI.DatePicker(
+            "",
+            selection: $selectedDate,
+            displayedComponents: .date
+        )
+        .frame(height: height)
+        .datePickerStyle(style)
+        .tint(theme.colors.background.interactive)
+        .onChange(of: selectedDate) { date in
+            updateDate(date)
+        }
+        .padding([.top, .bottom], theme.components.field.padding)
+    }
 
+    @ViewBuilder private func createDisplayedDateText() -> some View {
+        Text(displayedDate)
+            .frame(height: Platform.isMacOS ? 20 : 25)
+            .padding([.top, .bottom, .leading], theme.components.field.padding)
+            .foregroundColor(text.isEmpty ? placeholderColor : theme.colors.foreground.primary)
+            .accessibilityAddTraits(.isButton)
     }
 
     private var tintColor: Color {
-        if actualDate == nil {
+        if isShowingDatePicker {
             return theme.colors.background.interactive
         }
 
@@ -142,19 +195,32 @@ struct DatePicker: View {
         validator.validate()
     }
 
-    private var errorMessage: String? {
-        if case .error(let message) = validator.state,
-            let message = message {
-            return String(format: message, label)
+    private var displayedDate: String {
+        guard let date = actualDate else {
+            return placeholder
         }
-        return nil
+
+        return date.formatted(
+            .dateTime
+                .day()
+                .month()
+                .year()
+        )
     }
 
-    private var accessibilityLabel: Text {
-        if let errorMessage = errorMessage {
-            return Text(errorMessage)
-        }
+    private var placeholderColor: Color {
+        Platform.isMacOS
+        ? Color(red: 178/255, green: 178/255, blue: 178/255)
+        : Color(red: 184/255, green: 184/255, blue: 187/255)
+    }
 
-        return Text(label)
+    private var clearButtonColor: Color {
+        switch validator.state {
+        case .normal:
+            return isFocused ?
+            theme.colors.border.interactive : theme.colors.border.primary
+        case .error:
+            return theme.colors.border.error
+        }
     }
 }

Sources/Authenticator/Views/Primitives/ImageButton.swift

@@ -55,6 +55,8 @@ struct ImageButton: View {
             return "authenticator.imageButton.showPassword".localized()
         case .hidePassword:
             return "authenticator.imageButton.hidePassword".localized()
+        case .calendar:
+            return "authenticator.imageButton.calendar".localized()
         }
     }
 }
@@ -66,5 +68,6 @@ extension ImageButton {
         case open = "chevron.down.circle"
         case showPassword = "eye.fill"
         case hidePassword = "eye.slash.fill"
+        case calendar = "calendar"
     }
 }