@dnb/eufemia/cjs/components/badge/Badge.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultProps = exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _SpacingHelper = require("../space/SpacingHelper.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _useNumberFormat = _interopRequireDefault(require("../number-format/useNumberFormat.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const defaultProps = exports.defaultProps = {
  label: null,
  className: null,
  skeleton: false,
  children: null,
  content: null,
  vertical: null,
  horizontal: null,
  variant: 'information',
  status: 'default',
  subtle: false,
  hideBadge: false
};
function Badge(localProps) {
  const context = _react.default.useContext(_Context.default);
  const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Badge, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const {
    children,
    className
  } = allProps;
  const spacingClasses = (0, _SpacingHelper.createSpacingClasses)(allProps);
  if (children) {
    return _react.default.createElement(BadgeRoot, {
      className: (0, _classnames.default)(spacingClasses)
    }, children, _react.default.createElement(BadgeElem, _extends({
      context: context
    }, allProps, {
      className: className
    })));
  }
  return _react.default.createElement(BadgeElem, _extends({
    context: context
  }, allProps, {
    className: (0, _classnames.default)(spacingClasses, className)
  }));
}
function BadgeRoot({
  children,
  className
}) {
  return _react.default.createElement("span", {
    className: (0, _classnames.default)('dnb-badge__root', className)
  }, children);
}
function propGuard(fn) {
  return props => {
    if (props.variant !== 'information') {
      return fn({
        ...props,
        subtle: defaultProps.subtle,
        status: defaultProps.status
      });
    }
    return fn(props);
  };
}
const BadgeElem = propGuard(props => {
  const {
    label,
    className,
    children,
    skeleton,
    horizontal,
    vertical,
    content: contentProp,
    variant,
    status,
    subtle,
    hideBadge,
    context,
    ...restProps
  } = props;
  if (hideBadge) {
    return null;
  }
  (0, _componentHelper.validateDOMAttributes)(props, restProps);
  const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context);
  const contentIsNum = typeof contentProp === 'number';
  const num = (0, _useNumberFormat.default)(contentIsNum ? contentProp : 0);
  const variantIsNotification = variant === 'notification';
  const content = variantIsNotification && contentIsNum ? num : contentProp;
  if (!label && contentIsNum) {
    (0, _componentHelper.warn)(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
  }
  const isInline = !children && content;
  return _react.default.createElement("span", _extends({
    role: "status",
    className: (0, _classnames.default)('dnb-badge', skeletonClasses, className, variant !== 'content' && `dnb-badge--variant-${variant}`, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline', variant === 'information' && `dnb-badge--status-${status}${subtle ? ` dnb-badge--subtle` : ''}`)
  }, restProps), label && _react.default.createElement("span", {
    className: "dnb-sr-only"
  }, label, " "), content);
});
Badge._supportsSpacingProps = true;
var _default = exports.default = Badge;
//# sourceMappingURL=Badge.js.map