@attio/react-native-bottom-sheet-toolbox
Version:
152 lines (148 loc) • 6.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheetToolboxBackdropProvider = BottomSheetToolboxBackdropProvider;
exports.BottomSheetToolboxDefaultBackdrop = BottomSheetToolboxDefaultBackdrop;
exports.NewBottomSheetToolboxBackdropProvider = NewBottomSheetToolboxBackdropProvider;
exports.OldBottomSheetToolboxBackdropProvider = OldBottomSheetToolboxBackdropProvider;
exports.useBottomSheetToolboxBackdropContext = useBottomSheetToolboxBackdropContext;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _context = require("../context");
var _hooks = require("../hooks");
var _utils = require("../utils");
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); }
/**
* We want the bottom sheet's opacity to persist across new mounts.
* However, we want to avoid polluting the internal context.
*/
const BottomSheetToolboxBackdropContext = /*#__PURE__*/React.createContext(undefined);
function NewBottomSheetToolboxBackdropProvider({
children,
hide = false
}) {
const opacitySharedValue = (0, _reactNativeReanimated.useSharedValue)(0);
const contextValue = React.useMemo(() => ({
opacitySharedValue,
hide
}), [hide]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetToolboxBackdropContext.Provider, {
value: contextValue,
children: children
});
}
function OldBottomSheetToolboxBackdropProvider({
children,
inheritHide,
hide = false
}) {
const backdropContext = React.useContext(BottomSheetToolboxBackdropContext);
if (!backdropContext) throw new Error("BottomSheetToolboxBackdropProvider not found.");
const {
opacitySharedValue,
hide: ancestorHide
} = backdropContext;
const contextValue = React.useMemo(() => ({
opacitySharedValue,
hide: hide || ancestorHide && inheritHide
}), [ancestorHide, hide, inheritHide, opacitySharedValue]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetToolboxBackdropContext.Provider, {
value: contextValue,
children: children
});
}
function BottomSheetToolboxBackdropProvider({
children,
reset = false,
hide = false,
inheritHide = false
}) {
const inheritedContext = React.useContext(BottomSheetToolboxBackdropContext);
return inheritedContext !== undefined && !reset ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OldBottomSheetToolboxBackdropProvider, {
hide: hide,
inheritHide: inheritHide,
children: children
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NewBottomSheetToolboxBackdropProvider, {
hide: hide,
children: children
});
}
/**
* Retrieve the bottom sheet internal context, and throw if unavailable.
*/
function useBottomSheetToolboxBackdropContext() {
const context = React.useContext(BottomSheetToolboxBackdropContext);
if (!context) {
throw new Error("BottomSheetToolboxBackdropProvider not found.");
}
return context;
}
function BottomSheetToolboxDefaultBackdrop({
maxOpacity = 0.7,
color = "#000000",
children,
maxOpacityPoint,
maxOpacitySnapIndex
}) {
const {
close
} = (0, _hooks.useBottomSheetActions)("BottomSheetToolboxDefaultBackdrop");
const {
currentPositionSharedValue,
normalizedSnapPointsSharedValue,
childrenHeightSharedValue,
wrapperHeightSharedValue,
footerHeightSharedValue
} = (0, _context.useBottomSheetToolboxInternalContext)();
const {
opacitySharedValue,
hide
} = useBottomSheetToolboxBackdropContext();
(0, _reactNativeReanimated.useAnimatedReaction)(() => ({
currentPosition: currentPositionSharedValue.get(),
snapPoints: normalizedSnapPointsSharedValue.get()
}), ({
snapPoints,
currentPosition
}) => {
if (hide) return;
const maxOpacityPosition = maxOpacityPoint ? (0, _utils.normalizeSheetPosition)({
sheetPosition: maxOpacityPoint,
childrenHeightSharedValue,
wrapperHeightSharedValue,
footerHeightSharedValue
}) : null;
const maxOpacitySnapIndexPosition = maxOpacitySnapIndex && snapPoints && maxOpacitySnapIndex in snapPoints ? snapPoints[maxOpacitySnapIndex] : null;
const maxPosition = (maxOpacityPosition || maxOpacitySnapIndexPosition || snapPoints?.find(point => point !== _utils.CLOSED_SNAP_POINT)) ?? _utils.CLOSED_SNAP_POINT;
const openRatio = maxPosition === 0 ? 0 : currentPosition / maxPosition;
const opacity = (0, _reactNativeReanimated.interpolate)(openRatio, [0, 1], [0, maxOpacity], _reactNativeReanimated.Extrapolate.CLAMP);
// The snap-points, position, and maxOpacity can make notable instant
// changes. We don't want the backdrop to appear glitchy when this happens.
opacitySharedValue.set((0, _reactNativeReanimated.withSpring)(opacity, {
stiffness: 200,
mass: 0.2
}));
}, [currentPositionSharedValue, normalizedSnapPointsSharedValue]);
const animatedBackdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
opacity: opacitySharedValue.get(),
backgroundColor: color
}), [color, opacitySharedValue]);
const handleClose = React.useCallback(() => {
_reactNative.Keyboard.isVisible() && _reactNative.Keyboard.dismiss();
close();
}, [close]);
return hide ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
onPress: handleClose,
style: _reactNative.StyleSheet.absoluteFill,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [_reactNative.StyleSheet.absoluteFill, animatedBackdropStyle],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: children
})
})
});
}
//# sourceMappingURL=bottom-sheet-toolbox-default-backdrop.js.map