@attio/react-native-bottom-sheet-toolbox-text-input
Version:
109 lines (108 loc) • 5.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheetToolboxTextInput = BottomSheetToolboxTextInput;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = require("react-native-reanimated");
var _reactNativeBottomSheetToolbox = require("@attio/react-native-bottom-sheet-toolbox");
var _overlayTextInput = require("./components/overlay-text-input/overlay-text-input");
var _overlayTextInputContainer = require("./components/overlay-text-input-container/overlay-text-input-container");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function BottomSheetToolboxTextInput({
insetTop,
backdropComponent,
onSnapChange,
onClose,
sheetStyle,
children,
additionalIsReady: outerAdditionalIsReady,
multiline = false,
ref,
keyboardAwareSafeAreaBottomInsetFallback = 0,
...textInputProps
}) {
const {
onLayout: onTopInsetLayout,
height: topInsetSharedValue
} = (0, _reactNativeBottomSheetToolbox.useLayoutSharedValue)();
const minTextInputHeightSharedValue = (0, _reactNativeReanimated.useSharedValue)(null);
const bottomInsetSharedValue = (0, _reactNativeBottomSheetToolbox.useKeyboardAwareSafeAreaBottomInset)(keyboardAwareSafeAreaBottomInsetFallback);
const minSnapPoint = (0, _reactNativeReanimated.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 = (0, _reactNativeReanimated.useDerivedValue)(() => {
const outerReadyAbsolute = outerAdditionalIsReady === undefined || (typeof outerAdditionalIsReady === "boolean" ? outerAdditionalIsReady : outerAdditionalIsReady.get());
return outerReadyAbsolute && minSnapPoint.get() !== null;
}, [outerAdditionalIsReady]);
const snapPoints = React.useMemo(() => multiline ? [_reactNativeBottomSheetToolbox.CLOSED_SNAP_POINT, minSnapPoint, "100%"] : [_reactNativeBottomSheetToolbox.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__*/(0, _jsxRuntime.jsx)(_reactNativeBottomSheetToolbox.BottomSheetToolbox, {
ref: bottomSheetRef,
snapPoints: snapPoints,
initialSnapPointIndex: 1,
backdropComponent: backdropComponent,
overlayComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeBottomSheetToolbox.BottomSheetDragGesture, {
id: "text-input",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayTextInputContainer.OverlayTextInputContainer, {
keyboardAwareSafeAreaBottomInsetFallback: keyboardAwareSafeAreaBottomInsetFallback,
minTextInputHeightSharedValue: minTextInputHeightSharedValue,
topInsetSharedValue: topInsetSharedValue,
bottomInsetSharedValue: bottomInsetSharedValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayTextInput.OverlayTextInput, {
ref: textInputRef,
...textInputProps,
multiline: multiline,
topInsetSharedValue: topInsetSharedValue,
bottomInsetSharedValue: bottomInsetSharedValue,
minTextInputHeightSharedValue: minTextInputHeightSharedValue
})
})
}),
sheetStyle: sheetStyle,
additionalIsReady: additionalIsReady,
...(insetTop && {
insetTop
}),
...(onSnapChange && {
onSnapChange
}),
...(onClose && {
onClose
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
onLayout: onTopInsetLayout,
pointerEvents: "box-none",
children: children
})
});
}
BottomSheetToolboxTextInput.displayName = "BottomSheetToolboxTextInput";
//# sourceMappingURL=bottom-sheet-toolbox-text-input.js.map