react-bootstrap-typeahead/cjs/components/TypeaheadInputMulti/TypeaheadInputMulti.js

React typeahead with Bootstrap styling

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _Hint = _interopRequireDefault(require("../Hint"));
var _Input = _interopRequireDefault(require("../Input"));
var _utils = require("../../utils");
var _excluded = ["children", "className", "inputClassName", "inputRef", "referenceElementRef", "selected"];
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
function TypeaheadInputMulti(props) {
  var wrapperRef = _react["default"].useRef(null);
  var inputElem = _react["default"].useRef(null);
  var _propsWithBsClassName = (0, _utils.propsWithBsClassName)(props),
    children = _propsWithBsClassName.children,
    className = _propsWithBsClassName.className,
    inputClassName = _propsWithBsClassName.inputClassName,
    inputRef = _propsWithBsClassName.inputRef,
    referenceElementRef = _propsWithBsClassName.referenceElementRef,
    selected = _propsWithBsClassName.selected,
    rest = (0, _objectWithoutProperties2["default"])(_propsWithBsClassName, _excluded);
  function getInputRef(input) {
    inputElem.current = input;
    props.inputRef(input);
  }

  /**
   * Forward click or focus events on the container element to the input.
   */
  function handleContainerClickOrFocus(e) {
    // Don't focus the input if it's disabled.
    if (props.disabled) {
      e.currentTarget.blur();
      return;
    }
    var inputNode = inputElem.current;
    if (!inputNode ||
    // Ignore if the clicked element is a child of the container, ie: a token
    // or the input itself.
    e.currentTarget.contains(e.target) && e.currentTarget !== e.target) {
      return;
    }
    if ((0, _utils.isSelectable)(inputNode)) {
      // Move cursor to the end if the user clicks outside the actual input.
      inputNode.selectionStart = inputNode.value.length;
    }
    inputNode.focus();
  }
  function handleKeyDown(e) {
    if (e.key === 'Backspace' && selected.length && !props.value) {
      var _wrapperRef$current;
      // Prevent browser from going back.
      e.preventDefault();

      // If the input is selected and there is no text, focus the last
      // token when the user hits backspace.

      var wrapperChildren = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.children;
      if (wrapperChildren !== null && wrapperChildren !== void 0 && wrapperChildren.length) {
        var lastToken = wrapperChildren[wrapperChildren.length - 2];
        lastToken === null || lastToken === void 0 || lastToken.focus();
      }
    }
    props.onKeyDown && props.onKeyDown(e);
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])('rbt-input-multi', {
      disabled: props.disabled
    }, className),
    onClick: handleContainerClickOrFocus,
    onFocus: handleContainerClickOrFocus,
    ref: referenceElementRef,
    tabIndex: -1
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "rbt-input-wrapper",
    ref: wrapperRef
  }, children, /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, rest, {
    className: inputClassName,
    onKeyDown: handleKeyDown,
    ref: getInputRef,
    style: {
      backgroundColor: 'transparent',
      border: 0,
      boxShadow: 'none',
      cursor: 'inherit',
      outline: 'none',
      padding: 0,
      width: '100%',
      zIndex: 1
    }
  })))));
}
var _default = exports["default"] = TypeaheadInputMulti;