@razorpay/blade
Version:
The Design System that powers Razorpay
89 lines (86 loc) • 2.87 kB
JavaScript
import React__default from 'react';
import { PopoverContentWrapper } from './PopoverContentWrapper.web.js';
import { PopoverCloseButton } from './PopoverCloseButton.js';
import { usePopoverContext } from './PopoverContext.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../../utils/index.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { Text } from '../Typography/Text/Text.js';
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
var PopoverHeader = function PopoverHeader(_ref) {
var title = _ref.title,
titleLeading = _ref.titleLeading;
var _usePopoverContext = usePopoverContext(),
titleId = _usePopoverContext.titleId;
var isFloating = !(title || titleLeading);
if (isFloating) {
return /*#__PURE__*/jsx(BaseBox, {
borderRadius: "max",
position: "absolute",
padding: "spacing.2",
top: "spacing.2",
right: "spacing.2",
zIndex: 1,
children: /*#__PURE__*/jsx(PopoverCloseButton, {})
});
}
return /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
flexWrap: isReactNative() ? 'wrap' : 'nowrap',
alignItems: "center",
gap: "spacing.3",
children: [titleLeading ? /*#__PURE__*/React__default.cloneElement(titleLeading, {
size: 'large'
}) : null, title ? /*#__PURE__*/jsx(BaseBox, {
id: titleId,
paddingRight: "spacing.4",
children: /*#__PURE__*/jsx(Text, {
size: "large",
weight: "semibold",
children: title
})
}) : null, /*#__PURE__*/jsx(BaseBox, {
marginLeft: "auto",
children: /*#__PURE__*/jsx(PopoverCloseButton, {})
})]
});
};
var PopoverContent = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
var children = _ref2.children,
title = _ref2.title,
titleLeading = _ref2.titleLeading,
footer = _ref2.footer,
arrow = _ref2.arrow,
side = _ref2.side,
style = _ref2.style,
isVisible = _ref2.isVisible;
var isMobile = useIsMobile();
return /*#__PURE__*/jsxs(PopoverContentWrapper, {
ref: ref,
styles: style,
side: side,
isVisible: isVisible,
isMobile: isMobile,
children: [/*#__PURE__*/jsxs(BaseBox, {
padding: "spacing.4",
display: "flex",
flexDirection: "column",
gap: "spacing.4",
children: [/*#__PURE__*/jsx(PopoverHeader, {
title: title,
titleLeading: titleLeading
}), /*#__PURE__*/jsx(BaseBox, {
children: children
}), footer ? /*#__PURE__*/jsx(BaseBox, {
children: footer
}) : null]
}), arrow]
});
});
export { PopoverContent };
//# sourceMappingURL=PopoverContent.js.map