CircularProgressView.swift

CircularProgressView.swift

#if DEBUG
import SwiftUI
/**
 * - Fixme: ⚠️️ deperecate? its not in use at the moment?
 * - Note: It doesn't make any sense to make a viewmodifier for this or?
 * - Note: A more advanced variation: https://sarunw.com/posts/how-to-create-activity-ring-in-swiftui/
 * - Fixme: ⚠️️ make it a dynamic sized? 👈
 */
public struct CircularProgressView: View {
   /**
    * The progress of the circular view.
    */
   public let progress: Double
   /**
    * The color of the foreground of the circular view.
    */
   public let foreground: Color
   /**
    * The color of the background of the circular view.
    * - Fixme: ⚠️️ rename to ..Color, do it when you refactor this etc
    */
   public let background: Color
   /**
    * The width of the line of the circular view.
    * - Fixme: ⚠️️ rename to ..Color, do it when you refactor this etc
    */
   public let lineWidth: Double
   /**
    * Initializes a new instance of CircularProgressView.
    * - Parameters:
    *   - progress: The progress of the circular view.
    *   - foreground: The color of the foreground of the circular view.
    *   - background: The color of the background of the circular view.
    *   - lineWidth: The width of the line of the circular view.
    */
   public init(progress: Double, foreground: Color, background: Color, lineWidth: Double) {
      self.progress = progress
      self.foreground = foreground
      self.background = background
      self.lineWidth = lineWidth
   }
}
#endif
#if DEBUG
import SwiftUI
/**
 * Content
 */
extension CircularProgressView {
   /**
    * Body
    */
   public var body: some View {
      ZStack {
         underlay
         overlay
      }
   }
}
/**
 * Components
 */
extension CircularProgressView {
   /**
    * Underlay - complete stroke
    */
   fileprivate var underlay: some View {
      Circle()
         .stroke(background, lineWidth: lineWidth)
   }
   /**
    * Overlay - partial stroke
    */
   fileprivate var overlay: some View {
      Circle()
         .trim(from: 0, to: progress) // progress
         .stroke(
            foreground,
            style: StrokeStyle(
               lineWidth: lineWidth,
               lineCap: .round
            )
         )
         .rotationEffect(.degrees(-90)) // Rotate the second circle view counterclockwise to make progress starting from the top.
   }
}
#endif
#if DEBUG
import SwiftUI
/**
 * Preview for CircularProgressView
 * make this closure based, see detailheader preview, and inject two different colors etc
 * - Fixme: ⚠️️ Add different styles in the preview, make a closure etc, see similar code in the detailheader etc
 * - Fixme: ⚠️️ Use a for-each in a vstack fo diff colors etc
 * - Fixme: ⚠️️ Add and test these colors: pink, mint, teal, (green, red, yellow, orange also works great)
 */
#Preview(traits: .fixedLayout(width: 400, height: 300)) {
   let previewContainer = PreviewContainer {
      CircularProgressView(progress: 0.4, foreground: Color.mint, background: Color.mint.opacity(0.5), lineWidth: 15 )
         .frame(width: 100, height: 100)
         .padding(32)
         .frame(maxWidth: .infinity)
         .background(Color.blackOrWhite)
   }
      .environment(\.colorScheme, .dark)
   // - Fixme: ⚠️️ make a modifier that works only for iPad? .ifIsIpadFrame(...) etc
   #if os(iOS)
   if UIDevice.isIpad { // Debug for iPad
      return previewContainer.frame(width: 400, height: 400)
   } else {
      return previewContainer
   }
   #elseif os(macOS)
   return previewContainer
   #endif
}
#endif