diff --git a/www/src/pages/components/toast/ios/alert.png b/www/src/pages/components/toast/ios/alert.png new file mode 100644 index 000000000..8a2ce5d88 Binary files /dev/null and b/www/src/pages/components/toast/ios/alert.png differ diff --git a/www/src/pages/components/toast/ios/custom.png b/www/src/pages/components/toast/ios/custom.png new file mode 100644 index 000000000..f669c8adc Binary files /dev/null and b/www/src/pages/components/toast/ios/custom.png differ diff --git a/www/src/pages/components/toast/ios/index.mdx b/www/src/pages/components/toast/ios/index.mdx index bd8f3121d..7527b8b94 100644 --- a/www/src/pages/components/toast/ios/index.mdx +++ b/www/src/pages/components/toast/ios/index.mdx @@ -22,50 +22,50 @@ The toast component supports dynamic type by default `public var message: String` The message text to be displayed to the user -`public var linkText: String` The text on the `link` style CTA button +`public var action: Toast.Action` The "action" to take on the toast. Includes link text, and a handler closure. + +`public var theme: Toast.Theme` A toast theme, which allows for customization of the background color, text color, icon, and icon color. + +`public let presentationDuration: TimeInterval` The duration for which to display the toast, defaults to 5 seconds. ## Usage -Once constructed, a toast can be displayed with animation. +You can construct a toast with various themes like ```swift -import Thumbprint +let toast = Toast(message: "This is a message?", theme: Toast.Theme.alert(), action: Toast.Action(text: "Take Action", handler: { + /* Do some action */ +})) +``` -/* ... */ +![alert](alert.png) -public func display(_ toastWithText text: String, linkText: String, in view: UIView, animate: Bool = true) { - let toast = Toast(title: text, linkText: linkText) - view.addSubview(toast) +You can customize the theme by overriding various properties - var initialYPositionConstraint: Constraint? +```swift +let toast = Toast(message: "This is a message?", theme: Toast.Theme.success(Icon.contentActionsAddMedium), action: Toast.Action(text: "Take Action", handler: {})) +``` - toast.snp.makeConstraints { make in - make.left.right.equalToSuperview().inset(Space.three) - initialYPositionConstraint = make.top.equalTo(tabBar.snp.bottom).constraint - } +![custom](custom.png) - view.layoutIfNeeded() +Once constructed, a toast can be displayed with animation using the showToast method. - initialYPositionConstraint?.deactivate() +```swift +import Thumbprint - toast.snp.makeConstraints { make in - make.bottom.equalTo(tabBar.snp.top).offset(-Self.toastSpacing) - } +/* ... */ - toast.alpha = 0.0 +public func display(_ toastWithText text: String, linkText: String, in view: UIView) { + let toast = Toast(message: text, action: Toast.Action(text: linkText, handler: { + /* Do some action */ + })) - UIView.animate(withDuration: animate ? 0.5 : 0) { - toast.alpha = 1.0 - view.layoutIfNeeded() - } + toast.showToast(animated: false, completion: nil) + view.addSubview(toast) + toast.snp.makeConstraints { make in + make.leading.trailing.bottom.equalToSuperview() + } - DispatchQueue.main.asyncAfter(deadline: .now() + Self.autoDismissDelay) { - UIView.animate(withDuration: Duration.six, animations: { - toast.alpha = 0.0 - }, completion: { _ in - self.remove(toast) - }) - } } ``` diff --git a/www/src/pages/components/toast/ios/toast.png b/www/src/pages/components/toast/ios/toast.png index 14ab3ee48..8076dbad7 100644 Binary files a/www/src/pages/components/toast/ios/toast.png and b/www/src/pages/components/toast/ios/toast.png differ diff --git a/www/src/pages/components/toast/swiftui/alert.png b/www/src/pages/components/toast/swiftui/alert.png new file mode 100644 index 000000000..098212078 Binary files /dev/null and b/www/src/pages/components/toast/swiftui/alert.png differ diff --git a/www/src/pages/components/toast/swiftui/index.mdx b/www/src/pages/components/toast/swiftui/index.mdx index c878e4c4b..e59af128c 100644 --- a/www/src/pages/components/toast/swiftui/index.mdx +++ b/www/src/pages/components/toast/swiftui/index.mdx @@ -16,9 +16,9 @@ A toast is used to display a short-lived notification and optional CTA at the bo ## Configuration -Toasts support a single left aligned title and an optional right aligned link. The toast view is attached to a View with the `.withToast()` modifier. `withToast()` accepts a TPToast binding and an optional `linkAction` closure, which is triggered when the user taps on the link text. When the toast binding passed into TPToast is nil, the toast is hidden, when it exists, the toast animates onto the screen. The toast automatically dismisses itself after a short period of time (2.5 seconds, by default) +Toasts support a single left aligned title, a theme, and an optional right aligned link. The toast view is attached to a View with the `.withToast()` modifier. `withToast()` accepts a TPToast binding and an optional `linkAction` closure, which is triggered when the user taps on the link text. When a toast binding exists, it will animated onto the screen, or, if another toast is already showing on screen, it will queue itself for presentation after the existing toast dismisses. The toast automatically dismisses itself after a short period of time (2.5 seconds, by default) -The toast's title, link text, and optional duration are set on the TPToast object itself. +The toast's title, link text, theme, and optional duration are set on the TPToast object itself. ## Usage @@ -42,6 +42,20 @@ public var body: some View { } ``` +## Theming + +Toasts can be themed via a TPTheme object that includes a background color, an optional icon, an icon color, and text color. + +There are several built in themes. `default`, `alert`, `success`, `info`, `caution`. + +```swift + +let toast = TPToast(title: someText, theme: .alert, linkText: linkText) + +``` + +![alert](alert.png) + export const pageQuery = graphql` { # Get links to by path to display in the navbar. diff --git a/www/src/pages/components/toast/swiftui/thumbprintui_toast.png b/www/src/pages/components/toast/swiftui/thumbprintui_toast.png index cd3cb6f19..306b72b25 100644 Binary files a/www/src/pages/components/toast/swiftui/thumbprintui_toast.png and b/www/src/pages/components/toast/swiftui/thumbprintui_toast.png differ