2021-10-15 06:46:21 -07:00
|
|
|
//
|
|
|
|
// OnboardingProgressIndicator.swift
|
|
|
|
// secant-testnet
|
|
|
|
//
|
|
|
|
// Created by Adam Stener on 10/15/21.
|
|
|
|
//
|
|
|
|
|
|
|
|
import SwiftUI
|
|
|
|
|
|
|
|
struct OnboardingProgressStyle: ProgressViewStyle {
|
|
|
|
let height: CGFloat = 3
|
|
|
|
let gradient = LinearGradient(
|
|
|
|
colors: [
|
|
|
|
Asset.Colors.ProgressIndicator.gradientLeft.color,
|
|
|
|
Asset.Colors.ProgressIndicator.gradientRight.color
|
|
|
|
],
|
2022-02-21 12:17:49 -08:00
|
|
|
startPoint: .leading,
|
|
|
|
endPoint: .trailing
|
2021-10-15 06:46:21 -07:00
|
|
|
)
|
|
|
|
|
|
|
|
func makeBody(configuration: Configuration) -> some View {
|
|
|
|
let fractionCompleted = configuration.fractionCompleted ?? 0
|
|
|
|
|
|
|
|
return VStack {
|
|
|
|
HStack {
|
|
|
|
configuration.label
|
2022-02-21 12:17:49 -08:00
|
|
|
.foregroundColor(Asset.Colors.Text.heading.color)
|
|
|
|
.font(.custom(FontFamily.Rubik.regular.name, size: 16))
|
|
|
|
.opacity(0.3)
|
2021-10-15 06:46:21 -07:00
|
|
|
|
|
|
|
Spacer()
|
|
|
|
}
|
|
|
|
|
|
|
|
ZStack {
|
|
|
|
GeometryReader { proxy in
|
|
|
|
let currentWidth = proxy.size.width
|
|
|
|
let progressMaxWidth = currentWidth * CGFloat(fractionCompleted)
|
|
|
|
let trailingMaxWidth = currentWidth - (currentWidth * CGFloat(fractionCompleted))
|
|
|
|
|
|
|
|
HStack(spacing: 15) {
|
|
|
|
if fractionCompleted > 0 {
|
|
|
|
Capsule()
|
|
|
|
.fill(gradient)
|
|
|
|
.frame(maxWidth: progressMaxWidth)
|
|
|
|
}
|
|
|
|
|
|
|
|
if fractionCompleted < 1 {
|
|
|
|
Capsule()
|
|
|
|
.fill(Asset.Colors.ProgressIndicator.negativeSpace.color)
|
|
|
|
.frame(maxWidth: trailingMaxWidth)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.frame(height: height)
|
2022-03-01 06:33:01 -08:00
|
|
|
// FIXME: .animation(.easeInOut) breaks the Onboarding UI when onAppear, fallback to .linear for now
|
2021-10-15 06:46:21 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// MARK: - ProgressView : onboardingProgressStyle
|
|
|
|
|
|
|
|
extension ProgressView {
|
|
|
|
var onboardingProgressStyle: some View {
|
|
|
|
progressViewStyle(OnboardingProgressStyle())
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// MARK: - Interactive ProgressStyle View
|
|
|
|
|
|
|
|
struct OnboardingProgressViewPreviewHelper: View {
|
2021-10-18 05:18:43 -07:00
|
|
|
@State private var value: CGFloat = 35.0
|
2021-10-15 06:46:21 -07:00
|
|
|
|
|
|
|
var progressString: String {
|
|
|
|
String(format: "%02d", value)
|
|
|
|
}
|
|
|
|
|
|
|
|
var body: some View {
|
|
|
|
VStack(spacing: 50) {
|
|
|
|
ProgressView(
|
|
|
|
"\(Int(value))",
|
|
|
|
value: value,
|
|
|
|
total: 100
|
|
|
|
)
|
|
|
|
.onboardingProgressStyle
|
|
|
|
|
|
|
|
Slider(value: $value, in: 0...100, step: 1)
|
|
|
|
}
|
|
|
|
.padding(.horizontal)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// MARK: - Previews
|
|
|
|
|
|
|
|
struct OnboardingProgressIndicator_Previews: PreviewProvider {
|
|
|
|
static var previews: some View {
|
|
|
|
OnboardingProgressViewPreviewHelper()
|
|
|
|
}
|
|
|
|
}
|