verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

feat: Send native calculated keyboard and tracking view height to TS (#5514)

This commit is contained in:
Diego Mello 2024-01-26 17:40:18 -03:00 committed by GitHub
parent 6122c71d97
commit cedd0b98f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 141 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/containers/MessageComposer/MessageComposer.tsx
View File

@ -1,5 +1,5 @@
import React, { ReactElement, useRef, useImperativeHandle, useCallback } from 'react';
import { View, StyleSheet, NativeModules } from 'react-native';
import { View, StyleSheet, NativeModules, NativeSyntheticEvent, TextInputProps } from 'react-native';
import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
import { useBackHandler } from '@react-native-community/hooks';
import { Q } from '@nozbe/watermelondb';
@ -16,8 +16,8 @@ import {
useShowEmojiKeyboard,
useShowEmojiSearchbar
} from './context';
import { IComposerInput, ITrackingView } from './interfaces';
import { isIOS } from '../../lib/methods/helpers';
import { IComposerInput, ITrackingView, ITrackingViewHeightEvent } from './interfaces';
import { isAndroid, isIOS } from '../../lib/methods/helpers';
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
import { useTheme } from '../../theme';
import { EventTypes } from '../EmojiPicker/interfaces';
@ -29,7 +29,6 @@ import { Services } from '../../lib/services';
import log from '../../lib/methods/helpers/log';
import { prepareQuoteMessage } from './helpers';
import { RecordAudio } from './components/RecordAudio';
import { useKeyboardListener } from './hooks';
const styles = StyleSheet.create({
container: {
@ -59,15 +58,14 @@ export const MessageComposer = ({
setInput: () => {},
onAutocompleteItemSelected: () => {}
});
const trackingViewRef = useRef<ITrackingView>({ resetTracking: () => {}, getNativeProps: () => ({ trackingViewHeight: 0 }) });
const trackingViewRef = useRef<ITrackingView>({ resetTracking: () => {} });
const { colors, theme } = useTheme();
const { rid, tmid, action, selectedMessages, sharing, editRequest, onSendMessage } = useRoomContext();
const showEmojiKeyboard = useShowEmojiKeyboard();
const showEmojiSearchbar = useShowEmojiSearchbar();
const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
const { openSearchEmojiKeyboard, closeEmojiKeyboard, closeSearchEmojiKeyboard } = useMessageComposerApi();
const { openSearchEmojiKeyboard, closeEmojiKeyboard, closeSearchEmojiKeyboard, setHeight } = useMessageComposerApi();
const recordingAudio = useRecordingAudio();
useKeyboardListener(trackingViewRef);
useFocusEffect(
useCallback(() => {
@ -190,6 +188,14 @@ export const MessageComposer = ({
}
};
const onHeightChange = (event: NativeSyntheticEvent<ITrackingViewHeightEvent>) => {
setHeight(event.nativeEvent.keyboardHeight, event.nativeEvent.height);
};
const handleLayout: TextInputProps['onLayout'] = e => {
setHeight(0, e.nativeEvent.layout.height);
};
const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight;
const renderContent = () => {
@ -214,22 +220,25 @@ export const MessageComposer = ({
};
return (
<MessageInnerContext.Provider value={{ sendMessage: handleSendMessage, onEmojiSelected, closeEmojiKeyboardAndAction }}>
<KeyboardAccessoryView
ref={(ref: ITrackingView) => (trackingViewRef.current = ref)}
renderContent={renderContent}
kbInputRef={composerInputRef}
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
kbInitialProps={{ theme }}
onKeyboardResigned={onKeyboardResigned}
onItemSelected={onKeyboardItemSelected}
trackInteractive
requiresSameParentToManageScrollView
addBottomView
bottomViewColor={backgroundColor}
iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
/>
<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
</MessageInnerContext.Provider>
<View onLayout={isAndroid ? handleLayout : undefined}>
<MessageInnerContext.Provider value={{ sendMessage: handleSendMessage, onEmojiSelected, closeEmojiKeyboardAndAction }}>
<KeyboardAccessoryView
ref={(ref: ITrackingView) => (trackingViewRef.current = ref)}
renderContent={renderContent}
kbInputRef={composerInputRef}
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
kbInitialProps={{ theme }}
onKeyboardResigned={onKeyboardResigned}
onItemSelected={onKeyboardItemSelected}
trackInteractive
requiresSameParentToManageScrollView
addBottomView
bottomViewColor={backgroundColor}
iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
onHeightChange={onHeightChange}
/>
<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
</MessageInnerContext.Provider>
</View>
);
};

10
app/containers/MessageComposer/components/Autocomplete/Autocomplete.tsx
View File

@ -1,5 +1,6 @@
import React, { ReactElement } from 'react';
import { View, FlatList } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useAutocompleteParams, useKeyboardHeight, useTrackingViewHeight } from '../../context';
import { AutocompleteItem } from './AutocompleteItem';
@ -13,6 +14,7 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
const { rid } = useRoomContext();
const trackingViewHeight = useTrackingViewHeight();
const keyboardHeight = useKeyboardHeight();
const { bottom } = useSafeAreaInsets();
const { text, type, params } = useAutocompleteParams();
const items = useAutocomplete({
rid,
@ -26,13 +28,15 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
return null;
}
const viewBottom = getBottom(trackingViewHeight, keyboardHeight, bottom);
if (type !== '/preview') {
return (
<View
style={[
styles.root,
{
bottom: getBottom(trackingViewHeight, keyboardHeight)
bottom: viewBottom
}
]}
>
@ -49,9 +53,7 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
if (type === '/preview') {
return (
<View
style={[styles.root, { backgroundColor: colors.surfaceLight, bottom: getBottom(trackingViewHeight, keyboardHeight) }]}
>
<View style={[styles.root, { backgroundColor: colors.surfaceLight, bottom: viewBottom }]}>
<FlatList
contentContainerStyle={styles.listContentContainer}
style={styles.list}

3
app/containers/MessageComposer/components/Autocomplete/styles.ts
View File

@ -2,7 +2,8 @@ import sharedStyles from '../../../../views/Styles';
import { useTheme } from '../../../../theme';
const MAX_HEIGHT = 216;
export const getBottom = (trackingViewHeight: number, keyboardHeight: number): number => trackingViewHeight + keyboardHeight + 50;
export const getBottom = (trackingViewHeight: number, keyboardHeight: number, bottomSafeArea: number): number =>
trackingViewHeight + keyboardHeight + (keyboardHeight > 0 ? 0 : bottomSafeArea) - 4;
export const useStyle = () => {
const { colors } = useTheme();

7
app/containers/MessageComposer/components/ComposerInput.tsx
View File

@ -32,7 +32,7 @@ export const ComposerInput = memo(
const { colors, theme } = useTheme();
const { rid, tmid, sharing, action, selectedMessages } = useRoomContext();
const focused = useFocused();
const { setFocused, setTrackingViewHeight, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
const autocompleteType = useAutocompleteParams()?.type;
const textRef = React.useRef('');
const selectionRef = React.useRef<IInputSelection>(defaultSelection);
@ -180,10 +180,6 @@ export const ComposerInput = memo(
stopAutocomplete();
};
const handleLayout: TextInputProps['onLayout'] = e => {
setTrackingViewHeight(e.nativeEvent.layout.height);
};
const onAutocompleteItemSelected: IAutocompleteItemProps['onPress'] = async item => {
if (item.type === 'loading') {
return null;
@ -330,7 +326,6 @@ export const ComposerInput = memo(
return (
<TextInput
onLayout={handleLayout}
style={[styles.textInput, { color: colors.fontDefault }]}
placeholder={placeholder}
placeholderTextColor={colors.fontAnnotation}

36
app/containers/MessageComposer/context.tsx
View File

@ -5,8 +5,7 @@ import { IAutocompleteBase, TMicOrSend } from './interfaces';
import { animateNextTransition } from '../../lib/methods/helpers';
type TMessageComposerContextApi = {
setKeyboardHeight: (height: number) => void;
setTrackingViewHeight: (height: number) => void;
setHeight: (keyboardHeight: number, trackingViewHeight: number) => void;
openEmojiKeyboard(): void;
closeEmojiKeyboard(): void;
openSearchEmojiKeyboard(): void;
@ -75,8 +74,7 @@ type Actions =
| { type: 'updateEmojiKeyboard'; showEmojiKeyboard: boolean }
| { type: 'updateEmojiSearchbar'; showEmojiSearchbar: boolean }
| { type: 'updateFocused'; focused: boolean }
| { type: 'updateTrackingViewHeight'; trackingViewHeight: number }
| { type: 'updateKeyboardHeight'; keyboardHeight: number }
| { type: 'updateHeight'; trackingViewHeight: number; keyboardHeight: number }
| { type: 'openEmojiKeyboard' }
| { type: 'closeEmojiKeyboard' }
| { type: 'openSearchEmojiKeyboard' }
@ -96,10 +94,8 @@ const reducer = (state: State, action: Actions): State => {
case 'updateFocused':
animateNextTransition();
return { ...state, focused: action.focused };
case 'updateTrackingViewHeight':
return { ...state, trackingViewHeight: action.trackingViewHeight };
case 'updateKeyboardHeight':
return { ...state, keyboardHeight: action.keyboardHeight };
case 'updateHeight':
return { ...state, trackingViewHeight: action.trackingViewHeight, keyboardHeight: action.keyboardHeight };
case 'openEmojiKeyboard':
return { ...state, showEmojiKeyboard: true, showEmojiSearchbar: false };
case 'openSearchEmojiKeyboard':
@ -127,12 +123,10 @@ export const MessageComposerProvider = ({ children }: { children: ReactElement }
const [state, dispatch] = useReducer(reducer, { keyboardHeight: 0, autocompleteParams: { text: '', type: null } } as State);
const api = useMemo(() => {
const setFocused = (focused: boolean) => dispatch({ type: 'updateFocused', focused });
const setFocused: TMessageComposerContextApi['setFocused'] = focused => dispatch({ type: 'updateFocused', focused });
const setKeyboardHeight = (keyboardHeight: number) => dispatch({ type: 'updateKeyboardHeight', keyboardHeight });
const setTrackingViewHeight = (trackingViewHeight: number) =>
dispatch({ type: 'updateTrackingViewHeight', trackingViewHeight });
const setHeight: TMessageComposerContextApi['setHeight'] = (keyboardHeight, trackingViewHeight) =>
dispatch({ type: 'updateHeight', keyboardHeight, trackingViewHeight });
const openEmojiKeyboard = () => dispatch({ type: 'openEmojiKeyboard' });
@ -142,21 +136,23 @@ export const MessageComposerProvider = ({ children }: { children: ReactElement }
const closeSearchEmojiKeyboard = () => dispatch({ type: 'closeSearchEmojiKeyboard' });
const setMicOrSend = (micOrSend: TMicOrSend) => dispatch({ type: 'setMicOrSend', micOrSend });
const setMicOrSend: TMessageComposerContextApi['setMicOrSend'] = micOrSend => dispatch({ type: 'setMicOrSend', micOrSend });
const setMarkdownToolbar = (showMarkdownToolbar: boolean) => dispatch({ type: 'setMarkdownToolbar', showMarkdownToolbar });
const setMarkdownToolbar: TMessageComposerContextApi['setMarkdownToolbar'] = showMarkdownToolbar =>
dispatch({ type: 'setMarkdownToolbar', showMarkdownToolbar });
const setAlsoSendThreadToChannel = (alsoSendThreadToChannel: boolean) =>
const setAlsoSendThreadToChannel: TMessageComposerContextApi['setAlsoSendThreadToChannel'] = alsoSendThreadToChannel =>
dispatch({ type: 'setAlsoSendThreadToChannel', alsoSendThreadToChannel });
const setRecordingAudio = (recordingAudio: boolean) => dispatch({ type: 'setRecordingAudio', recordingAudio });
const setRecordingAudio: TMessageComposerContextApi['setRecordingAudio'] = recordingAudio =>
dispatch({ type: 'setRecordingAudio', recordingAudio });
const setAutocompleteParams = (params: IAutocompleteBase) => dispatch({ type: 'setAutocompleteParams', params });
const setAutocompleteParams: TMessageComposerContextApi['setAutocompleteParams'] = params =>
dispatch({ type: 'setAutocompleteParams', params });
return {
setFocused,
setKeyboardHeight,
setTrackingViewHeight,
setHeight,
openEmojiKeyboard,
closeEmojiKeyboard,
openSearchEmojiKeyboard,

1
app/containers/MessageComposer/hooks/index.ts
View File

@ -1,6 +1,5 @@
export * from './useAutocomplete';
export * from './useCanUploadFile';
export * from './useChooseMedia';
export * from './useKeyboardListener';
export * from './useSubscription';
export * from './useMessage';

26
app/containers/MessageComposer/hooks/useKeyboardListener.ts
View File

@ -1,26 +0,0 @@
import { MutableRefObject, useEffect } from 'react';
import { Keyboard } from 'react-native';
import { useMessageComposerApi } from '../context';
import { ITrackingView } from '../interfaces';
export const useKeyboardListener = (ref: MutableRefObject<ITrackingView>) => {
const { setKeyboardHeight } = useMessageComposerApi();
useEffect(() => {
const showListener = Keyboard.addListener('keyboardWillShow', async () => {
if (ref?.current) {
const props = await ref.current.getNativeProps();
setKeyboardHeight(props.keyboardHeight);
}
});
const hideListener = Keyboard.addListener('keyboardWillHide', () => {
setKeyboardHeight(0);
});
return () => {
showListener.remove();
hideListener.remove();
};
}, [ref, setKeyboardHeight]);
};

6
app/containers/MessageComposer/interfaces.ts
View File

@ -37,7 +37,11 @@ export type TMarkdownStyle = 'bold' | 'italic' | 'strike' | 'code' | 'code-block
export interface ITrackingView {
resetTracking: () => void;
getNativeProps: () => any;
}
export interface ITrackingViewHeightEvent {
height: number;
keyboardHeight: number;
}
export type TAutocompleteType = '@' | '#' | '!' | ':' | '/' | '/preview' | 'loading' | null;

2
package.json
View File

@ -122,7 +122,7 @@
"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
"react-native-simple-crypto": "RocketChat/react-native-simple-crypto#0.5.2",
"react-native-skeleton-placeholder": "^5.2.3",
"react-native-slowlog": "^1.0.2",
"react-native-slowlog": "1.0.2",
"react-native-svg": "13.8.0",
"react-native-ui-lib": "RocketChat/react-native-ui-lib#ef50151b8d9c1627ef527c620a1472868f9f4df8",
"react-native-url-polyfill": "2.0.0",

80
patches/react-native-ui-lib+7.0.0.patch
View File

@ -1,8 +1,56 @@
diff --git a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js
index cfe1d35..a191c82 100644
--- a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js
+++ b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js
@@ -123,7 +123,12 @@ class KeyboardAccessoryView extends Component {
* Whether or not to handle SafeArea
* default: true
*/
- useSafeArea: PropTypes.bool
+ useSafeArea: PropTypes.bool,
+
+ onHeightChange: PropTypes.shape({
+ height: PropTypes.number,
+ keyboardHeight: PropTypes.number
+ })
};
static iosScrollBehaviors = IOS_SCROLL_BEHAVIORS;
@@ -271,6 +276,7 @@ class KeyboardAccessoryView extends Component {
addBottomView={addBottomView}
bottomViewColor={this.props.bottomViewColor}
allowHitsOutsideBounds={allowHitsOutsideBounds}
+ onHeightChange={this.props.onHeightChange}
>
{renderContent && renderContent()}
<CustomKeyboardView
diff --git a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js
index 60e3fe6..cad78a6 100644
--- a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js
+++ b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js
@@ -33,7 +33,8 @@ class KeyboardTrackingView extends PureComponent {
/**
* Allow control safe area
*/
- useSafeArea: PropTypes.bool
+ useSafeArea: PropTypes.bool,
+ onHeightChange: PropTypes.func,
};
/** V6 should be change to default false */
diff --git a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
index 97255d2..4e0fe05 100644
index 97255d2..3e5537c 100644
--- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
+++ b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
@@ -364,6 +364,7 @@ - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(N
@@ -54,6 +54,7 @@ @interface KeyboardTrackingViewTemp : UIView
@property (nonatomic) BOOL useSafeArea;
@property (nonatomic) BOOL scrollToFocusedInput;
@property (nonatomic) BOOL allowHitsOutsideBounds;
+@property (nonatomic, copy) RCTBubblingEventBlock onHeightChange;
@end
@@ -364,6 +365,7 @@ - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(N
- (void)ObservingInputAccessoryViewTempKeyboardWillDisappear:(ObservingInputAccessoryViewTemp *)ObservingInputAccessoryViewTemp
{
_bottomViewHeight = kBottomViewHeightTemp;
@ -10,6 +58,28 @@ index 97255d2..4e0fe05 100644
[self updateBottomViewFrame];
}
@@ -554,6 +556,11 @@ -(void)updateTransformAndInsets
self.transform = CGAffineTransformMakeTranslation(0, accessoryTranslation);
[self _updateScrollViewInsets];
+
+ if (self.onHeightChange) {
+ self.onHeightChange(@{ @"height": @(self.bounds.size.height), @"keyboardHeight": @(_ObservingInputAccessoryViewTemp.keyboardHeight) });
+ }
+
}
- (void)performScrollToFocusedInput
@@ -673,6 +680,9 @@ @implementation KeyboardTrackingViewTempManager
RCT_REMAP_VIEW_PROPERTY(scrollToFocusedInput, scrollToFocusedInput, BOOL)
RCT_REMAP_VIEW_PROPERTY(allowHitsOutsideBounds, allowHitsOutsideBounds, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onHeightChange, RCTBubblingEventBlock)
+
+
+ (BOOL)requiresMainQueueSetup
{
return YES;
diff --git a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m
index 1ca52e8..69ac77a 100644
--- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m
@ -56,10 +126,10 @@ index 1ca52e8..69ac77a 100644
- _keyboardState = KeyboardStateWillHide;
+ if (_keyboardState == KeyboardStateShown) {
+ _keyboardState = KeyboardStateWillHide;
- [self invalidateIntrinsicContentSize];
+ [self invalidateIntrinsicContentSize];
- if([_delegate respondsToSelector:@selector(ObservingInputAccessoryViewTempKeyboardWillDisappear:)])
- {
- [_delegate ObservingInputAccessoryViewTempKeyboardWillDisappear:self];
@ -77,7 +147,7 @@ index 1ca52e8..69ac77a 100644
- _keyboardState = KeyboardStateHidden;
+ if (_keyboardState == KeyboardStateWillHide) {
+ _keyboardState = KeyboardStateHidden;
- [self invalidateIntrinsicContentSize];
+ [self invalidateIntrinsicContentSize];
+

4
yarn.lock
View File

@ -17959,10 +17959,10 @@ react-native-skeleton-placeholder@^5.2.3:
resolved "https://registry.yarnpkg.com/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-5.2.3.tgz#2dddf1f84d43110b90c22f715b2dbbe2c54732e1"
integrity sha512-nikmTfex3oydnZ4prV62KxibMvcu2l2NegsHGtXhsWwFIX5QaKneBohP7etinUq/c2PkSr3ZlfqooDG2yIHRdg==
react-native-slowlog@^1.0.2:
react-native-slowlog@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz#5520979e3ef9d5273495d431ff3be34f02e35c89"
integrity sha1-VSCXnj751Sc0ldQx/zvjTwLjXIk=
integrity sha512-pUiKi045MS4K+eCiqk/OB8w0V0M1nxa1pWidydHyKB6VordefOl6yO68kqiw+AWn90GgsjGdovThVlOC0dXH1A==
react-native-svg@13.8.0:
version "13.8.0"