react-bootstrap-typeahead/es/components/Token/Token.js

React typeahead with Bootstrap styling

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["active", "children", "className", "onRemove", "tabIndex"],
    _excluded2 = ["children", "option", "readOnly"],
    _excluded3 = ["ref"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import cx from 'classnames';
import React, { forwardRef } from 'react';
import ClearButton from '../ClearButton';
import { useToken } from '../../behaviors/token';
import { isFunction } from '../../utils';
var InteractiveToken = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var active = _ref.active,
      children = _ref.children,
      className = _ref.className,
      onRemove = _ref.onRemove,
      tabIndex = _ref.tabIndex,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: cx('rbt-token', 'rbt-token-removeable', {
      'rbt-token-active': !!active
    }, className),
    ref: ref,
    tabIndex: tabIndex || 0
  }), children, /*#__PURE__*/React.createElement(ClearButton, {
    className: "rbt-token-remove-button",
    label: "Remove",
    onClick: onRemove,
    tabIndex: -1
  }));
});

var StaticToken = function StaticToken(_ref2) {
  var children = _ref2.children,
      className = _ref2.className,
      disabled = _ref2.disabled,
      href = _ref2.href;
  var classnames = cx('rbt-token', {
    'rbt-token-disabled': disabled
  }, className);

  if (href && !disabled) {
    return /*#__PURE__*/React.createElement("a", {
      className: classnames,
      href: href
    }, children);
  }

  return /*#__PURE__*/React.createElement("div", {
    className: classnames
  }, children);
};

/**
 * Individual token component, generally displayed within the
 * `TypeaheadInputMulti` component, but can also be rendered on its own.
 */
var Token = function Token(_ref3) {
  var children = _ref3.children,
      option = _ref3.option,
      readOnly = _ref3.readOnly,
      props = _objectWithoutProperties(_ref3, _excluded2);

  var _useToken = useToken(_objectSpread(_objectSpread({}, props), {}, {
    option: option
  })),
      ref = _useToken.ref,
      tokenProps = _objectWithoutProperties(_useToken, _excluded3);

  var child = /*#__PURE__*/React.createElement("div", {
    className: "rbt-token-label"
  }, children);
  return !props.disabled && !readOnly && isFunction(tokenProps.onRemove) ? /*#__PURE__*/React.createElement(InteractiveToken, _extends({}, props, tokenProps, {
    ref: ref
  }), child) : /*#__PURE__*/React.createElement(StaticToken, props, child);
};

export default Token;