@talend/react-components/lib-esm/Badge/Badge.component.js

Set of react components.

import PropTypes from 'prop-types';
import { Fragment, createElement as _createElement } from 'react';
import badgeCssModule from './Badge.module.scss';
import { getTheme } from '../theme';
import BadgeLib from './BadgeComposition';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const theme = getTheme(badgeCssModule);
const SIZES = {
  large: 'large',
  small: 'small'
};
const TYPES = {
  VALID: 'valid',
  INVALID: 'invalid',
  EMPTY: 'empty',
  PATTERN: 'pattern',
  VALUE: 'value'
};
const DefaultBadge = ({
  aslink,
  category,
  disabled,
  icon,
  id,
  label,
  onDelete,
  dropdown
}) => /*#__PURE__*/_jsxs(Fragment, {
  children: [category && /*#__PURE__*/_jsx(BadgeLib.Category, {
    label: category
  }), category && /*#__PURE__*/_jsx(BadgeLib.Separator, {}), /*#__PURE__*/_jsx(BadgeLib.Label, {
    aslink: aslink,
    category: category,
    label: label,
    children: icon && /*#__PURE__*/_jsx(BadgeLib.Icon, {
      name: icon
    })
  }), icon && onDelete && /*#__PURE__*/_jsx(BadgeLib.Separator, {
    iconSeparator: true
  }), dropdown && /*#__PURE__*/_jsx(BadgeLib.Dropdown, {
    id: id,
    props: dropdown
  }), onDelete && /*#__PURE__*/_jsx(BadgeLib.DeleteAction, {
    id: id,
    onClick: onDelete,
    disabled: disabled
  })]
});
DefaultBadge.propTypes = {
  aslink: PropTypes.bool,
  category: PropTypes.string,
  disabled: PropTypes.bool,
  icon: PropTypes.string,
  id: PropTypes.string,
  label: PropTypes.string,
  onDelete: PropTypes.func,
  dropdown: PropTypes.object
};
const BadgeType = ({
  disabled,
  onSelect,
  children,
  ...rest
}) => {
  if (onSelect) {
    return /*#__PURE__*/_createElement("button", {
      ...rest,
      key: "button",
      type: "button",
      disabled: disabled,
      onClick: onSelect
    }, children);
  }
  return /*#__PURE__*/_createElement("div", {
    ...rest,
    key: "div"
  }, children);
};
BadgeType.propTypes = {
  children: PropTypes.any,
  disabled: PropTypes.bool,
  onSelect: PropTypes.func
};
function Badge({
  aslink,
  category,
  className,
  children,
  disabled = false,
  display = SIZES.large,
  icon,
  id,
  label,
  onDelete,
  onSelect,
  selected = false,
  style,
  white,
  type,
  dropdown,
  dataTest
}) {
  const displayClass = display === SIZES.small ? 'tc-badge-display-small' : 'tc-badge-display-large';
  const containerClasses = theme('tc-badge', displayClass, className, {
    'tc-badge-selected': selected,
    'tc-badge-disabled': disabled,
    'tc-badge-readonly': !onDelete,
    'tc-badge-aslink': aslink,
    'tc-badge-edit': onDelete && onSelect,
    [`tc-badge--${type}`]: !!type,
    'tc-badge-dropdown': dropdown
  });
  const badgeClasses = theme('tc-badge-button', {
    'tc-badge-white': white
  });
  const badgeProps = {
    id: id && `tc-badge-select-${id}`,
    className: badgeClasses
  };
  return /*#__PURE__*/_jsx("div", {
    className: containerClasses,
    style: style,
    "data-test": dataTest,
    children: /*#__PURE__*/_jsx(BadgeType, {
      ...badgeProps,
      disabled: disabled,
      onSelect: onSelect,
      children: !children ? /*#__PURE__*/_jsx(DefaultBadge, {
        aslink: aslink,
        category: category,
        disabled: disabled,
        icon: icon,
        id: id,
        label: label,
        onDelete: onDelete,
        dropdown: dropdown
      }) : children
    })
  });
}
Badge.propTypes = {
  aslink: PropTypes.bool,
  category: PropTypes.string,
  children: PropTypes.any,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  display: PropTypes.oneOf(Object.values(SIZES)),
  icon: PropTypes.string,
  id: PropTypes.string,
  label: PropTypes.string,
  onDelete: PropTypes.func,
  onSelect: PropTypes.func,
  selected: PropTypes.bool,
  style: PropTypes.object,
  white: PropTypes.bool,
  type: PropTypes.oneOf(Object.values(TYPES)),
  dropdown: PropTypes.object,
  dataTest: PropTypes.string
};
Badge.displayName = 'Badge';
Badge.SIZES = SIZES;
Badge.TYPES = TYPES;
export default Badge;
//# sourceMappingURL=Badge.component.js.map