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

Salesforce Lightning Design System components built with React

import React from 'react';
import classnames from 'classnames';
import { Icon } from './Icon';
import { Button } from './Button';
import { useEventCallback } from './hooks';

/**
 *
 */

/**
 *
 */
export var 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 = useEventCallback(function (e) {
    e.preventDefault();
    e.stopPropagation();
    onRemove === null || onRemove === void 0 || onRemove();
  });
  var onKeyDown = useEventCallback(function (e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      // Bacspace / DEL
      onPillRemove(e);
    }
  });
  var pillClassNames = classnames('slds-pill', {
    'slds-pill_link': !disabled
  }, {
    'slds-truncate': truncate
  }, className);
  return /*#__PURE__*/React.createElement("span", {
    ref: pillRef,
    className: pillClassNames,
    onKeyDown: onKeyDown,
    onClick: onClick
  }, icon && icon.icon ? /*#__PURE__*/React.createElement("span", {
    className: "slds-pill__icon_container"
  }, /*#__PURE__*/React.createElement(Icon, {
    category: icon.category,
    icon: icon.icon
  })) : undefined, disabled ? /*#__PURE__*/React.createElement("span", {
    className: "slds-pill__label",
    title: title
  }, label) : /*#__PURE__*/React.createElement("a", {
    className: "slds-pill__action",
    title: title
  }, /*#__PURE__*/React.createElement("span", {
    className: "slds-pill__label"
  }, label)), /*#__PURE__*/React.createElement(Button, {
    disabled: disabled,
    className: "slds-pill__remove",
    type: "icon",
    icon: "close",
    alt: "Remove",
    tabIndex: -1,
    onClick: onPillRemove
  }));
};
//# sourceMappingURL=Pill.js.map