@ozen-ui/kit
Version:
React component library
43 lines (42 loc) • 3.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Badge = exports.cnBadge = void 0;
var tslib_1 = require("tslib");
require("./Badge.css");
var react_1 = tslib_1.__importStar(require("react"));
var usePrevious_1 = require("../../hooks/usePrevious");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var constants_1 = require("./constants");
exports.cnBadge = (0, classname_1.cn)('Badge');
exports.Badge = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Badge' });
var _a = props.size, size = _a === void 0 ? constants_1.BADGE_DEFAULT_SIZE : _a, _b = props.as, Tag = _b === void 0 ? constants_1.BADGE_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? constants_1.BADGE_DEFAULT_VARIANT : _c, _d = props.color, color = _d === void 0 ? constants_1.BADGE_DEFAULT_COLOR : _d, _e = props.horizontalOrigin, horizontalOrigin = _e === void 0 ? constants_1.BADGE_DEFAULT_HORIZONTAL_ORIGIN : _e, _f = props.verticalOrigin, verticalOrigin = _f === void 0 ? constants_1.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 = tslib_1.__rest(props, ["size", "as", "variant", "color", "horizontalOrigin", "verticalOrigin", "children", "max", "content", "contentProps", "showZero", "invisible", "className"]);
var prevContentProp = (0, usePrevious_1.usePrevious)(contentProp);
var invisible = (0, react_1.useMemo)(function () {
if (contentProp === 0 && !showZero) {
return true;
}
return invisibleProp;
}, [invisibleProp, contentProp, showZero]);
var content = invisible ? prevContentProp : contentProp;
var displayedContent = (0, react_1.useMemo)(function () {
if (variant !== 'dot') {
return max && Number(content) > max ? "".concat(max, "+") : content;
}
return null;
}, [max, content, variant]);
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnBadge)({}, [className]) }, other, { ref: ref }),
children,
react_1.default.createElement("span", tslib_1.__assign({}, contentProps, { className: (0, exports.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)));
});
exports.Badge.displayName = 'Badge';