@cbinsights/fds/lib/components/SmartInput/CustomSelectComponents/CenteredHighlightedText.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _classcat = _interopRequireDefault(require("classcat"));

var _match = _interopRequireDefault(require("autosuggest-highlight/match"));

var _parse = _interopRequireDefault(require("autosuggest-highlight/parse"));

var CenteredHighlightedText = function CenteredHighlightedText(_ref) {
  var _parts$, _parts$firstHighlight, _parts;

  var suggestion = _ref.suggestion,
      _ref$query = _ref.query,
      query = _ref$query === void 0 ? '' : _ref$query,
      children = _ref.children;
  if (!suggestion) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
  var matches = (0, _match.default)(suggestion, query, {
    findAllOccurrences: true
  });
  var parts = (0, _parse.default)(suggestion, matches);
  var firstHighlightIndex = parts.findIndex(function (part) {
    return part.highlight;
  });
  var leftText = firstHighlightIndex > 0 && ((_parts$ = parts[0]) === null || _parts$ === void 0 ? void 0 : _parts$.text);
  var centeredText = firstHighlightIndex >= 0 && ((_parts$firstHighlight = parts[firstHighlightIndex]) === null || _parts$firstHighlight === void 0 ? void 0 : _parts$firstHighlight.text);
  var rightText = firstHighlightIndex + 1 <= parts.length && ((_parts = parts[firstHighlightIndex + 1]) === null || _parts === void 0 ? void 0 : _parts.text);
  return /*#__PURE__*/_react.default.createElement("span", {
    className: "valign--center display--flex display--block",
    "data-testid": "smart-input-centered-highlighted-text"
  }, leftText && /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classcat.default)(['wrap--singleLine--truncate flexItem--shrink', 'searchItemLeftText', {
      'padding--right--xs': leftText[leftText.length - 1] === ' '
    }])
  }, /*#__PURE__*/_react.default.createElement("span", {
    dir: "ltr"
  }, leftText)), centeredText && /*#__PURE__*/_react.default.createElement("span", {
    className: "fontWeight--bold flexItem--shrink"
  }, centeredText), /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classcat.default)(['wrap--singleLine--truncate flexItem', {
      'padding--left--xs': rightText && rightText[0] === ' '
    }])
  }, parts.map(function (part, index) {
    if (index <= firstHighlightIndex) return null;
    return part.highlight ? /*#__PURE__*/_react.default.createElement("span", {
      key: String(index),
      className: "fontWeight--bold"
    }, part.text) : part.text;
  }), children));
};

var _default = CenteredHighlightedText;
exports.default = _default;