@gorhom/bottom-sheet
Version:
A performant interactive bottom sheet with fully configurable options 🚀
82 lines (77 loc) • 2.31 kB
JavaScript
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
;