[FloatingDisplay] Content design with SwiftUI (#180)

Author: muukii

Development/FluidInterfaceKit.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -5,10 +5,11 @@
 //  Created by Muukii on 2021/04/24.
 //
 
-import FluidStack
 import FluidSnackbar
+import FluidStack
 import SwiftUI
 
+@MainActor
 let snackbarController = FloatingDisplayController(
   edgeTargetSafeArea: .init(
     top: .notificationWindow,
@@ -20,14 +21,48 @@ let snackbarController = FloatingDisplayController(
 
 struct FloatingDisplayKitContentView: View {
   var body: some View {
-    VStack {
+    Form {
+
+      Button("Display Bar + SwiftUI content") {
+
+        snackbarController.display(
+          context: .init(
+            position: .top,
+            transition: .slideIn,
+            content: {
+              ZStack {
+                HStack {
+                  Image(systemName: "star")
+                    .resizable()
+                    .frame(width: 24, height: 24)
+
+                  Button("Dismiss") {
+                    
+                  }
+
+                }
+              }
+              .background(Color.red)
+            }
+          ),
+          waitsInQueue: false
+        )
+
+      }
+
       Button("Display Bar") {
-        snackbarController.deliver(
-          notification: .init {
-            DemoSnackbarView(text: "Hello")
-          },
-          animator: FloatingDisplaySlideInTrantision()
+
+        snackbarController.display(
+          context: .init(
+            viewBuilder: {
+              DemoSnackbarView(text: "Hello")
+            },
+            position: .top, 
+            transition: .slideIn
+          ),
+          waitsInQueue: false
         )
+
       }
 
       Button("Display Popup") {

Development/Sources/FluidInterfaceKit-Demo/DemoFloatingDisplayKit/FloatingDisplayKitContentView.swift

@@ -141,13 +141,14 @@ final class DemoRideauIntegrationViewController: FluidStackController {
 
 import SwiftUI
 import SwiftUISupport
+import SwiftUIHosting
 
 private final class SwiftUIContentViewController: UIViewController {
 
   override func viewDidLoad() {
     super.viewDidLoad()
 
-    let hostingView = HostingView { _ in
+    let hostingView = SwiftUIHostingView {
       ZStack {
         Color.red
         VStack(spacing: 0) {

Development/Sources/FluidInterfaceKit-Demo/DemoRideauIntegrationViewController.swift

@@ -18,20 +18,19 @@ let package = Package(
   ],
   dependencies: [
     .package(
-      name: "GeometryKit",
       url: "https://github.com/FluidGroup/GeometryKit",
       .upToNextMajor(from: "1.1.0")
     ),
     .package(
-      name: "ResultBuilderKit",
       url: "https://github.com/FluidGroup/ResultBuilderKit.git",
       .upToNextMajor(from: "1.2.0")
     ),
     .package(
-      name: "Rideau",
       url: "https://github.com/FluidGroup/Rideau.git",
       .upToNextMajor(from: "2.1.0")
     ),
+    .package(url: "https://github.com/FluidGroup/swiftui-Hosting", from: "1.2.0"),
+    .package(url: "https://github.com/FluidGroup/swift-rubber-banding", from: "1.0.0"),
   ],
   targets: [
     .target(
@@ -44,7 +43,12 @@ let package = Package(
     .target(
       name: "FluidRuntime"
     ),
-    .target(name: "FluidGesture"),
+    .target(
+      name: "FluidGesture",
+      dependencies: [
+        .product(name: "RubberBanding", package: "swift-rubber-banding")
+      ]
+    ),
     .target(
       name: "FluidTooltipSupport",
       dependencies: ["FluidPortal"]
@@ -55,7 +59,11 @@ let package = Package(
     ),
     .target(
       name: "FluidSnackbar",
-      dependencies: ["FluidCore"]
+      dependencies: [
+        "FluidCore",
+        .product(name: "SwiftUIHosting", package: "swiftui-Hosting"),
+        .product(name: "RubberBanding", package: "swift-rubber-banding"),
+      ]
     ),
     .target(
       name: "FluidPictureInPicture",
@@ -67,6 +75,6 @@ let package = Package(
     ),
     .target(name: "FluidKeyboardSupport"),
 
-    .testTarget(name: "FluidStackTests", dependencies: ["FluidStack"])
+    .testTarget(name: "FluidStackTests", dependencies: ["FluidStack"]),
   ]
 )

Package.resolved

@@ -1,4 +1,5 @@
 import UIKit
+import RubberBanding
 
 extension UIView {
 
@@ -307,34 +308,6 @@ public struct DragDescriptor {
 
 }
 
-private func rubberBand(value: CGFloat, min: CGFloat, max: CGFloat, bandLength: CGFloat) -> CGFloat
-{
-  if value >= min && value <= max {
-    // While we're within range we don't rubber band the value.
-    return value
-  }
-
-  if bandLength <= 0 {
-    // The rubber band doesn't exist, return the minimum value so that we stay put.
-    return min
-  }
-
-  let rubberBandCoefficient: CGFloat = 0.55
-  // Accepts values from [0...+inf and ensures that f(x) < bandLength for all values.
-  let band: (CGFloat) -> CGFloat = { value in
-    let demoninator = value * rubberBandCoefficient / bandLength + 1
-    return bandLength * (1 - 1 / demoninator)
-  }
-  if value > max {
-    return band(value - max) + max
-
-  } else if value < min {
-    return min - band(min - value)
-  }
-
-  return value
-}
-
 private var ref: Void?
 
 extension UIPanGestureRecognizer {

Package.swift

@@ -1,12 +1,11 @@
-
+import SwiftUI
+import SwiftUIHosting
 import UIKit
 
-/**
- A context object that provides a concrete view to display
- */
+/// A context object that provides a concrete view to display
 open class FloatingDisplayContext: Hashable {
 
-  public static func ==(lhs: FloatingDisplayContext, rhs: FloatingDisplayContext) -> Bool {
+  public static func == (lhs: FloatingDisplayContext, rhs: FloatingDisplayContext) -> Bool {
     lhs === rhs
   }
 
@@ -16,24 +15,9 @@ open class FloatingDisplayContext: Hashable {
 
   private let factory: () -> FloatingDisplayViewType
 
-  public var transition: FloatingDisplayTransitionType
-
-  public var position: FloatingDisplayController.DisplayPosition
-
-  /// A view that currently displaying.
-  public private(set) weak var view: FloatingDisplayViewType?
+  public let transition: FloatingDisplayTransitionType
 
-  /// A Boolean value that indicates deliverly was cancelled.
-  open var wasCancelled: Bool = false
-
-  @available(*, deprecated, message: "Use the new initializer")
-  public init(
-    factory: @escaping () -> FloatingDisplayViewType
-  ) {
-    self.factory = factory
-    self.transition = FloatingDisplaySlideInTrantision()
-    self.position = .top
-  }
+  public let position: FloatingDisplayController.DisplayPosition
 
   public init(
     viewBuilder: @escaping () -> FloatingDisplayViewType,
@@ -48,8 +32,43 @@ open class FloatingDisplayContext: Hashable {
   func makeView() -> FloatingDisplayViewType {
     factory()
   }
+}
+
+extension FloatingDisplayContext {
+
+  public convenience init<Content: View>(
+    position: FloatingDisplayController.DisplayPosition,
+    transition: FloatingDisplayTransitionType,
+    @ViewBuilder content: @escaping () -> Content
+  ) {
+
+    self.init(
+      viewBuilder: {
+        _HostingWrapperView(hostingView: SwiftUIHostingView(content: content))
+      },
+      position: position,
+      transition: transition
+    )
+
+  }
 
-  func setView(_ view: FloatingDisplayViewType) {
-    self.view = view
+}
+
+private final class _HostingWrapperView: SnackbarDraggableBase {
+
+  private let hostingView: SwiftUIHostingView
+
+  init(hostingView: SwiftUIHostingView) {
+    self.hostingView = hostingView
+    super.init(topMargin: .zero)
+    contentView.addSubview(hostingView)
+    hostingView.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      hostingView.topAnchor.constraint(equalTo: contentView.topAnchor),
+      hostingView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
+      hostingView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
+      hostingView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
+    ])
   }
+
 }

Sources/FluidGesture/Drag.swift

@@ -1,5 +1,6 @@
 import UIKit
 
+@MainActor
 open class FloatingDisplayController {
 
   private struct State: Equatable {
@@ -95,17 +96,6 @@ open class FloatingDisplayController {
 
   }
 
-  @available(*, deprecated)
-  open func deliver(
-    notification context: FloatingDisplayContext,
-    animator: FloatingDisplayTransitionType
-  ) {
-    assert(Thread.isMainThread)
-
-    context.transition = animator
-    enqueue(context: context)
-  }
-
   private func _display(
     context: FloatingDisplayContext,
     onDidDismiss: @escaping (FloatingDisplayViewType) -> Void
@@ -181,7 +171,6 @@ open class FloatingDisplayController {
     }
 
     let notificationView = context.makeView()
-    context.setView(notificationView)
 
     let position = context.position
     let transition = context.transition

Sources/FluidSnackbar/FloatingDisplayContext.swift

@@ -38,3 +38,11 @@ public struct FloatingDisplayPopupTransition: FloatingDisplayTransitionType {
     animator.startAnimation()
   }
 }
+
+extension FloatingDisplayTransitionType where Self == FloatingDisplayPopupTransition {
+
+  public static var popup: Self {
+    .init()
+  }
+
+}

Sources/FluidSnackbar/FloatingDisplayController.swift

@@ -103,3 +103,19 @@ public struct FloatingDisplayFloatUpTrantision: FloatingDisplayTransitionType {
 
   }
 }
+
+extension FloatingDisplayTransitionType where Self == FloatingDisplaySlideInTrantision {
+
+  public static var slideIn: Self {
+    FloatingDisplaySlideInTrantision()
+  }
+
+}
+
+extension FloatingDisplayTransitionType where Self == FloatingDisplayFloatUpTrantision {
+
+  public static var floatUp: Self {
+    FloatingDisplayFloatUpTrantision()
+  }
+
+}