@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
63 lines • 4.75 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BadgeStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const dot_1 = require("../../components/dot/dot");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const positions_1 = require("../../types/positions/positions");
const type_1 = require("../button/types/type");
//components
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const popoverControlled_1 = require("../popover/popoverControlled");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const badge_styled_1 = require("./badge.styled");
const BadgeStandAloneComponent = ({ dataTestId = 'badge', ...props }, ref) => {
const badgeButtonRef = react_1.default.useRef(null);
const [dotWidthHeight, setDotWidthHeight] = react_1.default.useState(null);
const id = (0, useId_1.useId)('badget');
const dotRef = react_1.default.useRef(null);
const popoverRef = react_1.default.useRef(null);
const containerRef = react_1.default.useRef(null);
// catch the reference when the popover appears
const callbackRef = react_1.default.useCallback(node => {
if (node) {
popoverRef.current = node;
}
}, []);
react_1.default.useEffect(() => {
if (dotRef && dotRef.current) {
setDotWidthHeight({
dotWidth: dotRef.current.offsetWidth,
dotHeight: dotRef.current.offsetHeight,
});
}
}, [props.dot?.size]);
react_1.default.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 ((0, jsx_runtime_1.jsxs)(badge_styled_1.BadgeContainerStyled, { ref: containerRef, "data-testid": `${dataTestId}-container`, onBlur: props.onBadgeBlur, children: [(0, jsx_runtime_1.jsxs)(badge_styled_1.BadgeStyled, { ref: badgeButtonRef, "aria-controls": `${id}-popover`, "aria-expanded": props.open, "aria-label": props['aria-label'], "data-testid": dataTestId, styles: props.styles, type: type_1.ButtonType.BUTTON, onClick: props.onClick, children: [(0, jsx_runtime_1.jsxs)(badge_styled_1.SpanContainerIconAndDot, { children: [props.hasDot && props.dot && ((0, jsx_runtime_1.jsx)(badge_styled_1.BadgeDotStyled, { "aria-hidden": true, customDotTranslate: getCustomDotTranslate(), dotWidthHeight: dotWidthHeight, children: (0, jsx_runtime_1.jsx)(dot_1.Dot, { ref: dotRef, ...props.dot }) })), (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: props.iconStyles?.iconColor, customIconStyles: props.sizeStyles.icon, ...props.icon })] }), props.label?.content && ((0, jsx_runtime_1.jsxs)(badge_styled_1.BadgeLabelStyled, { "aria-hidden": true, styles: props.styles, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { color: props.iconStyles?.labelFontColor, component: component_1.TextComponentType.SPAN, customTypography: labelStyles, dataTestId: `${dataTestId}-label`, ...props.label, children: props.label.content }), (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: props.iconStyles?.labelIconColor, customIconStyles: props.styles.labelIcon, rotate: props.open ? '180deg' : '0deg', ...props.labelIcon })] })), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { ariaLive: ariaLiveOption_1.AriaLiveOptionType.POLITE, children: props.ariaLiveText })] }), props.popover.variant && props.popover.content && ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { ref: callbackRef, align: positions_1.POSITIONS.BOTTOM_GAP_RIGHT, id: `${id}-popover`, open: props.open, preventCloseOnClickElements: [badgeButtonRef.current], tabIndex: 0, ...props.popover, children: props.popover?.content }))] }));
};
exports.BadgeStandAlone = react_1.default.forwardRef(BadgeStandAloneComponent);
//# sourceMappingURL=badgeStandAlone.js.map