UNPKG

@kubit-ui-web/react-components

Version:

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

49 lines 1.9 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.Badge = exports.BadgeUnControlled = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const react_1 = __importDefault(require("react")); const badgeControlled_1 = require("./badgeControlled"); const BadgeUnControlledComponent = ({ hasDot = true, ...props }, ref) => { const [open, setOpen] = react_1.default.useState(false); const onClick = event => { setOpen(!open); if (!open) { props.onClick?.(event); } }; const handleOnPopoverCloseInternally = () => { setOpen(false); }; const handleOnBadgeBlur = event => { if (!event.currentTarget.contains(event.relatedTarget)) { setOpen(false); } }; return ((0, jsx_runtime_1.jsx)(badgeControlled_1.BadgeControlled, { ...props, ref: ref, hasDot: hasDot, open: open, popover: { ...props.popover, onCloseInternally: () => { props.popover.onCloseInternally?.(); handleOnPopoverCloseInternally(); }, }, onBadgeBlur: handleOnBadgeBlur, onClick: onClick })); }; /** * @deprecated Try the new BadgeV2 component * * @description * Badge component is a component that shows a badge with a number or a dot. * @param {React.PropsWithChildren<IBadgeUnControlled<V>>} props * @returns {JSX.Element} * @example * <BadgeUnControlled /> * <BadgeUnControlled variant="primary" /> * <BadgeUnControlled variant="primary" size="small" /> */ const BadgeUnControlled = react_1.default.forwardRef(BadgeUnControlledComponent); exports.BadgeUnControlled = BadgeUnControlled; exports.Badge = BadgeUnControlled; //# sourceMappingURL=badgeUnControlled.js.map