@ozen-ui/kit
Version:
React component library
40 lines (39 loc) • 2.77 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Badge.css';
import React, { useMemo } from 'react';
import { usePrevious } from '../../hooks/usePrevious';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { BADGE_DEFAULT_SIZE, BADGE_DEFAULT_TAG, BADGE_DEFAULT_VARIANT, BADGE_DEFAULT_COLOR, BADGE_DEFAULT_HORIZONTAL_ORIGIN, BADGE_DEFAULT_VERTICAL_ORIGIN, } from './constants';
export var cnBadge = cn('Badge');
export var Badge = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({ props: inProps, name: 'Badge' });
var _a = props.size, size = _a === void 0 ? BADGE_DEFAULT_SIZE : _a, _b = props.as, Tag = _b === void 0 ? BADGE_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? BADGE_DEFAULT_VARIANT : _c, _d = props.color, color = _d === void 0 ? BADGE_DEFAULT_COLOR : _d, _e = props.horizontalOrigin, horizontalOrigin = _e === void 0 ? BADGE_DEFAULT_HORIZONTAL_ORIGIN : _e, _f = props.verticalOrigin, verticalOrigin = _f === void 0 ? BADGE_DEFAULT_VERTICAL_ORIGIN : _f, children = props.children, max = props.max, contentProp = props.content, contentProps = props.contentProps, showZero = props.showZero, invisibleProp = props.invisible, className = props.className, other = __rest(props, ["size", "as", "variant", "color", "horizontalOrigin", "verticalOrigin", "children", "max", "content", "contentProps", "showZero", "invisible", "className"]);
var prevContentProp = usePrevious(contentProp);
var invisible = useMemo(function () {
if (contentProp === 0 && !showZero) {
return true;
}
return invisibleProp;
}, [invisibleProp, contentProp, showZero]);
var content = invisible ? prevContentProp : contentProp;
var displayedContent = useMemo(function () {
if (variant !== 'dot') {
return max && Number(content) > max ? "".concat(max, "+") : content;
}
return null;
}, [max, content, variant]);
return (React.createElement(Tag, __assign({ className: cnBadge({}, [className]) }, other, { ref: ref }),
children,
React.createElement("span", __assign({}, contentProps, { className: cnBadge('Content', {
variant: variant,
size: size,
color: color,
horizontalOrigin: !!children && horizontalOrigin,
verticalOrigin: !!children && verticalOrigin,
invisible: invisible,
onlyBadge: !children,
}, [contentProps === null || contentProps === void 0 ? void 0 : contentProps.className]) }), displayedContent)));
});
Badge.displayName = 'Badge';