@attio/react-native-bottom-sheet-toolbox-text-input
Version:
104 lines (103 loc) • 4.02 kB
JavaScript
;
import * as React from "react";
import { View } from "react-native";
import { useDerivedValue, useSharedValue } from "react-native-reanimated";
import { BottomSheetDragGesture, BottomSheetToolbox, CLOSED_SNAP_POINT, useKeyboardAwareSafeAreaBottomInset, useLayoutSharedValue } from "@attio/react-native-bottom-sheet-toolbox";
import { OverlayTextInput } from "./components/overlay-text-input/overlay-text-input";
import { OverlayTextInputContainer } from "./components/overlay-text-input-container/overlay-text-input-container";
import { jsx as _jsx } from "react/jsx-runtime";
export function BottomSheetToolboxTextInput({
insetTop,
backdropComponent,
onSnapChange,
onClose,
sheetStyle,
children,
additionalIsReady: outerAdditionalIsReady,
multiline = false,
ref,
keyboardAwareSafeAreaBottomInsetFallback = 0,
...textInputProps
}) {
const {
onLayout: onTopInsetLayout,
height: topInsetSharedValue
} = useLayoutSharedValue();
const minTextInputHeightSharedValue = useSharedValue(null);
const bottomInsetSharedValue = useKeyboardAwareSafeAreaBottomInset(keyboardAwareSafeAreaBottomInsetFallback);
const minSnapPoint = useDerivedValue(() => {
const height = minTextInputHeightSharedValue.get();
const topInset = topInsetSharedValue.get();
const bottomInset = bottomInsetSharedValue.get();
if (height === null || topInset === null || bottomInset === null) return null;
return height + topInset + bottomInset;
}, [topInsetSharedValue, bottomInsetSharedValue]);
const additionalIsReady = useDerivedValue(() => {
const outerReadyAbsolute = outerAdditionalIsReady === undefined || (typeof outerAdditionalIsReady === "boolean" ? outerAdditionalIsReady : outerAdditionalIsReady.get());
return outerReadyAbsolute && minSnapPoint.get() !== null;
}, [outerAdditionalIsReady]);
const snapPoints = React.useMemo(() => multiline ? [CLOSED_SNAP_POINT, minSnapPoint, "100%"] : [CLOSED_SNAP_POINT, minSnapPoint], [multiline]);
const textInputRef = React.useRef(null);
const bottomSheetRef = React.useRef(null);
React.useImperativeHandle(ref, () => ({
snapToIndex(snapPointIndex) {
bottomSheetRef.current?.snapToIndex(snapPointIndex);
},
expand() {
bottomSheetRef.current?.expand();
},
close() {
bottomSheetRef.current?.close();
},
getCurrentSnapIndex() {
return bottomSheetRef.current?.getCurrentSnapIndex() || null;
},
focus() {
textInputRef.current?.focus();
},
blur() {
textInputRef.current?.blur();
}
}), []);
return /*#__PURE__*/_jsx(BottomSheetToolbox, {
ref: bottomSheetRef,
snapPoints: snapPoints,
initialSnapPointIndex: 1,
backdropComponent: backdropComponent,
overlayComponent: /*#__PURE__*/_jsx(BottomSheetDragGesture, {
id: "text-input",
children: /*#__PURE__*/_jsx(OverlayTextInputContainer, {
keyboardAwareSafeAreaBottomInsetFallback: keyboardAwareSafeAreaBottomInsetFallback,
minTextInputHeightSharedValue: minTextInputHeightSharedValue,
topInsetSharedValue: topInsetSharedValue,
bottomInsetSharedValue: bottomInsetSharedValue,
children: /*#__PURE__*/_jsx(OverlayTextInput, {
ref: textInputRef,
...textInputProps,
multiline: multiline,
topInsetSharedValue: topInsetSharedValue,
bottomInsetSharedValue: bottomInsetSharedValue,
minTextInputHeightSharedValue: minTextInputHeightSharedValue
})
})
}),
sheetStyle: sheetStyle,
additionalIsReady: additionalIsReady,
...(insetTop && {
insetTop
}),
...(onSnapChange && {
onSnapChange
}),
...(onClose && {
onClose
}),
children: /*#__PURE__*/_jsx(View, {
onLayout: onTopInsetLayout,
pointerEvents: "box-none",
children: children
})
});
}
BottomSheetToolboxTextInput.displayName = "BottomSheetToolboxTextInput";
//# sourceMappingURL=bottom-sheet-toolbox-text-input.js.map