On watchOS, now stacking TextField and Presets button, per #2

openalloc · Oct 13, 2023 · 2b00f25 · 2b00f25
1 parent 3808a52
commit 2b00f25
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/Images/WTextField.jpg b/Images/WTextField.jpg
diff --git a/README.md b/README.md
@@ -8,13 +8,14 @@ _SwiftTextFieldPreset_ is part of the [OpenAlloc](https://github.com/openalloc)
 
 ## Features
 
-Text Field | Presets Picker
-:---:|:---:
-![](https://github.com/openalloc/SwiftTextFieldPreset/blob/main/Images/TextField.png)  |  ![](https://github.com/openalloc/SwiftTextFieldPreset/blob/main/Images/PresetsPicker.png)
+iOS | watchOS | Presets Picker
+:---:|:---:|:---:
+![](https://github.com/openalloc/SwiftTextFieldPreset/blob/main/Images/TextField.png)  |  ![](https://github.com/openalloc/SwiftTextFieldPreset/blob/main/Images/WTextField.jpg)  |  ![](https://github.com/openalloc/SwiftTextFieldPreset/blob/main/Images/PresetsPicker.png)
 
 * Builds on existing `TextField` component
 * Presently targeting .macOS(.v13), .iOS(.v16), .watchOS(.v9)
 * Only Apple's _Collections_ as an external dependency
+* Note: with WatchOS 10, it seems to be no longer possible to integrate the presets button into the TextField. Now separated in a VStack.
 
 ## Installation
 
@@ -71,7 +72,6 @@ Note that presets can be more than `String`, such as `struct`s with additional v
 
 Please submit pull requests if you'd like to tackle any of these. Thanks!
 
-* Image in this README
 * Usage documentation in this README
 * See if earlier versions of platforms can be supported
 

diff --git a/Sources/TextFieldPreset.swift b/Sources/TextFieldPreset.swift
@@ -58,23 +58,36 @@ public struct TextFieldPreset<ButtonLabel, GroupKey, PresettedItem, PickerLabel>
 
     @State private var isPresented = false
     @State private var selected: PresettedItem?
-
+    
     // MARK: - Views
 
     public var body: some View {
-        TextField(text: $text,
-                  prompt: Text(prompt),
-                  axis: axis) { EmptyView() }
-            .overlay {
-                HStack {
-                    Spacer()
-                    buttonLabel()
-                        .contentShape(Rectangle())
-                        .onTapGesture {
-                            isPresented = true
-                        }
-                }
+        Group {
+#if os(watchOS)
+            // NOTE: stack field/button for watch, as combining them via ZStack doesn't appear to work on watch hardware (though it worked on simulator for some reason!)
+            VStack {
+                TextField(text: $text,
+                          prompt: Text(prompt),
+                          axis: axis) { EmptyView() }
+                Button(action: { isPresented = true },
+                       label: buttonLabel)
+                .buttonStyle(.bordered)
             }
+#endif
+
+#if !os(watchOS)
+            ZStack(alignment: .trailing) {
+                TextField(text: $text,
+                          prompt: Text(prompt),
+                          axis: axis) { EmptyView() }
+                buttonLabel()
+                    .contentShape(Rectangle())
+                    .onTapGesture {
+                        isPresented = true
+                    }
+            }
+#endif
+        }
         .sheet(isPresented: $isPresented) {
             NavigationStack {
                 PresetsPicker(presets: presets,
@@ -113,9 +126,15 @@ struct TextFieldWithPresets_Previews: PreviewProvider {
         var body: some View {
             Form {
                 Section("TextField with Preset") {
-                    TextFieldPreset($name, prompt: "Enter name", axis: .vertical, presets: presets, pickerLabel: {
+                    TextFieldPreset($name, prompt: "Enter name", axis: .vertical, presets: presets,
+//                                    buttonLabel: {
+//                        Text("Foobar")
+//                    },
+                                    pickerLabel: {
                         Text($0.description)
                     })
+                    .accentColor(.orange)
+                    .padding(.vertical)
                 }
             }
             .padding()