zashi-ios-wallet-private/secant/UIComponents/CircularFrame/CircularFrameBackground.swift

86 lines
2.5 KiB
Swift

//
// CircularFrameBackground.swift
// secant-testnet
//
// Created by Adam Stener on 10/29/21.
//
import SwiftUI
import ComposableArchitecture
struct CircularFrameBackgroundImages: Animatable, ViewModifier {
struct ViewState: Equatable {
let index: Int
let images: [Image]
}
let store: Store<ViewState, Never>
func body(content: Content) -> some View {
WithViewStore(self.store) { viewStore in
ZStack {
ForEach(0..<viewStore.images.count - 1) { imageIndex in
viewStore.images[imageIndex]
.resizable()
.aspectRatio(1.3, contentMode: .fill)
.opacity(imageIndex == viewStore.index ? 1 : 0)
.offset(x: imageIndex <= viewStore.index ? 0 : 25)
.mask(Circle())
}
content
}
}
}
}
struct CircularFrameBackgroundImage: Animatable, ViewModifier {
let image: Image
func body(content: Content) -> some View {
ZStack {
image
.resizable()
.aspectRatio(1.3, contentMode: .fill)
.mask(Circle())
content
}
}
}
extension CircularFrame {
func backgroundImage(_ image: Image) -> some View {
modifier(CircularFrameBackgroundImage(image: image))
}
func backgroundImages(_ store: Store<CircularFrameBackgroundImages.ViewState, Never>) -> some View {
modifier(CircularFrameBackgroundImages(store: store))
}
}
struct CircularFrameBackground_Previews: PreviewProvider {
static let size: CGFloat = 300
static var previews: some View {
Group {
CircularFrame()
.backgroundImage(Asset.Assets.Backgrounds.callout0.image)
.frame(width: 300, height: 300)
CircularFrame()
.backgroundImage(Asset.Assets.Backgrounds.callout1.image)
.frame(width: 300, height: 300)
CircularFrame()
.backgroundImage(Asset.Assets.Backgrounds.callout2.image)
.frame(width: 300, height: 300)
CircularFrame()
.backgroundImage(Asset.Assets.Backgrounds.callout3.image)
.frame(width: 300, height: 300)
}
.preferredColorScheme(.light)
.previewLayout(.fixed(width: size + 50, height: size + 50))
}
}