Skip to content

Asynchronous and Throwable button implementation for SwiftUI, with animations and progress tracking

License

Notifications You must be signed in to change notification settings

Dean151/ButtonKit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

73 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ButtonKit

ButtonKit provide two SwiftUI buttons to deal with throwable and asynchronous actions. By default, SwiftUI button only accept a closure.

With ButtonKit, you'll have access to an AsyncButton view, accepting a () async throws -> Void closure.

Requirements

  • Swift 5.9+ (Xcode 15+)
  • iOS 15+, iPadOS 15+, tvOS 15+, watchOS 8+, macOS 12+, visionOS 1+

Installation

Install using Swift Package Manager

dependencies: [
    .package(url: "https://github.com/Dean151/ButtonKit.git", from: "0.3.0"),
],
targets: [
    .target(name: "MyTarget", dependencies: [
        .product(name: "ButtonKit", package: "ButtonKit"),
    ]),
]

And import it:

import ButtonKit

Usage

Throwable

Use it as any SwiftUI button, but throw if you want in the closure:

AsyncButton {
    try doSomethingThatCanFail()
} label {
    Text("Do something")
}

When the button closure throws, the button will shake by default

For now, only this shake behavior is built-in:

.throwableButtonStyle(.shake)

You can disable still it by passing .none to throwableButtonStyle:

AsyncButton {
    try doSomethingThatCanFail()
} label {
    Text("Do something")
}
.throwableButtonStyle(.none)

You can also bring your own behavior using the ThrowableButtonStyle protocol.

In ThrowableButtonStyle, you can implement makeLabel, makeButton or both to alterate the button look and behavior.

public struct TryAgainThrowableButtonStyle: ThrowableButtonStyle {
    public init() {}

    public func makeLabel(configuration: LabelConfiguration) -> some View {
        if configuration.errorCount > 0 {
            Text("Try again!")
        } else {
            configuration.label
        }
    }
}

extension ThrowableButtonStyle where Self == TryAgainThrowableButtonStyle {
    public static var tryAgain: TryAgainThrowableButtonStyle {
        TryAgainThrowableButtonStyle()
    }
}

Then, use it:

AsyncButton {
    try doSomethingThatCanFail()
} label {
    Text("Do something")
}
.throwableButtonStyle(.tryAgain)

Asynchronous

Use it as any SwiftUI button, but the closure will support both try and await.

AsyncButton {
    try await doSomethingThatTakeTime()
} label {
    Text("Do something")
}

When the process is in progress, another button press will not result in a new Task being issued. But the button is still enabled and hittable. You can disable the button on loading using disabledWhenLoading modifier.

AsyncButton {
  ...
}
.disabledWhenLoading()

You can also disable hitTesting when loading with allowsHitTestingWhenLoading modifier.

AsyncButton {
  ...
}
.allowsHitTestingWhenLoading(false)

Access and react to the underlying task using asyncButtonTaskStarted or asyncButtonTaskEnded modifier.

AsyncButton {
  ...
}
.asyncButtonTaskStarted { task in
    // Task started
}
.asyncButtonTaskEnded {
    // Task ended or was cancelled
}

You can summarize both using asyncButtonTaskChanged modifier.

AsyncButton {
  ...
}
.asyncButtonTaskChanged { task in
    if let task {
        // Task started
    } else {
        // Task ended or was cancelled
    }
}

While the progress is loading, the button will animate, defaulting by replacing the label of the button with a ProgressView. All sort of styles are built-in:

.asyncButtonStyle(.overlay) .asyncButtonStyle(.pulse)
.asyncButtonStyle(.leading) .asyncButtonStyle(.trailing)

You can disable this behavior by passing .none to asyncButtonStyle

AsyncButton {
    try await doSomethingThatTakeTime()
} label {
    Text("Do something")
}
.asyncButtonStyle(.none)

You can also build your own customization by implementing AsyncButtonStyle protocol.

Just like ThrowableButtonStyle, AsyncButtonStyle allows you to implement either makeLabel, makeButton or both to alterate the button look and behavior while loading is in progress.

External triggering

You might need to trigger the behavior behind a button with specific user actions, like when pressing the "Send" key on the virtual keyboard.

Therefore, to get free animated progress and errors behavior on your button, you can't just start the action of the button by yourself. You need the button to start it.

To do so, you need to set an unique identifier to your button:

enum LoginViewButton: Hashable {
  case login
}

struct ContentView: View {
    var body: some View {
        AsyncButton(id: LoginViewButton.login) {
            try await login()
        } label: {
            Text("Login")
        }
    }
}

And from any view, access the triggerButton environment:

struct ContentView: View {
    @Environment(\.triggerButton)
    private var triggerButton
    
    ...
    
    func performLogin() {
        triggerButton(LoginViewButton.login)
    }
}

Note that:

  • The button Must be on screen to trigger it using this method.
  • If the triggered button is disabled, calling triggerButton will have no effect
  • If a task has already started on the triggered button, calling triggerButton will have no effect

Deterministic progress

AsyncButton supports progress reporting:

AsyncButton(progress: .discrete(totalUnitCount: files.count)) { progress in
    for file in files {
        try await file.doExpensiveComputation()
        progress.completedUnitCount += 1
    }
} label: {
    Text("Process")
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.roundedRectangle)

AsyncButtonStyle now also supports determinate progress as well, responding to configuration.fractionCompleted: Double? property:

AsyncButton(progress: .discrete(totalUnitCount: files.count)) { progress in
    for file in files {
        try await file.doExpensiveComputation()
        progress.completedUnitCount += 1
    }
} label: {
    Text("Process")
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.roundedRectangle)
.asyncButtonStyle(.trailing)
.asyncButtonStyle(.overlay) .asyncButtonStyle(.overlay(style: .percent))
.asyncButtonStyle(.leading) .asyncButtonStyle(.trailing)

You can also create your own progression logic by implementing the TaskProgress protocol. This would allow you to build logarithmic based progress, or a first step that is indeterminate, before moving to a deterministic state (like the App Store download button)

Available TaskProgress implementation are:

  • Indeterminate, default non-determinant progress with .indeterminate
  • Discrete linear (completed / total) with .discrete(totalUnitsCount: Int)
  • Estimated progress that fill the bar in the provided time interval, stopping à 85% to simulate a determinant loading with .estimated(for: Duration)
  • (NS)Progress bridge with .progress

Contribute

You are encouraged to contribute to this repository, by opening issues, or pull requests for bug fixes, improvement requests, or support. Suggestions for contributing:

  • Improving documentation
  • Adding some automated tests 😜
  • Helping me out to remove/improve all the type erasure stuff if possible?
  • Adding some new built-in styles, options or properties for more use cases

About

Asynchronous and Throwable button implementation for SwiftUI, with animations and progress tracking

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Languages