Circular progress improvements

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CircularProgressPreview.swift

@@ -40,7 +40,7 @@ struct CircularProgressPreview: View {
           Text("Circle").tag(CircularProgressVM.Shape.circle)
           Text("Arc").tag(CircularProgressVM.Shape.arc)
         }
-        SizePicker(selection: self.$model.size)
+        OptionalSizePicker(selection: self.$model.size)
       }
       .onReceive(self.timer) { _ in
         if self.model.currentValue < self.model.maxValue {

Sources/ComponentsKit/Components/CircularProgress/Models/CircularProgressVM.swift

@@ -41,8 +41,13 @@ public struct CircularProgressVM: ComponentVM {
 
   /// The  size of the circular progress.
   ///
+  /// If nil, the view is intended to expand to the available space provided by
+  /// the surrounding layout:
+  /// - In SwiftUI, constrain it with .frame(...).
+  /// - In UIKit, constrain it with Auto Layout.
+  ///
   /// Defaults to `.medium`.
-  public var size: ComponentSize = .medium
+  public var size: ComponentSize? = .medium
 
   /// Initializes a new instance of `CircularProgressVM` with default values.
   public init() {}
@@ -55,10 +60,20 @@ extension CircularProgressVM {
     return 0.2
   }
   var circularLineWidth: CGFloat {
-    return self.lineWidth ?? max(self.preferredSize.width / 8, 2)
+    if let lineWidth {
+      return lineWidth
+    } else if let width = self.preferredSize?.width {
+      return max(width / 8, 2)
+    } else {
+      return 3
+    }
   }
-  var preferredSize: CGSize {
-    switch self.size {
+  var preferredSize: CGSize? {
+    guard let size else {
+      return nil
+    }
+
+    switch size {
     case .small:
       return CGSize(width: 48, height: 48)
     case .medium:
@@ -67,14 +82,11 @@ extension CircularProgressVM {
       return CGSize(width: 80, height: 80)
     }
   }
-  var radius: CGFloat {
-    return self.preferredSize.height / 2 - self.circularLineWidth / 2
+  func radius(size: CGSize) -> CGFloat {
+    return min(size.width, size.height) / 2 - self.circularLineWidth / 2
   }
-  var center: CGPoint {
-    return .init(
-      x: self.preferredSize.width / 2,
-      y: self.preferredSize.height / 2
-    )
+  func center(size: CGSize) -> CGPoint {
+    return .init(x: size.width / 2, y: size.height / 2)
   }
   var startAngle: CGFloat {
     switch self.shape {
@@ -99,7 +111,7 @@ extension CircularProgressVM {
     switch self.size {
     case .small:
       return .smCaption
-    case .medium:
+    case .medium, .none:
       return .mdCaption
     case .large:
       return .lgCaption

Sources/ComponentsKit/Components/CircularProgress/SUCircularProgress.swift

@@ -40,49 +40,47 @@ public struct SUCircularProgress: View {
 
   public var body: some View {
     ZStack {
-      // Background part
-      Path { path in
-        path.addArc(
-          center: self.model.center,
-          radius: self.model.radius,
-          startAngle: .radians(self.model.startAngle),
-          endAngle: .radians(self.model.endAngle),
-          clockwise: false
+      GeometryReader { geometry in
+        // Background part
+        Path { path in
+          path.addArc(
+            center: self.model.center(size: geometry.size),
+            radius: self.model.radius(size: geometry.size),
+            startAngle: .radians(self.model.startAngle),
+            endAngle: .radians(self.model.endAngle),
+            clockwise: false
+          )
+        }
+        .stroke(
+          self.model.color.background.color,
+          style: StrokeStyle(
+            lineWidth: self.model.circularLineWidth,
+            lineCap: self.model.lineCap.cgLineCap
+          )
         )
-      }
-      .stroke(
-        self.model.color.background.color,
-        style: StrokeStyle(
-          lineWidth: self.model.circularLineWidth,
-          lineCap: self.model.lineCap.cgLineCap
-        )
-      )
-      .frame(
-        width: self.model.preferredSize.width,
-        height: self.model.preferredSize.height
-      )
 
-      // Foreground part
-      Path { path in
-        path.addArc(
-          center: self.model.center,
-          radius: self.model.radius,
-          startAngle: .radians(self.model.startAngle),
-          endAngle: .radians(self.model.endAngle),
-          clockwise: false
+        // Foreground part
+        Path { path in
+          path.addArc(
+            center: self.model.center(size: geometry.size),
+            radius: self.model.radius(size: geometry.size),
+            startAngle: .radians(self.model.startAngle),
+            endAngle: .radians(self.model.endAngle),
+            clockwise: false
+          )
+        }
+        .trim(from: 0, to: self.progress)
+        .stroke(
+          self.model.color.main.color,
+          style: StrokeStyle(
+            lineWidth: self.model.circularLineWidth,
+            lineCap: self.model.lineCap.cgLineCap
+          )
         )
       }
-      .trim(from: 0, to: self.progress)
-      .stroke(
-        self.model.color.main.color,
-        style: StrokeStyle(
-          lineWidth: self.model.circularLineWidth,
-          lineCap: self.model.lineCap.cgLineCap
-        )
-      )
       .frame(
-        width: self.model.preferredSize.width,
-        height: self.model.preferredSize.height
+        width: self.model.preferredSize?.width,
+        height: self.model.preferredSize?.height
       )
 
       // Optional label

Sources/ComponentsKit/Components/CircularProgress/UKCircularProgress.swift

@@ -37,7 +37,7 @@ open class UKCircularProgress: UIView, UKComponent {
   // MARK: - UIView Properties
 
   open override var intrinsicContentSize: CGSize {
-    return self.model.preferredSize
+    return self.sizeThatFits(UIView.layoutFittingExpandedSize)
   }
 
   // MARK: - Initialization
@@ -130,12 +130,9 @@ open class UKCircularProgress: UIView, UKComponent {
   }
 
   private func updateShapePaths() {
-    let center = CGPoint(x: self.bounds.midX, y: self.bounds.midY)
-    let minSide = min(self.bounds.width, self.bounds.height)
-    let radius = (minSide - self.model.circularLineWidth) / 2
     let circlePath = UIBezierPath(
-      arcCenter: center,
-      radius: radius,
+      arcCenter: self.model.center(size: self.bounds.size),
+      radius: self.model.radius(size: self.bounds.size),
       startAngle: self.model.startAngle,
       endAngle: self.model.endAngle,
       clockwise: true
@@ -171,10 +168,10 @@ open class UKCircularProgress: UIView, UKComponent {
   // MARK: - UIView Methods
 
   open override func sizeThatFits(_ size: CGSize) -> CGSize {
-    let preferred = self.model.preferredSize
-    return CGSize(
-      width: min(size.width, preferred.width),
-      height: min(size.height, preferred.height)
+    let preferredSize = self.model.preferredSize ?? size
+    return .init(
+      width: min(preferredSize.width, size.width),
+      height: min(preferredSize.height, size.height)
     )
   }