@salesforce/design-system-react/module/components/utilities/pill/index.js

Salesforce Lightning Design System for React

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

/**
 * This Pill component should be used within a listbox and differs from the standalone Pill component which is typically used for actions (such as a link) and not form fields. This component should be used in conjuction with `PillContainer`.
 */
import React from 'react';
import PropTypes from 'prop-types';
import assign from 'lodash.assign';
import KEYS from '../../../utilities/key-code';
import mapKeyEventCallbacks from '../../../utilities/key-callbacks';
import EventUtil from '../../../utilities/event';
import SLDSPill from '../../../components/pill';
var propTypes = {
  /**
   * Pill is the actively focused pill within a pill container. This will request focus on the DOM node.
   */
  active: PropTypes.bool,

  /**
   * **Assistive text for accessibility**
   * This object is merged with the default props object on every render.
   * * `pressDeleteOrBackspace`: Informs user of keyboard keys to press in order to remove a pill
   */
  assistiveText: PropTypes.shape({
    remove: PropTypes.string
  }),

  /**
   * SLDSAvatar component to show on the left of the pill.
   * _Tested with Mocha framework._
   */
  avatar: PropTypes.element,

  /**
   * Applies the bare style to the component.
   * _Tested with Mocha framework._
   */
  bare: PropTypes.bool,

  /*
   * Pills are often used for selection of a type of entity such as days in a daypicker. This prop allows you to pass in data that will be passed back to the event handler.
   */
  eventData: PropTypes.object,

  /*
   * Callbacks for various pill events such as click, focus, etc
   */
  events: PropTypes.shape({
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    onRequestFocus: PropTypes.func.isRequired,
    onRequestFocusOnNextPill: PropTypes.func.isRequired,
    onRequestFocusOnPreviousPill: PropTypes.func.isRequired,
    onRequestRemove: PropTypes.func.isRequired
  }),

  /**
   * Applies the error style to the component.
   * _Tested with Mocha framework._
   */
  hasError: PropTypes.bool,

  /*
   * The icon next to the pill label.
   */
  icon: PropTypes.element,

  /*
   * Pill Label
   */
  labels: PropTypes.shape({
    label: PropTypes.string.isRequired,
    removeTitle: PropTypes.string
  }),

  /*
   * If true and is active pill in listbox, will trigger `events.onRequestFocus`
   */
  requestFocus: PropTypes.bool,

  /*
   * Pill Title
   */
  title: PropTypes.string,

  /*
   * Allows the user to tab to the node
   */
  tabIndex: PropTypes.number
};
var defaultProps = {
  assistiveText: PropTypes.shape({
    remove: ', Press delete or backspace to remove'
  }),
  labels: {
    remove: 'Remove'
  },
  events: {}
};

var handleKeyDown = function handleKeyDown(event, _ref) {
  var _callbacks;

  var events = _ref.events,
      data = _ref.data;
  // Helper function that takes an object literal of callbacks that are triggered with a key event
  mapKeyEventCallbacks(event, {
    callbacks: (_callbacks = {}, _defineProperty(_callbacks, KEYS.BACKSPACE, {
      callback: events.onRequestRemove,
      data: data
    }), _defineProperty(_callbacks, KEYS.DELETE, {
      callback: events.onRequestRemove,
      data: data
    }), _defineProperty(_callbacks, KEYS.LEFT, {
      callback: events.onRequestFocusOnPreviousPill,
      data: _objectSpread(_objectSpread({}, data), {}, {
        direction: 'previous'
      })
    }), _defineProperty(_callbacks, KEYS.RIGHT, {
      callback: events.onRequestFocusOnNextPill,
      data: _objectSpread(_objectSpread({}, data), {}, {
        direction: 'next'
      })
    }), _callbacks)
  });
};

var handleClickRemove = function handleClickRemove(event, _ref2) {
  var events = _ref2.events,
      data = _ref2.data;
  EventUtil.trap(event);
  events.onRequestRemove(event, data);
};

var Pill = function Pill(_ref3) {
  var _ref3$assistiveText = _ref3.assistiveText,
      assistiveText = _ref3$assistiveText === void 0 ? defaultProps.assistiveText : _ref3$assistiveText,
      _ref3$labels = _ref3.labels,
      labels = _ref3$labels === void 0 ? defaultProps.labels : _ref3$labels,
      _ref3$events = _ref3.events,
      events = _ref3$events === void 0 ? defaultProps.events : _ref3$events,
      avatar = _ref3.avatar,
      bare = _ref3.bare,
      hasError = _ref3.hasError,
      tabIndex = _ref3.tabIndex,
      icon = _ref3.icon,
      eventData = _ref3.eventData,
      requestFocus = _ref3.requestFocus,
      active = _ref3.active;
  var mergedAssistiveText = assign({}, defaultProps.assistiveText, assistiveText);
  var mergedLabels = assign({}, defaultProps.labels, labels);
  return /*#__PURE__*/React.createElement(SLDSPill, {
    avatar: avatar,
    bare: bare,
    hasError: hasError,
    tabIndex: tabIndex || '0',
    icon: icon,
    variant: "option",
    labels: mergedLabels,
    assistiveText: {
      remove: mergedAssistiveText.remove
    },
    "aria-selected": "true",
    onBlur: events.onBlur,
    onClick: typeof events.onClick === 'function' ? function (event) {
      if (events.onClick) {
        events.onClick(event, _objectSpread({}, eventData));
      }
    } : null,
    onFocus: function onFocus(event) {
      if (events.onFocus) {
        events.onFocus(event, _objectSpread({}, eventData));
      }
    },
    onRemove: function onRemove(event) {
      EventUtil.trap(event);
      handleClickRemove(event, {
        events: events,
        data: eventData
      });
    },
    onKeyDown: function onKeyDown(event) {
      handleKeyDown(event, {
        events: events,
        data: eventData
      });
    },
    ref: function ref(component) {
      if (requestFocus && active) {
        events.onRequestFocus(undefined, {
          ref: component
        });
      }
    }
  });
};

Pill.displayName = 'Pill';
Pill.propTypes = propTypes;
export default Pill;
//# sourceMappingURL=index.js.map