UNPKG

@gorhom/bottom-sheet

Version:

A performant interactive bottom sheet with fully configurable options 🚀

82 lines (77 loc) • 2.31 kB
"use strict"; import React, { memo, useCallback, forwardRef, useEffect, useRef, useImperativeHandle } from 'react'; import { TextInput } from 'react-native-gesture-handler'; import { useBottomSheetInternal } from '../../hooks'; import { findNodeHandle } from '../../utilities'; import { jsx as _jsx } from "react/jsx-runtime"; const BottomSheetTextInputComponent = /*#__PURE__*/forwardRef(({ onFocus, onBlur, ...rest }, providedRef) => { //#region refs const ref = useRef(null); //#endregion //#region hooks const { animatedKeyboardState } = useBottomSheetInternal(); //#endregion //#region callbacks const handleOnFocus = useCallback(args => { const keyboardState = animatedKeyboardState.get(); animatedKeyboardState.set({ ...keyboardState, target: args.nativeEvent.target }); if (onFocus) { onFocus(args); } }, [onFocus, animatedKeyboardState]); const handleOnBlur = useCallback(args => { /** * remove the keyboard state target if it belong * to the current component. */ const keyboardState = animatedKeyboardState.get(); if (keyboardState.target === args.nativeEvent.target) { animatedKeyboardState.set({ ...keyboardState, target: undefined }); } if (onBlur) { onBlur(args); } }, [onBlur, animatedKeyboardState]); //#endregion //#region effects useEffect(() => { return () => { /** * remove the keyboard state target if it belong * to the current component. */ const componentNode = findNodeHandle(ref.current); const keyboardState = animatedKeyboardState.get(); if (keyboardState.target === componentNode) { animatedKeyboardState.set({ ...keyboardState, target: undefined }); } }; }, [animatedKeyboardState]); useImperativeHandle(providedRef, () => ref.current ?? undefined, []); //#endregion return /*#__PURE__*/_jsx(TextInput, { ref: ref, onFocus: handleOnFocus, onBlur: handleOnBlur, ...rest }); }); const BottomSheetTextInput = /*#__PURE__*/memo(BottomSheetTextInputComponent); BottomSheetTextInput.displayName = 'BottomSheetTextInput'; export default BottomSheetTextInput; //# sourceMappingURL=BottomSheetTextInput.js.map