react-lightning-design-system/lib/scripts/Pill.js

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pill = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Icon = require("./Icon");
var _Button = require("./Button");
var _hooks = require("./hooks");
/**
 *
 */

/**
 *
 */
var Pill = exports.Pill = function Pill(props) {
  var icon = props.icon,
    disabled = props.disabled,
    label = props.label,
    title = props.title,
    truncate = props.truncate,
    className = props.className,
    pillRef = props.pillRef,
    onClick = props.onClick,
    onRemove = props.onRemove;
  var onPillRemove = (0, _hooks.useEventCallback)(function (e) {
    e.preventDefault();
    e.stopPropagation();
    onRemove === null || onRemove === void 0 || onRemove();
  });
  var onKeyDown = (0, _hooks.useEventCallback)(function (e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      // Bacspace / DEL
      onPillRemove(e);
    }
  });
  var pillClassNames = (0, _classnames["default"])('slds-pill', {
    'slds-pill_link': !disabled
  }, {
    'slds-truncate': truncate
  }, className);
  return /*#__PURE__*/_react["default"].createElement("span", {
    ref: pillRef,
    className: pillClassNames,
    onKeyDown: onKeyDown,
    onClick: onClick
  }, icon && icon.icon ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-pill__icon_container"
  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
    category: icon.category,
    icon: icon.icon
  })) : undefined, disabled ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-pill__label",
    title: title
  }, label) : /*#__PURE__*/_react["default"].createElement("a", {
    className: "slds-pill__action",
    title: title
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-pill__label"
  }, label)), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    disabled: disabled,
    className: "slds-pill__remove",
    type: "icon",
    icon: "close",
    alt: "Remove",
    tabIndex: -1,
    onClick: onPillRemove
  }));
};
//# sourceMappingURL=Pill.js.map