fix cancel post behavior

- prompt now appears for the cancel button
- no prompt when post is empty
- appease eslint
zio/stable
Ben Harris 2023-05-16 15:36:53 -04:00
parent b9abd444e5
commit 2e082b6977
1 changed files with 23 additions and 18 deletions

View File

@ -82,7 +82,7 @@ export const ComposePost = observer(function ComposePost({
// HACK
// there's a bug with @mattermost/react-native-paste-input where if the input
// is focused during unmount, an exception will throw (seems that a blur method isnt implemented)
// is focused during unmount, an exception will throw (seems that a blur method isn't implemented)
// manually blurring before closing gets around that
// -prf
const hackfixOnClose = useCallback(() => {
@ -90,6 +90,21 @@ export const ComposePost = observer(function ComposePost({
onClose()
}, [textInput, onClose])
const onPressCancel = useCallback(() => {
if (graphemeLength > 0 || !gallery.isEmpty) {
store.shell.openModal({
name: 'confirm',
title: 'Cancel draft',
onPressConfirm: onClose,
onPressCancel: () => {
store.shell.closeModal()
},
message: "Are you sure you'd like to cancel this draft?",
})
}
hackfixOnClose()
}, [store, hackfixOnClose, graphemeLength, gallery, onClose])
// initial setup
useEffect(() => {
autocompleteView.setup()
@ -99,24 +114,14 @@ export const ComposePost = observer(function ComposePost({
const onEscape = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Escape') {
const {shell} = store
if (shell.activeModals.some(modal => modal.name === 'confirm')) {
if (store.shell.activeModals.some(modal => modal.name === 'confirm')) {
store.shell.closeModal()
}
shell.openModal({
name: 'confirm',
title: 'Cancel draft',
onPressConfirm: onClose,
onPressCancel: () => {
store.shell.closeModal()
},
message: "Are you sure you'd like to cancel this draft?",
})
onPressCancel()
}
},
[store, onClose],
[store, onPressCancel],
)
useEffect(() => {
if (isDesktopWeb) {
@ -135,7 +140,7 @@ export const ComposePost = observer(function ComposePost({
const onPhotoPasted = useCallback(
async (uri: string) => {
track('Composer:PastedPhotos')
gallery.paste(uri)
await gallery.paste(uri)
},
[gallery, track],
)
@ -183,7 +188,7 @@ export const ComposePost = observer(function ComposePost({
return
}
if (!replyTo) {
store.me.mainFeed.addPostToTop(createdPost.uri)
await store.me.mainFeed.addPostToTop(createdPost.uri)
}
onPost?.()
hackfixOnClose()
@ -223,8 +228,8 @@ export const ComposePost = observer(function ComposePost({
<View style={styles.topbar}>
<TouchableOpacity
testID="composerCancelButton"
onPress={hackfixOnClose}
onAccessibilityEscape={hackfixOnClose}
onPress={onPressCancel}
onAccessibilityEscape={onPressCancel}
accessibilityRole="button"
accessibilityLabel="Cancel"
accessibilityHint="Closes post composer">