diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js --- a/native/chat/chat-input-bar.react.js +++ b/native/chat/chat-input-bar.react.js @@ -315,7 +315,6 @@ +setText: (text: string) => void, +textEdited: boolean, +buttonsExpanded: boolean, - +isExitingDuringEditModeRef: { current: boolean }, +expandoButtonsStyle: AnimatedViewStyle, +cameraRollIconStyle: AnimatedViewStyle, +cameraIconStyle: AnimatedViewStyle, @@ -343,16 +342,11 @@ +onPressExitEditMode: () => void, +updateText: (newText: string) => void, +onSend: () => Promise, - +removeEditMode: RemoveEditMode, - +exitEditMode: () => void, +isMessageEdited: (newText?: string) => boolean, + +blockNavigation: () => void, }; class ChatInputBar extends React.PureComponent { - clearBeforeRemoveListener: () => void; - clearFocusListener: () => void; - clearBlurListener: () => void; - static mediaGalleryOpen(props: Props): boolean { const { keyboardState } = props; return !!(keyboardState && keyboardState.mediaGalleryOpen); @@ -381,40 +375,16 @@ } componentDidMount() { - const { isActive, navigation } = this.props; + const { isActive } = this.props; if (isActive) { this.props.addEditInputMessageListener(); } - if (!navigation) { - return; - } - this.clearBeforeRemoveListener = navigation.addListener( - 'beforeRemove', - this.onNavigationBeforeRemove, - ); - this.clearFocusListener = navigation.addListener( - 'focus', - this.onNavigationFocus, - ); - this.clearBlurListener = navigation.addListener( - 'blur', - this.onNavigationBlur, - ); } componentWillUnmount() { if (this.props.isActive) { this.props.removeEditInputMessageListener(); } - if (this.clearBeforeRemoveListener) { - this.clearBeforeRemoveListener(); - } - if (this.clearFocusListener) { - this.clearFocusListener(); - } - if (this.clearBlurListener) { - this.clearBlurListener(); - } } componentDidUpdate(prevProps: Props) { @@ -473,7 +443,7 @@ this.props.messageEditingContext?.editState.editedMessage && !prevProps.messageEditingContext?.editState.editedMessage ) { - this.blockNavigation(); + this.props.blockNavigation(); } } @@ -736,54 +706,6 @@ ); } - blockNavigation = () => { - const { navigation } = this.props; - if (!navigation || !navigation.isFocused()) { - return; - } - navigation.setParams({ - removeEditMode: this.props.removeEditMode, - }); - }; - - onNavigationFocus = () => { - this.props.isExitingDuringEditModeRef.current = false; - }; - - onNavigationBlur = () => { - if (!this.props.isEditMode()) { - return; - } - this.props.setText(this.props.draft); - this.props.isExitingDuringEditModeRef.current = true; - this.props.exitEditMode(); - }; - - onNavigationBeforeRemove = (e: { - +data: { +action: GenericNavigationAction }, - +preventDefault: () => void, - ... - }) => { - if (!this.props.isEditMode()) { - return; - } - const { action } = e.data; - e.preventDefault(); - const saveExit = () => { - this.props.messageEditingContext?.setEditedMessage(null, () => { - this.props.isExitingDuringEditModeRef.current = true; - this.props.navigation?.dispatch(action); - }); - }; - if (!this.props.isMessageEdited()) { - saveExit(); - return; - } - exitEditAlert({ - onDiscard: saveExit, - }); - }; - onPressJoin = () => { void this.props.dispatchActionPromise( joinThreadActionTypes, @@ -1246,6 +1168,16 @@ textInput.focus(); }, [immediatelyHideButtons, immediatelyShowSendButton]); + const blockNavigation = React.useCallback(() => { + const { navigation } = props; + if (!navigation || !navigation.isFocused()) { + return; + } + navigation.setParams({ + removeEditMode: removeEditMode, + }); + }, [props, removeEditMode]); + const unblockNavigation = React.useCallback(() => { const { navigation } = props; if (!navigation) { @@ -1444,6 +1376,69 @@ inputState?.scrollToMessage(editedMessageKey); }, [getEditedMessage, inputState]); + const onNavigationFocus = React.useCallback(() => { + isExitingDuringEditModeRef.current = false; + }, []); + + const onNavigationBlur = React.useCallback(() => { + if (!isEditMode()) { + return; + } + setText(draft); + isExitingDuringEditModeRef.current = true; + exitEditMode(); + }, [draft, exitEditMode, isEditMode]); + + const onNavigationBeforeRemove = React.useCallback( + (e: { + +data: { +action: GenericNavigationAction }, + +preventDefault: () => void, + ... + }) => { + if (!isEditMode()) { + return; + } + const { action } = e.data; + e.preventDefault(); + const saveExit = () => { + messageEditingContext?.setEditedMessage(null, () => { + isExitingDuringEditModeRef.current = true; + props.navigation?.dispatch(action); + }); + }; + if (!isMessageEdited()) { + saveExit(); + return; + } + exitEditAlert({ + onDiscard: saveExit, + }); + }, + [isEditMode, isMessageEdited, messageEditingContext, props.navigation], + ); + + React.useEffect(() => { + const { navigation } = props; + if (!navigation) { + return undefined; + } + + const clearBeforeRemoveListener = navigation.addListener( + 'beforeRemove', + onNavigationBeforeRemove, + ); + const clearFocusListener = navigation.addListener( + 'focus', + onNavigationFocus, + ); + const clearBlurListener = navigation.addListener('blur', onNavigationBlur); + return () => { + clearBeforeRemoveListener(); + clearFocusListener(); + clearBlurListener(); + }; + }, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]); + return ( ); }