@talend/react-components

Version:
Set of react components.
github.com/Talend/ui/tree/master/packages/components
171 lines (170 loc) • 4.87 kB
JavaScript
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _BadgeModule = _interopRequireDefault(require("./Badge.module.scss"));
var _theme = require("../theme");
var _BadgeComposition = _interopRequireDefault(require("./BadgeComposition"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_BadgeModule.default);
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__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
  children: [category && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.Category, {
    label: category
  }), category && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.Separator, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.Label, {
    aslink: aslink,
    category: category,
    label: label,
    children: icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.Icon, {
      name: icon
    })
  }), icon && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.Separator, {
    iconSeparator: true
  }), dropdown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.Dropdown, {
    id: id,
    props: dropdown
  }), onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeComposition.default.DeleteAction, {
    id: id,
    onClick: onDelete,
    disabled: disabled
  })]
});
DefaultBadge.propTypes = {
  aslink: _propTypes.default.bool,
  category: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  icon: _propTypes.default.string,
  id: _propTypes.default.string,
  label: _propTypes.default.string,
  onDelete: _propTypes.default.func,
  dropdown: _propTypes.default.object
};
const BadgeType = ({
  disabled,
  onSelect,
  children,
  ...rest
}) => {
  if (onSelect) {
    return /*#__PURE__*/(0, _react.createElement)("button", {
      ...rest,
      key: "button",
      type: "button",
      disabled: disabled,
      onClick: onSelect
    }, children);
  }
  return /*#__PURE__*/(0, _react.createElement)("div", {
    ...rest,
    key: "div"
  }, children);
};
BadgeType.propTypes = {
  children: _propTypes.default.any,
  disabled: _propTypes.default.bool,
  onSelect: _propTypes.default.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__*/(0, _jsxRuntime.jsx)("div", {
    className: containerClasses,
    style: style,
    "data-test": dataTest,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeType, {
      ...badgeProps,
      disabled: disabled,
      onSelect: onSelect,
      children: !children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultBadge, {
        aslink: aslink,
        category: category,
        disabled: disabled,
        icon: icon,
        id: id,
        label: label,
        onDelete: onDelete,
        dropdown: dropdown
      }) : children
    })
  });
}
Badge.propTypes = {
  aslink: _propTypes.default.bool,
  category: _propTypes.default.string,
  children: _propTypes.default.any,
  className: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  display: _propTypes.default.oneOf(Object.values(SIZES)),
  icon: _propTypes.default.string,
  id: _propTypes.default.string,
  label: _propTypes.default.string,
  onDelete: _propTypes.default.func,
  onSelect: _propTypes.default.func,
  selected: _propTypes.default.bool,
  style: _propTypes.default.object,
  white: _propTypes.default.bool,
  type: _propTypes.default.oneOf(Object.values(TYPES)),
  dropdown: _propTypes.default.object,
  dataTest: _propTypes.default.string
};
Badge.displayName = 'Badge';
Badge.SIZES = SIZES;
Badge.TYPES = TYPES;
var _default = exports.default = Badge;
//# sourceMappingURL=Badge.component.js.map