@ozen-ui/kit
Version:
React component library
25 lines (24 loc) • 1.42 kB
JavaScript
import { __assign, __rest } from "tslib";
import './BottomSheetBaseBackdrop.css';
import React, { useRef } from 'react';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { cn } from '../../../../utils/classname';
import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
import { Backdrop } from '../../../Backdrop';
import { useBottomSheetBaseDrag } from '../../hooks';
import { BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_EXPAND_ON_DRAG } from './constants';
export var cnBottomSheetBaseBackdrop = cn('BottomSheetBaseBackdrop');
export var BottomSheetBaseBackdrop = polymorphicComponentWithRef(function (_a, ref) {
var as = _a.as, _b = _a.expandOnDrag, expandOnDrag = _b === void 0 ? BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_EXPAND_ON_DRAG : _b, className = _a.className, other = __rest(_a, ["as", "expandOnDrag", "className"]);
var internalRef = useRef(null);
useBottomSheetBaseDrag(internalRef, {
isCloseOnTap: true,
isDraggable: expandOnDrag,
});
return (React.createElement(Backdrop, __assign({}, other, { ref: useMultiRef([ref, internalRef]), as: as, transitionProps: {
classNames: cnBottomSheetBaseBackdrop({ animation: true }),
}, open: true, className: cnBottomSheetBaseBackdrop({
draggable: expandOnDrag,
}, [className]) })));
});
BottomSheetBaseBackdrop.displayName = 'BottomSheetBaseBackdrop';