@attio/react-native-bottom-sheet-toolbox-stack
Version:
115 lines (112 loc) • 4.66 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheetToolboxStackSheetAutoProvider = BottomSheetToolboxStackSheetAutoProvider;
var _nanoid = require("nanoid");
var React = _interopRequireWildcard(require("react"));
var _reactMergeRefs = require("react-merge-refs");
var _bottomSheetToolboxStackSheet = require("./bottom-sheet-toolbox-stack-sheet");
var _bottomSheetToolboxStackContext = require("./context/bottom-sheet-toolbox-stack-context");
var _useBottomSheetToolboxStackSheet = require("./use-bottom-sheet-toolbox-stack-sheet");
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 BottomSheetToolboxStackSheetAutoProviderDynamicSheet({
ref,
onClose,
children,
openSheetOnMount
}) {
const [sheetId] = React.useState(() => (0, _nanoid.nanoid)());
const {
wrapperProps,
sheetProps
} = (0, _useBottomSheetToolboxStackSheet.useBottomSheetToolboxStackSheet)(sheetId);
const mergedRefs = (0, _reactMergeRefs.useMergeRefs)([ref, sheetProps.ref]);
const innerSheetProps = React.useMemo(() => {
const {
ref: _ref,
onClose: sheetPropsOnClose,
...rest
} = sheetProps;
return {
...rest,
sheetRef: mergedRefs,
onClose: () => {
sheetPropsOnClose();
}
};
}, [sheetProps, mergedRefs]);
const stack = (0, _bottomSheetToolboxStackContext.useBottomSheetToolboxStackContext)();
const onMountFn = () => {
if (openSheetOnMount) {
stack.push(sheetId);
}
};
const onMountRef = React.useRef(onMountFn);
onMountRef.current = onMountFn;
const unmountFn = () => {
stack.notifyClosed(sheetId);
};
const onUnmountRef = React.useRef(unmountFn);
onUnmountRef.current = unmountFn;
React.useLayoutEffect(() => {
onMountRef.current();
return () => onUnmountRef.current();
}, []);
const isInStack = stack.sheetStack.some(sheet => sheet === sheetId);
const wasInStackRef = React.useRef(false);
React.useEffect(() => {
wasInStackRef.current = isInStack;
}, [isInStack]);
const wasInStack = wasInStackRef.current;
const stableOnCloseRef = React.useRef(onClose);
React.useEffect(() => {
stableOnCloseRef.current = onClose;
}, [onClose]);
React.useEffect(() => {
if (!isInStack && wasInStack) {
stableOnCloseRef.current?.();
}
}, [isInStack, wasInStack]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheetToolboxStackSheet.BottomSheetToolboxStackSheet, {
...wrapperProps,
children: children(innerSheetProps)
});
}
function BottomSheetToolboxStackSheetAutoProviderInjectProvider({
onClose,
...rest
}) {
const ref = React.useRef(null);
const innerOnClose = React.useCallback(() => {
ref.current?.close();
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheetToolboxStackContext.BottomSheetToolboxStackProvider, {
ref: ref,
initialSheetName: null,
...(onClose && {
onClose
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetToolboxStackSheetAutoProviderDynamicSheet, {
...rest,
onClose: innerOnClose
})
});
}
/**
* A higher-order component that provides automatic stack context handling for bottom sheets.
* If rendered within an existing BottomSheetToolboxStack context, it will integrate with that stack.
* If no stack context exists, it will create a new BottomSheetToolboxStack context to manage the sheet.
* This allows bottom sheets to work seamlessly both standalone and as part of a larger sheet stack, allowing for
* more composable components.
*/
function BottomSheetToolboxStackSheetAutoProvider(props) {
const isStackContext = (0, _bottomSheetToolboxStackContext.useIsBottomSheetToolboxStackContext)();
return isStackContext ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetToolboxStackSheetAutoProviderDynamicSheet, {
...props
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetToolboxStackSheetAutoProviderInjectProvider, {
...props
});
}
//# sourceMappingURL=bottom-sheet-toolbox-stack-sheet-auto-provider.component.js.map