feat: better composer height calculation (#5523)
* Revert "feat: Send native calculated keyboard and tracking view height to TS (#5514)"
This reverts commit cedd0b98f2
.
* better height calculation
This commit is contained in:
parent
e06aaf1cc0
commit
7b73eac895
|
@ -1,5 +1,5 @@
|
||||||
import React, { ReactElement, useRef, useImperativeHandle, useCallback } from 'react';
|
import React, { ReactElement, useRef, useImperativeHandle, useCallback } from 'react';
|
||||||
import { View, StyleSheet, NativeModules, NativeSyntheticEvent, TextInputProps } from 'react-native';
|
import { View, StyleSheet, NativeModules } from 'react-native';
|
||||||
import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
|
import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
|
||||||
import { useBackHandler } from '@react-native-community/hooks';
|
import { useBackHandler } from '@react-native-community/hooks';
|
||||||
import { Q } from '@nozbe/watermelondb';
|
import { Q } from '@nozbe/watermelondb';
|
||||||
|
@ -16,8 +16,8 @@ import {
|
||||||
useShowEmojiKeyboard,
|
useShowEmojiKeyboard,
|
||||||
useShowEmojiSearchbar
|
useShowEmojiSearchbar
|
||||||
} from './context';
|
} from './context';
|
||||||
import { IComposerInput, ITrackingView, ITrackingViewHeightEvent } from './interfaces';
|
import { IComposerInput, ITrackingView } from './interfaces';
|
||||||
import { isAndroid, isIOS } from '../../lib/methods/helpers';
|
import { isIOS } from '../../lib/methods/helpers';
|
||||||
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
|
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
|
||||||
import { useTheme } from '../../theme';
|
import { useTheme } from '../../theme';
|
||||||
import { EventTypes } from '../EmojiPicker/interfaces';
|
import { EventTypes } from '../EmojiPicker/interfaces';
|
||||||
|
@ -29,6 +29,7 @@ import { Services } from '../../lib/services';
|
||||||
import log from '../../lib/methods/helpers/log';
|
import log from '../../lib/methods/helpers/log';
|
||||||
import { prepareQuoteMessage } from './helpers';
|
import { prepareQuoteMessage } from './helpers';
|
||||||
import { RecordAudio } from './components/RecordAudio';
|
import { RecordAudio } from './components/RecordAudio';
|
||||||
|
import { useKeyboardListener } from './hooks';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
|
@ -58,14 +59,16 @@ export const MessageComposer = ({
|
||||||
setInput: () => {},
|
setInput: () => {},
|
||||||
onAutocompleteItemSelected: () => {}
|
onAutocompleteItemSelected: () => {}
|
||||||
});
|
});
|
||||||
const trackingViewRef = useRef<ITrackingView>({ resetTracking: () => {} });
|
const trackingViewRef = useRef<ITrackingView>({ resetTracking: () => {}, getNativeProps: () => ({ trackingViewHeight: 0 }) });
|
||||||
const { colors, theme } = useTheme();
|
const { colors, theme } = useTheme();
|
||||||
const { rid, tmid, action, selectedMessages, sharing, editRequest, onSendMessage } = useRoomContext();
|
const { rid, tmid, action, selectedMessages, sharing, editRequest, onSendMessage } = useRoomContext();
|
||||||
const showEmojiKeyboard = useShowEmojiKeyboard();
|
const showEmojiKeyboard = useShowEmojiKeyboard();
|
||||||
const showEmojiSearchbar = useShowEmojiSearchbar();
|
const showEmojiSearchbar = useShowEmojiSearchbar();
|
||||||
const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
|
const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
|
||||||
const { openSearchEmojiKeyboard, closeEmojiKeyboard, closeSearchEmojiKeyboard, setHeight } = useMessageComposerApi();
|
const { openSearchEmojiKeyboard, closeEmojiKeyboard, closeSearchEmojiKeyboard, setTrackingViewHeight } =
|
||||||
|
useMessageComposerApi();
|
||||||
const recordingAudio = useRecordingAudio();
|
const recordingAudio = useRecordingAudio();
|
||||||
|
useKeyboardListener(trackingViewRef);
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
@ -188,12 +191,8 @@ export const MessageComposer = ({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onHeightChange = (event: NativeSyntheticEvent<ITrackingViewHeightEvent>) => {
|
const onHeightChanged = (height: number) => {
|
||||||
setHeight(event.nativeEvent.keyboardHeight, event.nativeEvent.height);
|
setTrackingViewHeight(height);
|
||||||
};
|
|
||||||
|
|
||||||
const handleLayout: TextInputProps['onLayout'] = e => {
|
|
||||||
setHeight(0, e.nativeEvent.layout.height);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight;
|
const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight;
|
||||||
|
@ -220,25 +219,23 @@ export const MessageComposer = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View onLayout={isAndroid ? handleLayout : undefined}>
|
<MessageInnerContext.Provider value={{ sendMessage: handleSendMessage, onEmojiSelected, closeEmojiKeyboardAndAction }}>
|
||||||
<MessageInnerContext.Provider value={{ sendMessage: handleSendMessage, onEmojiSelected, closeEmojiKeyboardAndAction }}>
|
<KeyboardAccessoryView
|
||||||
<KeyboardAccessoryView
|
ref={(ref: ITrackingView) => (trackingViewRef.current = ref)}
|
||||||
ref={(ref: ITrackingView) => (trackingViewRef.current = ref)}
|
renderContent={renderContent}
|
||||||
renderContent={renderContent}
|
kbInputRef={composerInputRef}
|
||||||
kbInputRef={composerInputRef}
|
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
|
||||||
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
|
kbInitialProps={{ theme }}
|
||||||
kbInitialProps={{ theme }}
|
onKeyboardResigned={onKeyboardResigned}
|
||||||
onKeyboardResigned={onKeyboardResigned}
|
onItemSelected={onKeyboardItemSelected}
|
||||||
onItemSelected={onKeyboardItemSelected}
|
trackInteractive
|
||||||
trackInteractive
|
requiresSameParentToManageScrollView
|
||||||
requiresSameParentToManageScrollView
|
addBottomView
|
||||||
addBottomView
|
bottomViewColor={backgroundColor}
|
||||||
bottomViewColor={backgroundColor}
|
iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
|
||||||
iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
|
onHeightChanged={onHeightChanged}
|
||||||
onHeightChange={onHeightChange}
|
/>
|
||||||
/>
|
<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
|
||||||
<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
|
</MessageInnerContext.Provider>
|
||||||
</MessageInnerContext.Provider>
|
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { useAutocomplete } from '../../hooks';
|
||||||
import { IAutocompleteItemProps } from '../../interfaces';
|
import { IAutocompleteItemProps } from '../../interfaces';
|
||||||
import { AutocompletePreview } from './AutocompletePreview';
|
import { AutocompletePreview } from './AutocompletePreview';
|
||||||
import { useRoomContext } from '../../../../views/RoomView/context';
|
import { useRoomContext } from '../../../../views/RoomView/context';
|
||||||
import { useStyle, getBottom } from './styles';
|
import { useStyle } from './styles';
|
||||||
|
|
||||||
export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onPress'] }): ReactElement | null => {
|
export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onPress'] }): ReactElement | null => {
|
||||||
const { rid } = useRoomContext();
|
const { rid } = useRoomContext();
|
||||||
|
@ -23,13 +23,12 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
|
||||||
commandParams: params
|
commandParams: params
|
||||||
});
|
});
|
||||||
const [styles, colors] = useStyle();
|
const [styles, colors] = useStyle();
|
||||||
|
const viewBottom = trackingViewHeight + keyboardHeight + (keyboardHeight > 0 ? 0 : bottom) - 4;
|
||||||
|
|
||||||
if (items.length === 0 || !type) {
|
if (items.length === 0 || !type) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewBottom = getBottom(trackingViewHeight, keyboardHeight, bottom);
|
|
||||||
|
|
||||||
if (type !== '/preview') {
|
if (type !== '/preview') {
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
|
|
|
@ -2,8 +2,6 @@ import sharedStyles from '../../../../views/Styles';
|
||||||
import { useTheme } from '../../../../theme';
|
import { useTheme } from '../../../../theme';
|
||||||
|
|
||||||
const MAX_HEIGHT = 216;
|
const MAX_HEIGHT = 216;
|
||||||
export const getBottom = (trackingViewHeight: number, keyboardHeight: number, bottomSafeArea: number): number =>
|
|
||||||
trackingViewHeight + keyboardHeight + (keyboardHeight > 0 ? 0 : bottomSafeArea) - 4;
|
|
||||||
|
|
||||||
export const useStyle = () => {
|
export const useStyle = () => {
|
||||||
const { colors } = useTheme();
|
const { colors } = useTheme();
|
||||||
|
|
|
@ -5,7 +5,8 @@ import { IAutocompleteBase, TMicOrSend } from './interfaces';
|
||||||
import { animateNextTransition } from '../../lib/methods/helpers';
|
import { animateNextTransition } from '../../lib/methods/helpers';
|
||||||
|
|
||||||
type TMessageComposerContextApi = {
|
type TMessageComposerContextApi = {
|
||||||
setHeight: (keyboardHeight: number, trackingViewHeight: number) => void;
|
setKeyboardHeight: (height: number) => void;
|
||||||
|
setTrackingViewHeight: (height: number) => void;
|
||||||
openEmojiKeyboard(): void;
|
openEmojiKeyboard(): void;
|
||||||
closeEmojiKeyboard(): void;
|
closeEmojiKeyboard(): void;
|
||||||
openSearchEmojiKeyboard(): void;
|
openSearchEmojiKeyboard(): void;
|
||||||
|
@ -74,7 +75,8 @@ type Actions =
|
||||||
| { type: 'updateEmojiKeyboard'; showEmojiKeyboard: boolean }
|
| { type: 'updateEmojiKeyboard'; showEmojiKeyboard: boolean }
|
||||||
| { type: 'updateEmojiSearchbar'; showEmojiSearchbar: boolean }
|
| { type: 'updateEmojiSearchbar'; showEmojiSearchbar: boolean }
|
||||||
| { type: 'updateFocused'; focused: boolean }
|
| { type: 'updateFocused'; focused: boolean }
|
||||||
| { type: 'updateHeight'; trackingViewHeight: number; keyboardHeight: number }
|
| { type: 'updateTrackingViewHeight'; trackingViewHeight: number }
|
||||||
|
| { type: 'updateKeyboardHeight'; keyboardHeight: number }
|
||||||
| { type: 'openEmojiKeyboard' }
|
| { type: 'openEmojiKeyboard' }
|
||||||
| { type: 'closeEmojiKeyboard' }
|
| { type: 'closeEmojiKeyboard' }
|
||||||
| { type: 'openSearchEmojiKeyboard' }
|
| { type: 'openSearchEmojiKeyboard' }
|
||||||
|
@ -94,8 +96,10 @@ const reducer = (state: State, action: Actions): State => {
|
||||||
case 'updateFocused':
|
case 'updateFocused':
|
||||||
animateNextTransition();
|
animateNextTransition();
|
||||||
return { ...state, focused: action.focused };
|
return { ...state, focused: action.focused };
|
||||||
case 'updateHeight':
|
case 'updateTrackingViewHeight':
|
||||||
return { ...state, trackingViewHeight: action.trackingViewHeight, keyboardHeight: action.keyboardHeight };
|
return { ...state, trackingViewHeight: action.trackingViewHeight };
|
||||||
|
case 'updateKeyboardHeight':
|
||||||
|
return { ...state, keyboardHeight: action.keyboardHeight };
|
||||||
case 'openEmojiKeyboard':
|
case 'openEmojiKeyboard':
|
||||||
return { ...state, showEmojiKeyboard: true, showEmojiSearchbar: false };
|
return { ...state, showEmojiKeyboard: true, showEmojiSearchbar: false };
|
||||||
case 'openSearchEmojiKeyboard':
|
case 'openSearchEmojiKeyboard':
|
||||||
|
@ -120,13 +124,19 @@ const reducer = (state: State, action: Actions): State => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const MessageComposerProvider = ({ children }: { children: ReactElement }): ReactElement => {
|
export const MessageComposerProvider = ({ children }: { children: ReactElement }): ReactElement => {
|
||||||
const [state, dispatch] = useReducer(reducer, { keyboardHeight: 0, autocompleteParams: { text: '', type: null } } as State);
|
const [state, dispatch] = useReducer(reducer, {
|
||||||
|
keyboardHeight: 0,
|
||||||
|
trackingViewHeight: 0,
|
||||||
|
autocompleteParams: { text: '', type: null }
|
||||||
|
} as State);
|
||||||
|
|
||||||
const api = useMemo(() => {
|
const api = useMemo(() => {
|
||||||
const setFocused: TMessageComposerContextApi['setFocused'] = focused => dispatch({ type: 'updateFocused', focused });
|
const setFocused = (focused: boolean) => dispatch({ type: 'updateFocused', focused });
|
||||||
|
|
||||||
const setHeight: TMessageComposerContextApi['setHeight'] = (keyboardHeight, trackingViewHeight) =>
|
const setKeyboardHeight = (keyboardHeight: number) => dispatch({ type: 'updateKeyboardHeight', keyboardHeight });
|
||||||
dispatch({ type: 'updateHeight', keyboardHeight, trackingViewHeight });
|
|
||||||
|
const setTrackingViewHeight = (trackingViewHeight: number) =>
|
||||||
|
dispatch({ type: 'updateTrackingViewHeight', trackingViewHeight });
|
||||||
|
|
||||||
const openEmojiKeyboard = () => dispatch({ type: 'openEmojiKeyboard' });
|
const openEmojiKeyboard = () => dispatch({ type: 'openEmojiKeyboard' });
|
||||||
|
|
||||||
|
@ -136,23 +146,21 @@ export const MessageComposerProvider = ({ children }: { children: ReactElement }
|
||||||
|
|
||||||
const closeSearchEmojiKeyboard = () => dispatch({ type: 'closeSearchEmojiKeyboard' });
|
const closeSearchEmojiKeyboard = () => dispatch({ type: 'closeSearchEmojiKeyboard' });
|
||||||
|
|
||||||
const setMicOrSend: TMessageComposerContextApi['setMicOrSend'] = micOrSend => dispatch({ type: 'setMicOrSend', micOrSend });
|
const setMicOrSend = (micOrSend: TMicOrSend) => dispatch({ type: 'setMicOrSend', micOrSend });
|
||||||
|
|
||||||
const setMarkdownToolbar: TMessageComposerContextApi['setMarkdownToolbar'] = showMarkdownToolbar =>
|
const setMarkdownToolbar = (showMarkdownToolbar: boolean) => dispatch({ type: 'setMarkdownToolbar', showMarkdownToolbar });
|
||||||
dispatch({ type: 'setMarkdownToolbar', showMarkdownToolbar });
|
|
||||||
|
|
||||||
const setAlsoSendThreadToChannel: TMessageComposerContextApi['setAlsoSendThreadToChannel'] = alsoSendThreadToChannel =>
|
const setAlsoSendThreadToChannel = (alsoSendThreadToChannel: boolean) =>
|
||||||
dispatch({ type: 'setAlsoSendThreadToChannel', alsoSendThreadToChannel });
|
dispatch({ type: 'setAlsoSendThreadToChannel', alsoSendThreadToChannel });
|
||||||
|
|
||||||
const setRecordingAudio: TMessageComposerContextApi['setRecordingAudio'] = recordingAudio =>
|
const setRecordingAudio = (recordingAudio: boolean) => dispatch({ type: 'setRecordingAudio', recordingAudio });
|
||||||
dispatch({ type: 'setRecordingAudio', recordingAudio });
|
|
||||||
|
|
||||||
const setAutocompleteParams: TMessageComposerContextApi['setAutocompleteParams'] = params =>
|
const setAutocompleteParams = (params: IAutocompleteBase) => dispatch({ type: 'setAutocompleteParams', params });
|
||||||
dispatch({ type: 'setAutocompleteParams', params });
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
setFocused,
|
setFocused,
|
||||||
setHeight,
|
setKeyboardHeight,
|
||||||
|
setTrackingViewHeight,
|
||||||
openEmojiKeyboard,
|
openEmojiKeyboard,
|
||||||
closeEmojiKeyboard,
|
closeEmojiKeyboard,
|
||||||
openSearchEmojiKeyboard,
|
openSearchEmojiKeyboard,
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
export * from './useAutocomplete';
|
export * from './useAutocomplete';
|
||||||
export * from './useCanUploadFile';
|
export * from './useCanUploadFile';
|
||||||
export * from './useChooseMedia';
|
export * from './useChooseMedia';
|
||||||
|
export * from './useKeyboardListener';
|
||||||
export * from './useSubscription';
|
export * from './useSubscription';
|
||||||
export * from './useMessage';
|
export * from './useMessage';
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
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]);
|
||||||
|
};
|
|
@ -37,11 +37,7 @@ export type TMarkdownStyle = 'bold' | 'italic' | 'strike' | 'code' | 'code-block
|
||||||
|
|
||||||
export interface ITrackingView {
|
export interface ITrackingView {
|
||||||
resetTracking: () => void;
|
resetTracking: () => void;
|
||||||
}
|
getNativeProps: () => any;
|
||||||
|
|
||||||
export interface ITrackingViewHeightEvent {
|
|
||||||
height: number;
|
|
||||||
keyboardHeight: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TAutocompleteType = '@' | '#' | '!' | ':' | '/' | '/preview' | 'loading' | null;
|
export type TAutocompleteType = '@' | '#' | '!' | ':' | '/' | '/preview' | 'loading' | null;
|
||||||
|
|
|
@ -122,7 +122,7 @@
|
||||||
"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
|
"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-simple-crypto": "RocketChat/react-native-simple-crypto#0.5.2",
|
||||||
"react-native-skeleton-placeholder": "^5.2.3",
|
"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-svg": "13.8.0",
|
||||||
"react-native-ui-lib": "RocketChat/react-native-ui-lib#ef50151b8d9c1627ef527c620a1472868f9f4df8",
|
"react-native-ui-lib": "RocketChat/react-native-ui-lib#ef50151b8d9c1627ef527c620a1472868f9f4df8",
|
||||||
"react-native-url-polyfill": "2.0.0",
|
"react-native-url-polyfill": "2.0.0",
|
||||||
|
|
|
@ -1,56 +1,8 @@
|
||||||
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
|
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..3e5537c 100644
|
index 97255d2..4e0fe05 100644
|
||||||
--- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
|
--- 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
|
+++ b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
|
||||||
@@ -54,6 +54,7 @@ @interface KeyboardTrackingViewTemp : UIView
|
@@ -364,6 +364,7 @@ - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(N
|
||||||
@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
|
- (void)ObservingInputAccessoryViewTempKeyboardWillDisappear:(ObservingInputAccessoryViewTemp *)ObservingInputAccessoryViewTemp
|
||||||
{
|
{
|
||||||
_bottomViewHeight = kBottomViewHeightTemp;
|
_bottomViewHeight = kBottomViewHeightTemp;
|
||||||
|
@ -58,28 +10,6 @@ index 97255d2..3e5537c 100644
|
||||||
[self updateBottomViewFrame];
|
[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
|
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
|
index 1ca52e8..69ac77a 100644
|
||||||
--- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m
|
--- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m
|
||||||
|
|
|
@ -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"
|
resolved "https://registry.yarnpkg.com/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-5.2.3.tgz#2dddf1f84d43110b90c22f715b2dbbe2c54732e1"
|
||||||
integrity sha512-nikmTfex3oydnZ4prV62KxibMvcu2l2NegsHGtXhsWwFIX5QaKneBohP7etinUq/c2PkSr3ZlfqooDG2yIHRdg==
|
integrity sha512-nikmTfex3oydnZ4prV62KxibMvcu2l2NegsHGtXhsWwFIX5QaKneBohP7etinUq/c2PkSr3ZlfqooDG2yIHRdg==
|
||||||
|
|
||||||
react-native-slowlog@1.0.2:
|
react-native-slowlog@^1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz#5520979e3ef9d5273495d431ff3be34f02e35c89"
|
resolved "https://registry.yarnpkg.com/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz#5520979e3ef9d5273495d431ff3be34f02e35c89"
|
||||||
integrity sha512-pUiKi045MS4K+eCiqk/OB8w0V0M1nxa1pWidydHyKB6VordefOl6yO68kqiw+AWn90GgsjGdovThVlOC0dXH1A==
|
integrity sha1-VSCXnj751Sc0ldQx/zvjTwLjXIk=
|
||||||
|
|
||||||
react-native-svg@13.8.0:
|
react-native-svg@13.8.0:
|
||||||
version "13.8.0"
|
version "13.8.0"
|
||||||
|
|
Loading…
Reference in New Issue