TimecodeField: Refactored separators to their own view, resovled so…

…me view layout issues
orchetect · Oct 17, 2024 · 597f2fe · 597f2fe
1 parent c94d67b
commit 597f2fe
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git a/Sources/TimecodeKitUI/SwiftUI/TimecodeField/TimecodeField SeparatorView.swift b/Sources/TimecodeKitUI/SwiftUI/TimecodeField/TimecodeField SeparatorView.swift
@@ -0,0 +1,40 @@
+//
+//  TimecodeField SeparatorView.swift
+//  TimecodeKit • https://github.com/orchetect/TimecodeKit
+//  © 2020-2024 Steffan Andrews • Licensed under MIT License
+//
+
+#if canImport(SwiftUI)
+
+import SwiftUI
+import TimecodeKitCore
+
+@available(macOS 14, iOS 17, *)
+@available(watchOS, unavailable)
+@available(tvOS, unavailable)
+extension TimecodeField {
+    /// Timecode separator view.
+    struct SeparatorView: View {
+        // MARK: - Properties settable through view initializers
+
+        let text: String
+
+        // MARK: - Properties settable through custom view modifiers
+
+        @Environment(\.timecodeSeparatorStyle) private var timecodeSeparatorStyle: Color?
+
+        // MARK: - Body
+
+        var body: some View {
+            ZStack {
+                Text(text)
+                    .lineLimit(1)
+                    .fixedSize()
+                    .allowsTightening(false)
+                    .conditionalForegroundStyle(timecodeSeparatorStyle)
+            }
+        }
+    }
+}
+
+#endif
diff --git a/Sources/TimecodeKitUI/SwiftUI/TimecodeField/TimecodeField.swift b/Sources/TimecodeKitUI/SwiftUI/TimecodeField/TimecodeField.swift
@@ -107,7 +107,6 @@ public struct TimecodeField: View {
 
     @Environment(\.timecodeFormat) private var timecodeFormat: Timecode.StringFormat
     @Environment(\.timecodeFieldHighlightStyle) private var timecodeHighlightStyle: Color?
-    @Environment(\.timecodeSeparatorStyle) private var timecodeSeparatorStyle: Color?
     @Environment(\.timecodeSubFramesStyle) private var timecodeSubFramesStyle: (color: Color?, scale: Text.Scale)
     @Environment(\.timecodeValidationStyle) private var timecodeValidationStyle: Color?
 
@@ -221,7 +220,7 @@ public struct TimecodeField: View {
     }
 
     private var timecodeBody: some View {
-        HStack(alignment: .firstTextBaseline, spacing: 0) {
+        HStack(spacing: 0) {
             if upperLimit == .max100Days {
                 TimecodeField.ComponentView(
                     component: .days,
@@ -231,8 +230,7 @@ public struct TimecodeField: View {
                     componentEditing: $componentEditing,
                     value: $components.days
                 )
-                Text(daysSeparator)
-                    .conditionalForegroundStyle(timecodeSeparatorStyle)
+                SeparatorView(text: daysSeparator)
             }
 
             TimecodeField.ComponentView(
@@ -244,8 +242,7 @@ public struct TimecodeField: View {
                 value: $components.hours
             )
 
-            Text(mainSeparator)
-                .conditionalForegroundStyle(timecodeSeparatorStyle)
+            SeparatorView(text: mainSeparator)
 
             TimecodeField.ComponentView(
                 component: .minutes,
@@ -256,8 +253,7 @@ public struct TimecodeField: View {
                 value: $components.minutes
             )
 
-            Text(mainSeparator)
-                .conditionalForegroundStyle(timecodeSeparatorStyle)
+            SeparatorView(text: mainSeparator)
 
             TimecodeField.ComponentView(
                 component: .seconds,
@@ -268,8 +264,7 @@ public struct TimecodeField: View {
                 value: $components.seconds
             )
 
-            Text(framesSeparator)
-                .conditionalForegroundStyle(timecodeSeparatorStyle)
+            SeparatorView(text: framesSeparator)
 
             TimecodeField.ComponentView(
                 component: .frames,
@@ -281,8 +276,7 @@ public struct TimecodeField: View {
             )
 
             if timecodeFormat.contains(.showSubFrames) {
-                Text(subFramesSeparator)
-                    .conditionalForegroundStyle(timecodeSeparatorStyle)
+                SeparatorView(text: subFramesSeparator)
 
                 TimecodeField.ComponentView(
                     component: .subFrames,