Add ability to combine Conditions together using the + operator. (#81)

Closes #76
ClutchEngineering · Aug 5, 2024 · 2fc9bc8 · 2fc9bc8
1 parent 484eb49
commit 2fc9bc8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/Sources/Slipstream/TailwindCSS/Condition.swift b/Sources/Slipstream/TailwindCSS/Condition.swift
@@ -25,6 +25,13 @@ public struct Condition {
     self.state = state
   }
 
+  /// Creates a Condition that applies within the range of breakpoints and set of states.
+  public init(within range: Range<Breakpoint>, state: State.Set) {
+    self.startingAtBreakpoint = range.lowerBound
+    self.endingBeforeBreakpoint = range.upperBound
+    self.state = state
+  }
+
   /// Creates a Condition that applies within the range of breakpoints.
   public init(within range: Range<Breakpoint>) {
     self.startingAtBreakpoint = range.lowerBound
@@ -51,6 +58,23 @@ public struct Condition {
     return Condition(within: range)
   }
 
+  /// Combines to Conditions as a union of both conditions' possible states.
+  public static func +(lhs: Self, rhs: Self) -> Self {
+    var union = lhs
+    if let lhsStarting = lhs.startingAtBreakpoint ?? rhs.startingAtBreakpoint,
+       let rhsStarting = rhs.startingAtBreakpoint ?? lhs.startingAtBreakpoint {
+      union.startingAtBreakpoint = min(lhsStarting, rhsStarting)
+    }
+    if let lhsEnding = lhs.endingBeforeBreakpoint ?? rhs.endingBeforeBreakpoint,
+       let rhsEnding = rhs.endingBeforeBreakpoint ?? lhs.endingBeforeBreakpoint {
+      union.endingBeforeBreakpoint = max(lhsEnding, rhsEnding)
+    }
+    if lhs.state != nil || rhs.state != nil {
+      union.state = (lhs.state ?? .init()).union((rhs.state ?? .init()))
+    }
+    return union
+  }
+
   var tailwindClassModifiers: String {
     var modifiers: [String] = []
     if let startingAtBreakpoint {
@@ -69,7 +93,7 @@ public struct Condition {
     return modifiers.joined(separator: ":")
   }
 
-  private let startingAtBreakpoint: Breakpoint?
-  private let endingBeforeBreakpoint: Breakpoint?
-  private let state: State.Set?
+  private var startingAtBreakpoint: Breakpoint?
+  private var endingBeforeBreakpoint: Breakpoint?
+  private var state: State.Set?
 }
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
@@ -55,7 +55,7 @@ private struct CatalogSite: View {
         .border(.black, width: 4, edges: .bottom)
         .backgroundImage(URL(string: "/logo.svg"), size: .size(width: 50, height: 100), repeat: .no)
         .textColor(.red, darkness: 800, condition: .dark)
-        .padding(.horizontal, 48, condition: .startingAt(.large))
+        .padding(.horizontal, 48, condition: .startingAt(.large) + .hover)
         .animation(.easeInOut(duration: 0.3))
       }
       .id("root")
@@ -75,7 +75,7 @@ struct CatalogSiteTests {
   <link rel="stylesheet" href="/css/bootstrap.css" />
  </head>
  <body id="root">
-  <div class="container border-b-4 border-black bg-[length:50px_100px] bg-[url('/logo.svg')] bg-no-repeat dark:text-red-800 lg:px-12 duration-300 ease-in-out">
+  <div class="container border-b-4 border-black bg-[length:50px_100px] bg-[url('/logo.svg')] bg-no-repeat dark:text-red-800 lg:hover:px-12 duration-300 ease-in-out">
    Hello
    <br />world!
    <a href="/about">About</a>