@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
57 lines • 4.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Dot } from '../../components/dot/dot';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { AriaLiveOptionType } from '../../types/ariaLiveOption/ariaLiveOption';
import { POSITIONS } from '../../types/positions/positions';
import { ButtonType } from '../button/types/type';
//components
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { PopoverControlled as Popover } from '../popover/popoverControlled';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { BadgeContainerStyled, BadgeDotStyled, BadgeLabelStyled, BadgeStyled, SpanContainerIconAndDot, } from './badge.styled';
const BadgeStandAloneComponent = ({ dataTestId = 'badge', ...props }, ref) => {
const badgeButtonRef = React.useRef(null);
const [dotWidthHeight, setDotWidthHeight] = React.useState(null);
const id = useId('badget');
const dotRef = React.useRef(null);
const popoverRef = React.useRef(null);
const containerRef = React.useRef(null);
// catch the reference when the popover appears
const callbackRef = React.useCallback(node => {
if (node) {
popoverRef.current = node;
}
}, []);
React.useEffect(() => {
if (dotRef && dotRef.current) {
setDotWidthHeight({
dotWidth: dotRef.current.offsetWidth,
dotHeight: dotRef.current.offsetHeight,
});
}
}, [props.dot?.size]);
React.useImperativeHandle(ref, () => ({
get badge() {
return containerRef.current;
},
get popover() {
return popoverRef.current;
},
}));
const getCustomDotTranslate = () => {
if (props.customDotTranslate) {
return props.customDotTranslate;
}
if (props.sizeStyles.customDotNumberTranslate && props.dot?.number !== undefined) {
return props.sizeStyles.customDotNumberTranslate;
}
return props.sizeStyles.customDotTranslate;
};
const labelStyles = { ...props.styles.label, ...props.sizeStyles.label };
return (_jsxs(BadgeContainerStyled, { ref: containerRef, "data-testid": `${dataTestId}-container`, onBlur: props.onBadgeBlur, children: [_jsxs(BadgeStyled, { ref: badgeButtonRef, "aria-controls": `${id}-popover`, "aria-expanded": props.open, "aria-label": props['aria-label'], "data-testid": dataTestId, styles: props.styles, type: ButtonType.BUTTON, onClick: props.onClick, children: [_jsxs(SpanContainerIconAndDot, { children: [props.hasDot && props.dot && (_jsx(BadgeDotStyled, { "aria-hidden": true, customDotTranslate: getCustomDotTranslate(), dotWidthHeight: dotWidthHeight, children: _jsx(Dot, { ref: dotRef, ...props.dot }) })), _jsx(ElementOrIcon, { color: props.iconStyles?.iconColor, customIconStyles: props.sizeStyles.icon, ...props.icon })] }), props.label?.content && (_jsxs(BadgeLabelStyled, { "aria-hidden": true, styles: props.styles, children: [_jsx(Text, { color: props.iconStyles?.labelFontColor, component: TextComponentType.SPAN, customTypography: labelStyles, dataTestId: `${dataTestId}-label`, ...props.label, children: props.label.content }), _jsx(ElementOrIcon, { color: props.iconStyles?.labelIconColor, customIconStyles: props.styles.labelIcon, rotate: props.open ? '180deg' : '0deg', ...props.labelIcon })] })), _jsx(ScreenReaderOnly, { ariaLive: AriaLiveOptionType.POLITE, children: props.ariaLiveText })] }), props.popover.variant && props.popover.content && (_jsx(Popover, { ref: callbackRef, align: POSITIONS.BOTTOM_GAP_RIGHT, id: `${id}-popover`, open: props.open, preventCloseOnClickElements: [badgeButtonRef.current], tabIndex: 0, ...props.popover, children: props.popover?.content }))] }));
};
export const BadgeStandAlone = React.forwardRef(BadgeStandAloneComponent);
//# sourceMappingURL=badgeStandAlone.js.map