chayns-components/lib/react-chayns-badge/component/Badge.js

A set of beautiful React components for developing chayns® applications.

import _extends from "@babel/runtime/helpers/extends";
/**
 * @component
 */

import classNames from 'clsx';
import PropTypes from 'prop-types';
import React, { forwardRef, useCallback, useState } from 'react';

/**
 * Badges are small, circular containers used to decorate other components with
 * glancable information.
 */
const Badge = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    className,
    style,
    badgeRef,
    ...other
  } = _ref;
  const [minWidth, setMinWidth] = useState();
  const measureRef = useCallback(node => {
    if (node) {
      setMinWidth(node.getBoundingClientRect().height);
    }
  }, []);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: classNames(className, 'badge'),
    ref: node => {
      measureRef(node);
      if (ref) {
        ref(node);
      }
      if (badgeRef) {
        badgeRef(node);
      }
    },
    style: {
      minWidth,
      ...style
    }
  }, other), children);
});
export default Badge;
Badge.propTypes = {
  /**
   * A React node that is displayed inside of the Badge.
   */
  children: PropTypes.node.isRequired,
  /**
   * A classname that is applied to the Badge `<div>`-element.
   */
  className: PropTypes.string,
  /**
   * A React style object that will be applied to the Badge `<div>`-element.
   */
  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  /**
   * Retrieves the ref to the Badge `<div>`-element.
   */
  badgeRef: PropTypes.func
};
Badge.displayName = 'Badge';
//# sourceMappingURL=Badge.js.map