Fix 1405 handle android back button in composer (#1446)
* handle android back button in composer * improve backHandler error handling * simplify composer onClose functionalityzio/stable
parent
1f60e1a748
commit
04fda0f142
|
@ -1,8 +1,19 @@
|
|||
import {isAndroid} from 'platform/detection'
|
||||
import {BackHandler} from 'react-native'
|
||||
import {RootStoreModel} from 'state/index'
|
||||
|
||||
export function init(store: RootStoreModel) {
|
||||
BackHandler.addEventListener('hardwareBackPress', () => {
|
||||
return store.shell.closeAnyActiveElement()
|
||||
})
|
||||
// only register back handler on android, otherwise it throws an error
|
||||
if (isAndroid) {
|
||||
const backHandler = BackHandler.addEventListener(
|
||||
'hardwareBackPress',
|
||||
() => {
|
||||
return store.shell.closeAnyActiveElement()
|
||||
},
|
||||
)
|
||||
return () => {
|
||||
backHandler.remove()
|
||||
}
|
||||
}
|
||||
return () => {}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
|
|||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
BackHandler,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
|
@ -49,14 +50,10 @@ import {SelectLangBtn} from './select-language/SelectLangBtn'
|
|||
import {EmojiPickerButton} from './text-input/web/EmojiPicker.web'
|
||||
import {insertMentionAt} from 'lib/strings/mention-manip'
|
||||
|
||||
type Props = ComposerOpts & {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
type Props = ComposerOpts
|
||||
export const ComposePost = observer(function ComposePost({
|
||||
replyTo,
|
||||
onPost,
|
||||
onClose,
|
||||
quote: initQuote,
|
||||
mention: initMention,
|
||||
}: Props) {
|
||||
|
@ -90,6 +87,9 @@ export const ComposePost = observer(function ComposePost({
|
|||
const [labels, setLabels] = useState<string[]>([])
|
||||
const [suggestedLinks, setSuggestedLinks] = useState<Set<string>>(new Set())
|
||||
const gallery = useMemo(() => new GalleryModel(store), [store])
|
||||
const onClose = useCallback(() => {
|
||||
store.shell.closeComposer()
|
||||
}, [store])
|
||||
|
||||
const autocompleteView = useMemo<UserAutocompleteModel>(
|
||||
() => new UserAutocompleteModel(store),
|
||||
|
@ -129,6 +129,20 @@ export const ComposePost = observer(function ComposePost({
|
|||
onClose()
|
||||
}
|
||||
}, [store, onClose, graphemeLength, gallery])
|
||||
// android back button
|
||||
useEffect(() => {
|
||||
const backHandler = BackHandler.addEventListener(
|
||||
'hardwareBackPress',
|
||||
() => {
|
||||
onPressCancel()
|
||||
return true
|
||||
},
|
||||
)
|
||||
|
||||
return () => {
|
||||
backHandler.remove()
|
||||
}
|
||||
}, [onPressCancel])
|
||||
|
||||
// initial setup
|
||||
useEffect(() => {
|
||||
|
|
|
@ -11,7 +11,6 @@ export const Composer = observer(function ComposerImpl({
|
|||
winHeight,
|
||||
replyTo,
|
||||
onPost,
|
||||
onClose,
|
||||
quote,
|
||||
mention,
|
||||
}: {
|
||||
|
@ -19,7 +18,6 @@ export const Composer = observer(function ComposerImpl({
|
|||
winHeight: number
|
||||
replyTo?: ComposerOpts['replyTo']
|
||||
onPost?: ComposerOpts['onPost']
|
||||
onClose: () => void
|
||||
quote?: ComposerOpts['quote']
|
||||
mention?: ComposerOpts['mention']
|
||||
}) {
|
||||
|
@ -64,7 +62,6 @@ export const Composer = observer(function ComposerImpl({
|
|||
<ComposePost
|
||||
replyTo={replyTo}
|
||||
onPost={onPost}
|
||||
onClose={onClose}
|
||||
quote={quote}
|
||||
mention={mention}
|
||||
/>
|
||||
|
|
|
@ -13,7 +13,6 @@ export const Composer = observer(function ComposerImpl({
|
|||
replyTo,
|
||||
quote,
|
||||
onPost,
|
||||
onClose,
|
||||
mention,
|
||||
}: {
|
||||
active: boolean
|
||||
|
@ -21,7 +20,6 @@ export const Composer = observer(function ComposerImpl({
|
|||
replyTo?: ComposerOpts['replyTo']
|
||||
quote: ComposerOpts['quote']
|
||||
onPost?: ComposerOpts['onPost']
|
||||
onClose: () => void
|
||||
mention?: ComposerOpts['mention']
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
|
@ -47,7 +45,6 @@ export const Composer = observer(function ComposerImpl({
|
|||
replyTo={replyTo}
|
||||
quote={quote}
|
||||
onPost={onPost}
|
||||
onClose={onClose}
|
||||
mention={mention}
|
||||
/>
|
||||
</View>
|
||||
|
|
|
@ -44,7 +44,10 @@ const ShellInner = observer(function ShellInnerImpl() {
|
|||
)
|
||||
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
|
||||
React.useEffect(() => {
|
||||
backHandler.init(store)
|
||||
const listener = backHandler.init(store)
|
||||
return () => {
|
||||
listener()
|
||||
}
|
||||
}, [store])
|
||||
|
||||
return (
|
||||
|
@ -68,7 +71,6 @@ const ShellInner = observer(function ShellInnerImpl() {
|
|||
</View>
|
||||
<Composer
|
||||
active={store.shell.isComposerActive}
|
||||
onClose={() => store.shell.closeComposer()}
|
||||
winHeight={winDim.height}
|
||||
replyTo={store.shell.composerOpts?.replyTo}
|
||||
onPost={store.shell.composerOpts?.onPost}
|
||||
|
|
|
@ -48,7 +48,6 @@ const ShellInner = observer(function ShellInnerImpl() {
|
|||
)}
|
||||
<Composer
|
||||
active={store.shell.isComposerActive}
|
||||
onClose={() => store.shell.closeComposer()}
|
||||
winHeight={0}
|
||||
replyTo={store.shell.composerOpts?.replyTo}
|
||||
quote={store.shell.composerOpts?.quote}
|
||||
|
|
Loading…
Reference in New Issue