* 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 --------- Co-authored-by: Mattermost Build <build@mattermost.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>
171 lines
6.7 KiB
TypeScript
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;
|
|
};
|
|
|