ItemSelectorSelectedProduct
Item Selector Selected Product
To create your own Item Selector selected item template you create a class that implements ItemSelectorSelectedProductProtocol
- Boilerplate
- Full Example
import SwiftUI
import mealzcore
import MealziOSSDK
@available(iOS 14, *)
public struct MyCustomItemSelectorSelectedProductView: ItemSelectorSelectedProductProtocol {
public func content(params: ItemSelectorSelectedProductParameters) -> some View {
// your imp here
}
}
import SwiftUI
import mealzcore
import MealziOSSDK
@available(iOS 14, *)
public struct MyCustomItemSelectorSelectedProductView: ItemSelectorSelectedProductProtocol {
public init() {}
let dimension = Dimension.sharedInstance
public func content(params: ItemSelectorSelectedProductParameters) -> some View {
ItemSelectorProductRow(product: params.product, isSelected: true)
.onTapGesture {
params.onSeeItemDetails(params.product.id)
}
}
struct ItemSelectorProductRow: View {
private var isSelected: Bool
private var product: Item
private var onSelectProduct: ((Item) -> Void)?
init(product: Item, isSelected: Bool = false, onSelectProduct: ((Item) -> Void)? = nil) {
self.isSelected = isSelected
self.product = product
self.onSelectProduct = onSelectProduct
}
var body: some View {
let capacity = (product.attributes?.capacityVolume ?? "") + " " + (product.attributes?.capacityUnit ?? "")
return VStack(spacing: 0) {
VStack {
HStack {
if let picture = URL(string: product.attributes?.image ?? "") {
AsyncImage(url: picture) { image in
image
.resizable()
.aspectRatio(contentMode: .fill)
}
.frame(width: 90, height: 90)
.clipped()
} else { Image.mealzIcon(icon: .pan).frame(width: 90, height: 90) }
VStack(alignment: .leading) {
Text(product.attributes?.brand ?? "" )
.miamFontStyle(style: MiamFontStyleProvider.sharedInstance.bodySmallBoldStyle)
.padding(.bottom, 8)
Text(product.attributes?.name ?? "")
.miamFontStyle(style: MiamFontStyleProvider.sharedInstance.bodySmallBoldStyle)
IngredientUnitBubble(capacity: capacity)
Spacer()
}.padding(16)
Spacer()
}
HStack {
if let unitPrice = product.attributes?.unitPrice {
Text(Double(unitPrice).currencyFormatted)
.foregroundColor(Color.mealzColor(.primaryText))
.miamFontStyle(style: MiamFontStyleProvider.sharedInstance.titleStyle)
}
Spacer()
Button(action: {
if let onSelectProduct { onSelectProduct(product) }
}, label: {
Text(isSelected ? Localization.itemSelector.inBasket.localised : Localization.itemSelector.select.localised )
.miamFontStyle(style: MiamFontStyleProvider.sharedInstance.bodyMediumBoldStyle)
.padding(.horizontal, 20)
.padding(.vertical, 9)
.foregroundColor(isSelected ? Color.mealzColor(.grayText) : Color.mealzColor(.white))
.background( isSelected ? Color.mealzColor(.lightBackground) : Color.mealzColor(.primary))
.cornerRadius(Dimension.sharedInstance.buttonCornerRadius)
})
}
}
.padding([.horizontal, .bottom], Dimension.sharedInstance.lPadding)
.background(
isSelected ? Color.mealzColor(.itemSelectedBackground) : Color.clear
)
Divider()
}
}
}
}
with
public struct ItemSelectorSelectedProductParameters {
/// The selected product
public let product: Item
/// A closure to see the details of the item if the retailer provides it
public let onSeeItemDetails: (String) -> Void