@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
43 lines • 1.53 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { BadgeControlled } from './badgeControlled';
const BadgeUnControlledComponent = ({ hasDot = true, ...props }, ref) => {
const [open, setOpen] = React.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 (_jsx(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.forwardRef(BadgeUnControlledComponent);
export { BadgeUnControlled };
export { BadgeUnControlled as Badge };
//# sourceMappingURL=badgeUnControlled.js.map