Merge pull request #86 from componentskit/improve-checkbox

Improve checkbox

Author: mikhailChelbaev

Sources/ComponentsKit/Components/Checkbox/Models/CheckboxVM.swift

@@ -60,19 +60,19 @@ extension CheckboxVM {
     case .small:
       return 1.5
     case .medium:
-      return 2.0
+      return 1.75
     case .large:
-      return 2.5
+      return 2.0
     }
   }
   var checkboxSide: CGFloat {
     switch self.size {
     case .small:
-      return 16.0
-    case .medium:
       return 20.0
-    case .large:
+    case .medium:
       return 24.0
+    case .large:
+      return 28.0
     }
   }
   var checkboxCornerRadius: CGFloat {
@@ -105,6 +105,22 @@ extension CheckboxVM {
       return .lgBody
     }
   }
+  var checkmarkPath: CGPath {
+    let path = UIBezierPath()
+    path.move(to: .init(
+      x: 7 / 24 * self.checkboxSide,
+      y: 12 / 24 * self.checkboxSide
+    ))
+    path.addLine(to: .init(
+      x: 11 / 24 * self.checkboxSide,
+      y: 16 / 24 * self.checkboxSide
+    ))
+    path.addLine(to: .init(
+      x: 17 / 24 * self.checkboxSide,
+      y: 8 / 24 * self.checkboxSide
+    ))
+    return path.cgPath
+  }
 }
 
 // MARK: UIKit Helpers

Sources/ComponentsKit/Components/Checkbox/SUCheckbox.swift

@@ -45,27 +45,14 @@ public struct SUCheckbox: View {
             value: self.isSelected
           )
 
-        Path { path in
-          path.move(to: .init(
-            x: self.model.checkboxSide / 4,
-            y: 11 / 24 * self.model.checkboxSide
+        Path(self.model.checkmarkPath)
+          .trim(from: 0, to: self.checkmarkStroke)
+          .stroke(style: StrokeStyle(
+            lineWidth: self.model.checkmarkLineWidth,
+            lineCap: .round,
+            lineJoin: .round
           ))
-          path.addLine(to: .init(
-            x: 11 / 24 * self.model.checkboxSide,
-            y: 17 / 24 * self.model.checkboxSide
-          ))
-          path.addLine(to: .init(
-            x: 3 / 4 * self.model.checkboxSide,
-            y: 7 / 24 * self.model.checkboxSide
-          ))
-        }
-        .trim(from: 0, to: self.checkmarkStroke)
-        .stroke(style: StrokeStyle(
-          lineWidth: self.model.checkmarkLineWidth,
-          lineCap: .round,
-          lineJoin: .round
-        ))
-        .foregroundStyle(self.model.foregroundColor.color)
+          .foregroundStyle(self.model.foregroundColor.color)
       }
       .overlay {
         RoundedRectangle(cornerRadius: self.model.checkboxCornerRadius)

Sources/ComponentsKit/Components/Checkbox/UKCheckbox.swift

@@ -96,22 +96,7 @@ open class UKCheckbox: UIView, UKComponent {
     self.checkmarkLayer.lineCap = .round
     self.checkmarkLayer.lineJoin = .round
     self.checkmarkLayer.strokeEnd = self.isSelected ? 1.0 : 0.0
-
-    let checkmarkPath = UIBezierPath()
-    checkmarkPath.move(to: .init(
-      x: self.model.checkboxSide / 4,
-      y: 11 / 24 * self.model.checkboxSide
-    ))
-    checkmarkPath.addLine(to: .init(
-      x: 11 / 24 * self.model.checkboxSide,
-      y: 17 / 24 * self.model.checkboxSide
-    ))
-    checkmarkPath.addLine(to: .init(
-      x: 3 / 4 * self.model.checkboxSide,
-      y: 7 / 24 * self.model.checkboxSide
-    ))
-
-    self.checkmarkLayer.path = checkmarkPath.cgPath
+    self.checkmarkLayer.path = self.model.checkmarkPath
   }
 
   // MARK: Style