Create a formal dismissal mechanism for SwiftUI message

[wtmoose]

Make something like the dismiss environment value for SwiftMessages that will allow SwiftUI messages to self-dismiss.

[mergesort]

I'm running into this issue now, and would like to upvote this feature!

I've created a Banner that's displayed in a BannerView by conforming to MessageViewConvertible, but I have no way inside of the BannerView to dismiss the banner if a user taps on the BannerView, activating the action the associated action.

(Model)

public struct Banner: Equatable, Identifiable {
    public let style: Style
    public let title: LocalizedStringKey
    public let description: LocalizedStringKey?
    public let image: Image?
    public let action: Banner.Action?
}

(View)

extension Banner: MessageViewConvertible {
    public func asMessageView() -> some View {
        BannerView(banner: self)
            .padding(.large)
            .padding(.vertical, .huge + .large)
    }
}

As always, thank you so much for all of the hard work.

[wtmoose]

The recommended solution for dismissal is to use the view builder version of the swiftMessages modifier as follows:

struct ContentView: View {

    private struct Message: Equatable, Identifiable {
        var text: String
        var id: String { text }
    }

    @State private var message: Message?

    var body: some View {
        Button("Tap") {
            message = Message(text: "Testing")
        }
        .swiftMessage(message: $message) { message in
            // The message view
            VStack {
                Text(message.text)
                Button("OK") {
                    self.message = nil
                }
                .buttonStyle(.bordered)
            }
            .padding(50)
            .background(.yellow)
            .clipShape(RoundedRectangle(cornerRadius: 10))
        }
    }
}

The use of MessageViewConvertible is officially frowned upon by management. @mergesort thoughts on this approach?

[mergesort]

Thanks for the suggestion @wtmoose! As you requested, below is a rough version of how displaying notifications in my app works currently. I'm trying to think of the best way to port this over to the modifier style, with some constraints I have in the way I built this for the pre-SwiftUI approach. Right now the solution is rather decoupled, or I should say, the main dependency is a singular BannersController that is passed around as a dependency.

---

The BannersController hides away knowledge of any View layer, due to the global-nature of the SwiftMessages.show API.

public extension BannersController {
    func present(_ banner: Banner, direction: BannerDirection = .bottom, duration: BannerDuration = .automatic) {
        // We use this variant of SwiftMessages.show to ensure that the View is properly
        // dispatched onto the main queue, guarantees not provided by other variants.
        SwiftMessages.show(config: self.configuration(direction: direction, duration: duration)) {
            MessageHostingView(message: banner)
        }
    }

    func dismiss() {
        SwiftMessages.hide()
    }
}

That BannersController presents a Banner, which is all of the data needed to render a BannerView.

public struct Banner: Equatable, Identifiable {
    public let style: Style
    public let title: LocalizedStringKey
    public let description: LocalizedStringKey?
    public let image: Image?
    public let action: Banner.Action?

    public init(style: Style, title: LocalizedStringKey, description: LocalizedStringKey?, image: Image?, action: Banner.Action?) {
        self.style = style
        self.title = title
        self.description = description
        self.image = image
        self.action = action
    }

    public var id: String {
        UUID().uuidString
    }
}

public extension Banner {
    enum Style {
        case success
        case info
        case accent
        case error
    }
}

Eschewing some details for the sake of space.

public struct BannerView: View {
    @Environment(\.preferredColorPalette) private var palette
    @Environment(\.colorScheme) private var colorScheme

    private let banner: Banner

    public init(banner: Banner) {
        self.banner = banner
    }

    public var body: some View {
        HStack(alignment: .top) {
            if let bannerAction = banner.action {
                Button(action: bannerAction.action, label: {
                    self.contentView
                    self.button(for: bannerAction)
                })
            } else {
                self.contentView
            }
        }
        .conditionallyApplyWidthConstraints()
        .padding(.regular)
        .padding(.horizontal, .regular)
        .background(self.background)
        .background(.ultraThinMaterial.standardDropShadow())
        .containerShape(.rect(cornerRadius: .regular))
        .borderOverlay(withShape: .rect(cornerRadius: .regular), border: palette.alternativeBackground, width: .hairline)
        .padding(.horizontal, self.horizontalPadding)
    }
}

And the system is tied together by conforming Banner to MessageViewConvertible, so it can be presented.

extension Banner: MessageViewConvertible {
    public func asMessageView() -> some View {
        BannerView(banner: self)
            .padding(.large)
            .padding(.vertical, .huge + .large)
    }
}

Now whenever I want to present a banner, I pass in one of the pre-defined banners, like so.

// Called from anywhere in my app
self.bannersController.present(.linkCopied)

// Predefined banners
public extension Banner {
    static let linkCopied = Banner.info(
        title: LocalizedStringKey("BANNER_LINK_COPIED_TITLE", bundle: .module),
        image: Image.icons.link
    )
}

I believe I can port this over to the .swiftMessage(…) modifier, but it would be a big change by creating some global state or passing up state through Preferences, so any child can let the root view know that we have a message to display. Would appreciate any advice if you have a simpler solution!

[wtmoose]

With non-modifier approach, my initial thought is to put something in the environment your banner can use to dismiss, similar to Apple's dismiss environment value.

public struct BannerView: View {
    @Environment(\.swiftmessagesHide) private var hide

    private let banner: Banner

    public init(banner: Banner) {
        self.banner = banner
    }

    public var body: some View {
        //...
        Button("OK") {
            hide()
        }
    }
}

However, with this approach I think you'd need to also configure the environment value with a modifier in your root view:

public struct RootView: View {
    public var body: some View {
        Whatever()
            .installSwiftMessages()
    }
}

This will only allow you to dismiss the currently displayed banner. However, since presumably the user is tapping a button in the currently displayed banner, it seems sufficient. This is a pretty small change I could make in the next week or so.

[wtmoose]

I thought of another option that seems preferable to me and would require any SwiftMessages changes. There could be a flaw in this thinking, but:

1. Make BannersController an observable object that publishes structures containing a Banner and a SwiftMessages.Config.
2. Have the root view observe banners published by BannersController and present them using the swiftMessages() modifier.

[mergesort]

Thanks for the suggestions @wtmoose! I think both of these would work pretty well. In terms of an API, and I can use the latter for now, but I actually think the first would be a more idiomatic SwiftUI API, if you feel like it would be a worthwhile addition to the library.

[wtmoose]

I'm happy to add this, but IMO it is pseudo idiomatic and an approach I don't use myself.

With dismiss, the presented view doesn't need to know how it was presented, e.g. push navigation, sheet, etc. However, there's no way to make dismiss work with SwiftMessages, so the closest approximation is to introduce a similar value swiftmessagesHide. However, the presented view must be aware that it was presented with SwiftMessages.

[wtmoose]

@mergesort do you have any feedback on #574?