@attio/react-native-bottom-sheet-toolbox-text-input
Version:
64 lines (63 loc) • 2.46 kB
JavaScript
;
import * as React from "react";
import { useMergeRefs } from "react-merge-refs";
import { TextInput } from "react-native";
import Animated, { useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
import { useBottomSheetToolboxInternalContext, useKeyboardHeightSharedValue } from "@attio/react-native-bottom-sheet-toolbox";
import { useMinOverlayHeightSharedValue } from "./use-min-overlay-height-shared-value";
import { jsx as _jsx } from "react/jsx-runtime";
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
export function OverlayTextInput({
bottomInsetSharedValue,
topInsetSharedValue,
minTextInputHeightSharedValue,
textInputStyle,
autoFocus = false,
multiline = false,
ref,
value,
...textInputProps
}) {
const textInputRef = React.useRef(null);
const onContentSizeChange = useMinOverlayHeightSharedValue({
minTextInputHeightSharedValue,
topInsetSharedValue,
bottomInsetSharedValue,
textInputStyle,
fallbackLines: multiline ? 3 : 1
});
const {
currentPositionSharedValue
} = useBottomSheetToolboxInternalContext();
const keyboardHeightSharedValue = useKeyboardHeightSharedValue();
const overlayTextInputHeightSharedValue = useDerivedValue(() => {
const topInset = topInsetSharedValue.get();
const minTextInputHeight = minTextInputHeightSharedValue.get();
if (topInset === null || minTextInputHeight === null) {
return null;
}
const unclampedHeight = currentPositionSharedValue.get() - keyboardHeightSharedValue.get() - topInset - bottomInsetSharedValue.get();
const height = Math.max(minTextInputHeight, unclampedHeight);
return height;
}, [bottomInsetSharedValue, currentPositionSharedValue, keyboardHeightSharedValue, minTextInputHeightSharedValue, topInsetSharedValue]);
const style = useAnimatedStyle(() => {
const height = overlayTextInputHeightSharedValue.get();
const bottomInset = bottomInsetSharedValue.get();
return {
height: height,
marginBottom: bottomInset
};
}, [bottomInsetSharedValue]);
const mergedRef = useMergeRefs([ref, textInputRef]);
return /*#__PURE__*/_jsx(AnimatedTextInput, {
ref: mergedRef,
...textInputProps,
value: value,
multiline: multiline,
onContentSizeChange: onContentSizeChange,
textAlignVertical: "top",
autoFocus: autoFocus,
style: [style, textInputStyle]
});
}
//# sourceMappingURL=overlay-text-input.js.map