mattermost-mobile/app/context/keyboard_animation.tsx
Mattermost Build e74b07051e
New keyboard library Setup (#9278) (#9413)
* Initial setup for new keyboard

* fix the offset calculation onMove by adding isKeyboardFullyOpened

* Done with the keyboard handling implementation

* Handled keyboard focus and blured state using context

* Added default height for input container

* Android support

* Tablet state handling

* Fix for refreshing offset in list

* Created a default context for mention post list

* Fix linter errors

* Fix tests

* Minor

* Fix the height issue for tablet view

* Review comments

* Dependency fix

* Reveiw comment

* keyboard animation only enabled with screen on top navigation

* added tests

* Added extra keyboard component for emoji picker (#9328)

* Added extra keyboard component

* handled swipe geature for extra keyboard

* scroll to bottom visible on emoji picker

* Check for stale event for keyboard geature area

* fix keyboard stale event for mid-gesture change swipe direction

* Closing emoji picker when message priority is opened

* changing to thread view closes emoji picker

* Close emoij picker and keyboard when attachment icons are clicked

* handle android emoji picker behaviour

* Remove emoji picker code

* fix tests

* Address reviev comments

* Test fixes

* usePreventDoubleTab for race condition and corrected comment on isInputAccessoryViewMode flag

* File attachments option in bottom sheet quick action (#9331)

* Added extra keyboard component

* handled swipe geature for extra keyboard

* File attachments option in bottom sheet quick action

* Updated tests

* i18n

* fix test

* Added tests

* Review comment

* fix tests

* Integrated Emoji picker to Extra keyboard component.  (#9339)

* Added extra keyboard component

* handled swipe geature for extra keyboard

* scroll to bottom visible on emoji picker

* Fix the post input container height change issue

* Added emoji picker with search functionality

* keyboard height not recorded fallback to default height, set search to false closing emoji picker

* fix search funcitonality in android

* scroll to end bottom dismissed with pressed

* Fixed the scroll issue for android

* fix the flickering post input issue

* Wired up the emoji picker

* Added keyboard and spaceback in emoji picker

* intl extract

* initial cursor position and simple calculation review comment

* separated grapheme to utils file

* Review comments

* nitpick

* Fix the bottom safe area and navigation stack restore fix

* Fix test

* disabled emoji picker in edit post screen

* change the name of the variable to name it clarier

* fix the tab gap issue in andriod

* disabled the emoji skin tone change on andriod

* fix the input container jump issue

* fix the failing test

* UX review

* added white space after the attachment icon

* When @ or / is press open keyboard on andriod also fix the scroll issue when keyboard is open

* back bottom closes emoji picker and opening keyboard jump fix

* reverted code

* fixed the flickering issue of input and scroll position fix

* Fix the gap issue in thread

* fix the warning reaminated issue when opening a channel

* Fix the extra space issue between input and emoij picker

* Minor fix for extra space between input and emoji picker

* Fix thread view bottom safe area and gap between keyboard and searched emojis

* Fix the keyboard issue in tablet

* Fix the warning issue react-native-keyboard-controller

* Fix tests

* Fix the tablet search hight issue

* Replaced the ExtraKeyboardProvider with KeyboardProvider from rnkc for permalink

* Bottom sheet jump issue resolved

* Search do not close after selecting emoji in search list

* Added the bottom inset height in search emoji for android

* fix buid issue

* Fix the cancel state to emoji picker

* use portals for autocomplete

* fix permalink extra space in post list

* Portal only for android

---------





(cherry picked from commit e39b27be7e)

Co-authored-by: Rajat Dabade <rajatdabade1997@gmail.com>
Co-authored-by: Rahim Rahman <rahim.rahman@mattermost.com>
Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
2026-01-14 08:18:06 +02:00

171 lines
6.7 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {createContext, useContext, useMemo, useRef, useCallback, type ReactNode} from 'react';
import {useSharedValue, type SharedValue} from 'react-native-reanimated';
import type {PasteInputRef} from '@mattermost/react-native-paste-input';
interface KeyboardAnimationContextType {
keyboardTranslateY: SharedValue<number>;
bottomInset: SharedValue<number>;
scrollOffset: SharedValue<number>;
keyboardHeight: SharedValue<number>;
scrollPosition: SharedValue<number>;
onScroll: (event: unknown) => void;
postInputContainerHeight: number;
inputRef: React.MutableRefObject<PasteInputRef | undefined>;
blurInput: () => void;
focusInput: () => void;
blurAndDismissKeyboard: () => Promise<void>;
isKeyboardFullyOpen: SharedValue<boolean>;
isKeyboardFullyClosed: SharedValue<boolean>;
isKeyboardInTransition: SharedValue<boolean>;
showInputAccessoryView: boolean;
isInputAccessoryViewMode: SharedValue<boolean>;
setShowInputAccessoryView: (show: boolean) => void;
lastKeyboardHeight: number;
inputAccessoryViewAnimatedHeight: SharedValue<number>;
isTransitioningFromCustomView: SharedValue<boolean>;
closeInputAccessoryView: () => void;
scrollToEnd: () => void;
isEmojiSearchFocused: boolean;
setIsEmojiSearchFocused: (focused: boolean) => void;
cursorPositionRef: React.MutableRefObject<number>;
registerCursorPosition: (cursorPosition: number) => void;
updateValue: React.Dispatch<React.SetStateAction<string>> | null;
updateCursorPosition: React.Dispatch<React.SetStateAction<number>> | null;
registerPostInputCallbacks: (
updateValueFn: React.Dispatch<React.SetStateAction<string>>,
updateCursorPositionFn: React.Dispatch<React.SetStateAction<number>>
) => void;
}
const KeyboardAnimationContext = createContext<KeyboardAnimationContextType | null>(null);
export const KeyboardAnimationProvider = ({
children,
value,
}: {
children: ReactNode;
value: KeyboardAnimationContextType;
}) => {
return (
<KeyboardAnimationContext.Provider value={value}>
{children}
</KeyboardAnimationContext.Provider>
);
};
const DEFAULT_POST_INPUT_HEIGHT = 91;
export const useKeyboardAnimationContext = () => {
const context = useContext(KeyboardAnimationContext);
// Always create default values (hooks must be called unconditionally)
const defaultKeyboardTranslateY = useSharedValue(0);
const defaultBottomInset = useSharedValue(0);
const defaultScrollOffset = useSharedValue(0);
const defaultKeyboardHeight = useSharedValue(0);
const defaultScrollPosition = useSharedValue(0);
const defaultIsKeyboardFullyOpen = useSharedValue(false);
const defaultIsKeyboardFullyClosed = useSharedValue(true);
const defaultIsKeyboardInTransition = useSharedValue(false);
const defaultInputRef = useRef<PasteInputRef | undefined>(undefined);
const defaultIsInputAccessoryViewMode = useSharedValue(false);
const defaultIsTransitioningFromCustomView = useSharedValue(false);
const defaultInputAccessoryViewAnimatedHeight = useSharedValue(0);
const defaultOnScroll = useCallback(() => {
// No-op fallback
}, []);
const defaultBlurInput = useCallback(() => {
// No-op fallback
}, []);
const defaultFocusInput = useCallback(() => {
// No-op fallback
}, []);
const defaultBlurAndDismissKeyboard = useCallback(async () => {
// No-op fallback
}, []);
const defaultSetShowInputAccessoryView = useCallback(() => {
// No-op fallback
}, []);
const defaultCloseInputAccessoryView = useCallback(() => {
// No-op fallback
}, []);
const defaultScrollToEnd = useCallback(() => {
// No-op fallback
}, []);
const defaultSetIsEmojiSearchFocused = useCallback(() => {
// No-op fallback
}, []);
const defaultCursorPositionRef = useRef<number>(0);
const defaultRegisterCursorPosition = useCallback(() => {
// No-op fallback
}, []);
const defaultUpdateValue = useRef<React.Dispatch<React.SetStateAction<string>> | null>(null);
const defaultUpdateCursorPosition = useRef<React.Dispatch<React.SetStateAction<number>> | null>(null);
const defaultRegisterPostInputCallbacks = useCallback(() => {
// No-op fallback
}, []);
const fallbackValue = useMemo(() => ({
keyboardTranslateY: defaultKeyboardTranslateY,
bottomInset: defaultBottomInset,
scrollOffset: defaultScrollOffset,
keyboardHeight: defaultKeyboardHeight,
scrollPosition: defaultScrollPosition,
onScroll: defaultOnScroll,
postInputContainerHeight: DEFAULT_POST_INPUT_HEIGHT,
inputRef: defaultInputRef,
blurInput: defaultBlurInput,
focusInput: defaultFocusInput,
blurAndDismissKeyboard: defaultBlurAndDismissKeyboard,
isKeyboardFullyOpen: defaultIsKeyboardFullyOpen,
isKeyboardFullyClosed: defaultIsKeyboardFullyClosed,
isKeyboardInTransition: defaultIsKeyboardInTransition,
setShowInputAccessoryView: defaultSetShowInputAccessoryView,
showInputAccessoryView: false,
lastKeyboardHeight: 0,
isInputAccessoryViewMode: defaultIsInputAccessoryViewMode,
inputAccessoryViewAnimatedHeight: defaultInputAccessoryViewAnimatedHeight,
isTransitioningFromCustomView: defaultIsTransitioningFromCustomView,
closeInputAccessoryView: defaultCloseInputAccessoryView,
scrollToEnd: defaultScrollToEnd,
isEmojiSearchFocused: false,
setIsEmojiSearchFocused: defaultSetIsEmojiSearchFocused,
cursorPositionRef: defaultCursorPositionRef,
registerCursorPosition: defaultRegisterCursorPosition,
updateValue: defaultUpdateValue.current,
updateCursorPosition: defaultUpdateCursorPosition.current,
registerPostInputCallbacks: defaultRegisterPostInputCallbacks,
// Shared values don't need to be in dependencies - they're stable references
// eslint-disable-next-line react-hooks/exhaustive-deps
}), [
defaultOnScroll,
defaultInputRef,
defaultBlurInput,
defaultFocusInput,
defaultBlurAndDismissKeyboard,
defaultSetShowInputAccessoryView,
defaultCloseInputAccessoryView,
defaultScrollToEnd,
defaultSetIsEmojiSearchFocused,
defaultCursorPositionRef,
defaultRegisterCursorPosition,
defaultUpdateValue,
defaultUpdateCursorPosition,
defaultRegisterPostInputCallbacks,
]);
// If context exists, return it; otherwise return fallback
return context || fallbackValue;
};