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