@attio/react-native-bottom-sheet-toolbox
Version:
110 lines (107 loc) • 5.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KeyboardProvider = KeyboardProvider;
exports.useKeyboardHeightSharedValue = useKeyboardHeightSharedValue;
exports.useKeyboardProgressSharedValue = useKeyboardProgressSharedValue;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = require("react-native-reanimated");
var _internalKeyboardContext = require("./internal-keyboard-context");
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); }
const KeyboardContext = /*#__PURE__*/React.createContext(null);
const FALLBACK_KEYBOARD_HEIGHT = _reactNative.Platform.select({
ios: 346,
android: 330,
default: 346
});
function useDeriveKeyboardProgressSharedValue(keyboardHeightSharedValue) {
// Keyboard metrics are not available on web, so we use a fallback.
const defaultKeyboardHeight = _reactNative.Keyboard.metrics?.()?.height || FALLBACK_KEYBOARD_HEIGHT;
const keyboardEndHeightSharedValue = (0, _reactNativeReanimated.useSharedValue)(defaultKeyboardHeight);
React.useEffect(() => {
const sub = _reactNative.Keyboard.addListener("keyboardWillChangeFrame", evt => {
keyboardEndHeightSharedValue.set(evt.endCoordinates.height);
});
return () => {
sub.remove();
};
}, []);
return (0, _reactNativeReanimated.useDerivedValue)(() => {
const keyboardEndHeight = keyboardEndHeightSharedValue.get();
if (keyboardEndHeight === 0) return 0;
return (0, _reactNativeReanimated.interpolate)(keyboardHeightSharedValue.get(), [0, keyboardEndHeight], [0, 1], _reactNativeReanimated.Extrapolation.CLAMP);
}, [keyboardHeightSharedValue]);
}
function useDeriveKeyboardHeightSharedValue(keyboardHeightSharedValue, keyboardProgressSharedValue) {
const additionalKeyboardHeightTotalSharedValue = (0, _internalKeyboardContext.useAdditionalKeyboardHeightTotal)();
return (0, _reactNativeReanimated.useDerivedValue)(() => {
const offset = additionalKeyboardHeightTotalSharedValue.get() * keyboardProgressSharedValue.get();
return keyboardHeightSharedValue.get() + offset;
}, [keyboardHeightSharedValue, keyboardProgressSharedValue, additionalKeyboardHeightTotalSharedValue.get]);
}
function WithInternalKeyboardProvider({
children,
keyboardHeightSharedValue: outerKeyboardHeightSharedValue,
keyboardProgressSharedValue: outerKeyboardProgressSharedValue
}) {
const keyboardProgressSharedValue = useDeriveKeyboardProgressSharedValue(outerKeyboardHeightSharedValue);
const keyboardHeightSharedValue = useDeriveKeyboardHeightSharedValue(outerKeyboardHeightSharedValue, outerKeyboardProgressSharedValue);
const value = React.useMemo(() => ({
keyboardHeightSharedValue,
keyboardProgressSharedValue
}), [keyboardHeightSharedValue, keyboardProgressSharedValue]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardContext.Provider, {
value: value,
children: children
});
}
/**
* Provides shared values representing the keyboard height and progress that
* various bottom sheet behaviors can hook into.
*
* This also support additional keyboard height, which is useful when implementing
* features such as keyboard toolbars.
*/
function KeyboardProvider({
children,
...rest
}) {
const animatedKeyboard = (0, _reactNativeReanimated.useAnimatedKeyboard)("animatedKeyboardOptions" in rest ? rest.animatedKeyboardOptions : undefined);
const innerKeyboardHeightSharedValue = animatedKeyboard.height;
const innerKeyboardProgressSharedValue = useDeriveKeyboardProgressSharedValue(innerKeyboardHeightSharedValue);
const hasKeyboardOverride = "keyboardHeightSharedValue" in rest && "keyboardProgressSharedValue" in rest;
const keyboardHeightSharedValue = hasKeyboardOverride ? rest.keyboardHeightSharedValue : innerKeyboardHeightSharedValue;
const keyboardProgressSharedValue = hasKeyboardOverride ? rest.keyboardProgressSharedValue : innerKeyboardProgressSharedValue;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internalKeyboardContext.InternalKeyboardProvider, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WithInternalKeyboardProvider, {
keyboardHeightSharedValue: keyboardHeightSharedValue,
keyboardProgressSharedValue: keyboardProgressSharedValue,
children: children
})
});
}
function useKeyboardContext() {
const context = React.useContext(KeyboardContext);
if (!context) {
throw new Error("KeyboardProvider not found.");
}
return context;
}
/**
* Returns a shared value representing the keyboard height plus any additional
* keyboard height.
*/
function useKeyboardHeightSharedValue() {
return useKeyboardContext().keyboardHeightSharedValue;
}
/**
* Returns a shared value, from 0 to 1, representing the keyboard's opening
* progress.
*/
function useKeyboardProgressSharedValue() {
return useKeyboardContext().keyboardProgressSharedValue;
}
//# sourceMappingURL=keyboard-context.js.map