RecipeDetailsFloatingNavigation

RecipeDetailsFloatingNavigation

The FloatingNavigation is the first customizable component on the RecipeDetail at the very top of the page. It contains the "go back" button, like button, & title; to create your own recipe detail header you create a class that implements RecipeDetailsFloatingNavigationProtocol

Boilerplate

import SwiftUI
import mealzcore
import MealziOSSDK

@available(iOS 14, *)
public struct MyCustomRecipeDetailsFloatingNavigationView: RecipeDetailsFloatingNavigationProtocol {
public func content(params: RecipeDetailsFloatingNavigationParameters) -> some View {
    // your imp here
}
}

Full Example

import SwiftUI
import MealziOSSDK
import mealzcore

@available(iOS 14.0, *)
public struct MyCustomRecipeDetailsFloatingNavigationView: RecipeDetailsFloatingNavigationProtocol {
public func content(
    params: RecipeDetailsFloatingNavigationParameters
) -> some View {
    HStack {
        if params.displayRecipeTitle {
            thisView.closePage(onRecipeDetailsClosed: params.onRecipeDetailsClosed)
            Spacer()
            if let title = params.title {
                Text(title)
                    .miamFontStyle(style: MiamFontStyleProvider.sharedInstance.titleStyle)
                    .foregroundColor(Color.mealzColor(.standardDarkText))
            }
        } else {
            thisView.closePage(onRecipeDetailsClosed: params.onRecipeDetailsClosed)
            .   clipShape(Circle()).padding()
        }
        Spacer()
        thisView.likeButton(recipeId: params.recipeId, isEnabled: params.isLikeEnabled)
    }
     .background(params.displayRecipeTitle ? Color.mealzColor(.white) : Color.clear)
}

@ViewBuilder
public static func closePage(onRecipeDetailsClosed: @escaping () -> Void) -> some View {
    Button(action: onRecipeDetailsClosed, label: {
        Image.mealzIcon(icon: .caret)
            .renderingMode(.template)
            .rotationEffect(Angle(degrees: 180))
    }).frame(width: 40, height: 40)
        .foregroundColor(Color.mealzColor(.standardDarkText))
        .background(Color.mealzColor(.white))
    }

@ViewBuilder
public static func likeButton(recipeId: String, isEnabled: Bool) -> some View {
    if isEnabled {
        LikeButton(likeButtonInfo: LikeButtonInfo(recipeId: recipeId))
        .padding(Dimension.sharedInstance.mPadding)
    } else { EmptyView() }
}
}

with

public struct RecipeDetailsFloatingNavigationParameters {
    /// The recipe title
    public let title: String?
    /// The ID of recipe
    public let recipeId: String
    /// If the retailer allows the Mealz Like feature
    public let isLikeEnabled: Bool
    /// If the user has scrolled past the Recipe Title on the page, it should appear at the top of the page
    public let displayRecipeTitle: Bool
    /// Closure to close Page
    public let onRecipeDetailsClosed: () -> Void