78 lines
2.0 KiB
Swift
78 lines
2.0 KiB
Swift
|
import SwiftUI
|
||
|
|
|
||
|
|
/// A custom toggle style designed for task completion indication.
|
||
|
|
///
|
||
|
|
/// This style renders a circular checkbox that visually represents completion state:
|
||
|
|
/// - **Off state**: An empty circle with a secondary-colored stroke border
|
||
|
|
/// - **On state**: A circle with a primary-colored stroke border containing a filled inner circle
|
||
|
|
///
|
||
|
|
/// ## Usage
|
||
|
|
///
|
||
|
|
/// Apply this style to any `Toggle` view using the `.completion` static accessor:
|
||
|
|
///
|
||
|
|
/// ```swift
|
||
|
|
/// Toggle("Complete task", isOn: $isCompleted)
|
||
|
|
/// .toggleStyle(.completion)
|
||
|
|
/// ```
|
||
|
|
struct CompletionToggleStyle: ToggleStyle {
|
||
|
|
|
||
|
|
// MARK: Functions
|
||
|
|
|
||
|
|
func makeBody(configuration: Configuration) -> some View {
|
||
|
|
Button {
|
||
|
|
configuration.isOn.toggle()
|
||
|
|
} label: {
|
||
|
|
HStack(alignment: .top, spacing: 12) {
|
||
|
|
ZStack {
|
||
|
|
Circle()
|
||
|
|
.strokeBorder(
|
||
|
|
configuration.isOn ? .primary : .secondary,
|
||
|
|
lineWidth: 2
|
||
|
|
)
|
||
|
|
.frame(width: 24, height: 24)
|
||
|
|
|
||
|
|
if configuration.isOn {
|
||
|
|
Circle()
|
||
|
|
.fill(.primary)
|
||
|
|
.frame(width: 16, height: 16)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.animation(
|
||
|
|
.easeInOut,
|
||
|
|
value: configuration.isOn
|
||
|
|
)
|
||
|
|
.buttonStyle(.plain)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// MARK: - Toggle Style Extension
|
||
|
|
|
||
|
|
extension ToggleStyle where Self == CompletionToggleStyle {
|
||
|
|
|
||
|
|
/// A toggle style for task completion with a circular checkbox design.
|
||
|
|
///
|
||
|
|
/// This convenience accessor provides easy access to the ``CompletionToggleStyle``
|
||
|
|
/// for use with SwiftUI's toggle style modifier.
|
||
|
|
static var completion: CompletionToggleStyle {
|
||
|
|
CompletionToggleStyle()
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// MARK: - Previews
|
||
|
|
|
||
|
|
#Preview("Completion toggle style") {
|
||
|
|
@Previewable
|
||
|
|
@State
|
||
|
|
var isOn = false
|
||
|
|
|
||
|
|
Toggle(
|
||
|
|
"Unchecked task",
|
||
|
|
isOn: $isOn
|
||
|
|
)
|
||
|
|
.toggleStyle(.completion)
|
||
|
|
}
|