@ozen-ui/kit
Version:
React component library
27 lines (26 loc) • 2.5 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import './BottomSheetBase.css';
import React, { forwardRef, useState } from 'react';
import { useLockBodyScroll } from '../../hooks/useLockBodyScroll';
import { usePortalContainer } from '../../hooks/usePortalContainer';
import { BottomSheetBaseLayout } from './components';
import { BOTTOM_SHEET_BASE_CLOSABLE, BOTTOM_SHEET_BASE_DISABLE_SCROLL_LOCK, BOTTOM_SHEET_BASE_HIDE_BACKDROP, BOTTOM_SHEET_BASE_PORTAL_CONTAINER, } from './constants';
import { BottomSheetBaseContextProvider } from './context/BottomSheetBaseContextProvider';
import { useBottomSheetBaseVisibility } from './hooks';
import { BottomSheetBaseBackdrop } from './modules';
export var BottomSheetBase = forwardRef(function (_a, ref) {
var children = _a.children, snaps = _a.snaps, open = _a.open, maxHeight = _a.maxHeight, defaultSnap = _a.defaultSnap, _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, _c = _a.closable, closable = _c === void 0 ? BOTTOM_SHEET_BASE_CLOSABLE : _c, _d = _a.backdrop, backdrop = _d === void 0 ? React.createElement(BottomSheetBaseBackdrop, null) : _d, _e = _a.hideBackdrop, hideBackdrop = _e === void 0 ? BOTTOM_SHEET_BASE_HIDE_BACKDROP : _e, _f = _a.disableScrollLock, disableScrollLock = _f === void 0 ? BOTTOM_SHEET_BASE_DISABLE_SCROLL_LOCK : _f, bottomSheetClassName = _a.bottomSheetClassName, _g = _a.container, containerProp = _g === void 0 ? BOTTOM_SHEET_BASE_PORTAL_CONTAINER : _g, other = __rest(_a, ["children", "snaps", "open", "maxHeight", "defaultSnap", "onClose", "closable", "backdrop", "hideBackdrop", "disableScrollLock", "bottomSheetClassName", "container"]);
var _h = __read(useState(false), 2), isAnimating = _h[0], setIsAnimating = _h[1];
var isVisible = useBottomSheetBaseVisibility({
isAnimating: isAnimating,
isOpen: open,
});
useLockBodyScroll(open && !disableScrollLock);
var container = usePortalContainer(containerProp);
if (!isVisible || !container) {
return null;
}
return (React.createElement(BottomSheetBaseContextProvider, { snaps: snaps, onClose: onClose, defaultSnap: defaultSnap, maxHeight: maxHeight, isClosable: closable, isOpen: open, setIsAnimating: setIsAnimating },
React.createElement(BottomSheetBaseLayout, __assign({}, other, { ref: ref, backdrop: backdrop, container: container, hideBackdrop: hideBackdrop, bottomSheetClassName: bottomSheetClassName }), children)));
});
BottomSheetBase.displayName = 'BottomSheetBase';