diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2024-11-22 16:11:59 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-11-22 16:11:59 +0000 |
| commit | 76ca72cf727e926101ec60eb232f0797e6584b49 (patch) | |
| tree | 4a387aceb8be85806568167c51f14e6a9596b7e3 /src/view/com/util/Toast.web.tsx | |
| parent | 5d4aaa5b5faa595d1967eabe11fda9615d7ba1f6 (diff) | |
| download | voidsky-76ca72cf727e926101ec60eb232f0797e6584b49.tar.zst | |
Dismissable toasts (#6345)
* dismissable toast * adjust top offset * improve a11y * stretchy pull-down * Dismiss web on tap * Simplify code --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Diffstat (limited to 'src/view/com/util/Toast.web.tsx')
| -rw-r--r-- | src/view/com/util/Toast.web.tsx | 17 |
1 files changed, 16 insertions, 1 deletions
diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index 1f9eb479b..96798e61c 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -3,7 +3,7 @@ */ import React, {useEffect, useState} from 'react' -import {StyleSheet, Text, View} from 'react-native' +import {Pressable, StyleSheet, Text, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -43,6 +43,14 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => { style={styles.icon as FontAwesomeIconStyle} /> <Text style={styles.text}>{activeToast.text}</Text> + <Pressable + style={styles.dismissBackdrop} + accessibilityLabel="Dismiss" + accessibilityHint="" + onPress={() => { + setActiveToast(undefined) + }} + /> </View> )} </> @@ -77,6 +85,13 @@ const styles = StyleSheet.create({ backgroundColor: '#000c', borderRadius: 10, }, + dismissBackdrop: { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + }, icon: { color: '#fff', flexShrink: 0, |