* 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>
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;
|
|
};
|
|
|