@razorpay/blade
Version:
The Design System that powers Razorpay
89 lines (86 loc) • 3.94 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { useBottomSheetContext } from './BottomSheetContext.js';
import '../Box/BaseBox/index.js';
import '../Button/IconButton/index.js';
import '../Icons/index.js';
import '../../utils/index.js';
import '../../tokens/global/index.js';
import '../../utils/makeSpace/index.js';
import '../../utils/makeSize/index.js';
import { jsx } from 'react/jsx-runtime';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { size } from '../../tokens/global/size.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { IconButton } from '../Button/IconButton/IconButton.js';
import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BottomSheetEmptyHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
var onClickCapture = _ref.onClickCapture,
onKeyDown = _ref.onKeyDown,
onKeyUp = _ref.onKeyUp,
onLostPointerCapture = _ref.onLostPointerCapture,
onPointerCancel = _ref.onPointerCancel,
onPointerDown = _ref.onPointerDown,
onPointerMove = _ref.onPointerMove,
onPointerUp = _ref.onPointerUp;
var _useBottomSheetContex = useBottomSheetContext(),
close = _useBottomSheetContex.close,
isHeaderFloating = _useBottomSheetContex.isHeaderFloating;
var webOnlyEventHandlers = isReactNative() ? {} : {
onClickCapture: onClickCapture,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onLostPointerCapture: onLostPointerCapture,
onPointerCancel: onPointerCancel,
onPointerDown: onPointerDown,
onPointerMove: onPointerMove,
onPointerUp: onPointerUp
};
var topOffset = isHeaderFloating ? 'spacing.5' : undefined;
if (isReactNative()) {
topOffset = 'spacing.0';
}
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
position: isHeaderFloating ? 'absolute' : 'relative'
// bottomsheet empty header suppose to be 28px in height
// the grab handle height is 20px & here we are adding 8px
// total = 28px
,
height: makeSize(size[8]),
touchAction: "none",
top: topOffset,
right: "spacing.0"
}, webOnlyEventHandlers), {}, {
children: /*#__PURE__*/jsx(BaseBox, {
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "absolute"
// the bottomsheet handle has a height of 16px + 4px padding
// we need to make put the close button at 16px from top so adjusting the 4px
// cannot use position=fixed because RN won't support it
,
top: isHeaderFloating ? 'spacing.0' : makeSpace(-size[4]),
right: "spacing.5",
width: makeSize(size[28]),
height: makeSize(size[28]),
flexShrink: 0,
backgroundColor: "popup.background.subtle",
borderRadius: "max",
zIndex: 100,
children: /*#__PURE__*/jsx(IconButton, {
ref: ref,
size: "large",
icon: CloseIcon,
accessibilityLabel: "Close",
onClick: close
})
})
}));
});
export { BottomSheetEmptyHeader };
//# sourceMappingURL=BottomSheetCommon.js.map