@cbinsights/fds/lib/components/SmartInput/CustomSelectComponents/DropdownOption.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _utils = require("../utils");

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

var _CenteredHighlightedText = _interopRequireDefault(require("./CenteredHighlightedText"));

var _HighlightedText = _interopRequireDefault(require("./HighlightedText"));

var _excluded = ["type"];

var DetailedDropdownOption = function DetailedDropdownOption(_ref) {
  var option = _ref.option,
      query = _ref.query,
      optionColor = _ref.optionColor,
      _ref$onOptionClick = _ref.onOptionClick,
      onOptionClick = _ref$onOptionClick === void 0 ? function () {} : _ref$onOptionClick;
  var boolean = option.boolean,
      category = option.category,
      _option$defaultType = option.defaultType,
      defaultType = _option$defaultType === void 0 ? '' : _option$defaultType,
      _option$extraInfo = option.extraInfo,
      extraInfo = _option$extraInfo === void 0 ? '' : _option$extraInfo,
      _option$text = option.text,
      text = _option$text === void 0 ? '' : _option$text,
      _option$alias = option.alias,
      alias = _option$alias === void 0 ? '' : _option$alias,
      isExpert = option.isExpert;

  var isTabDefaultType = _utils.SEARCH_TERM_TABS.includes(defaultType);

  var optionStyle = {
    color: optionColor
  };
  var suggestedText = alias ? "".concat(text, " (").concat(alias, ")") : text;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)(['smart-input-option display--flex', {
      'border--bottom': defaultType === _utils.SEARCH_TERM_RESEARCH
    }]),
    "data-testid": "smart-header-input-option",
    "data-sugg-type": category,
    style: optionStyle,
    title: text,
    onMouseDown: onOptionClick,
    role: "option"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: 'optionLeft'
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: 'searchItemType',
    "data-test": "cbi-type-search"
  }, (0, _utils.getItemType)(defaultType, isExpert))), /*#__PURE__*/_react.default.createElement("div", {
    className: 'optionRight'
  }, isTabDefaultType ? /*#__PURE__*/_react.default.createElement("span", {
    "data-testid": "keyword",
    className: "display--block wrap--singleLine--truncate span--100"
  }, "with keyword \"", /*#__PURE__*/_react.default.createElement("span", {
    className: "fontWeight--bold"
  }, text), "\"") : /*#__PURE__*/_react.default.createElement(_CenteredHighlightedText.default, {
    suggestion: suggestedText,
    query: query
  }, boolean && /*#__PURE__*/_react.default.createElement("span", {
    "data-testid": "boolean",
    className: 'bool'
  }, boolean), /*#__PURE__*/_react.default.createElement(_HighlightedText.default, {
    className: 'extra-info',
    suggestion: extraInfo,
    query: query
  }))));
};

var CondensedDropdownOption = function CondensedDropdownOption(_ref2) {
  var option = _ref2.option,
      query = _ref2.query,
      optionColor = _ref2.optionColor,
      _ref2$onOptionClick = _ref2.onOptionClick,
      onOptionClick = _ref2$onOptionClick === void 0 ? function () {} : _ref2$onOptionClick;
  var boolean = option.boolean,
      category = option.category,
      _option$extraInfo2 = option.extraInfo,
      extraInfo = _option$extraInfo2 === void 0 ? '' : _option$extraInfo2,
      _option$text2 = option.text,
      text = _option$text2 === void 0 ? '' : _option$text2,
      _option$alias2 = option.alias,
      alias = _option$alias2 === void 0 ? '' : _option$alias2,
      defaultType = option.defaultType,
      isExpert = option.isExpert;
  var optionStyle = {
    color: optionColor
  };
  var suggestedText = alias ? "".concat(text, " (").concat(alias, ")") : text;
  var Icon = (0, _utils.getIconName)(defaultType, isExpert);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: 'smart-input-option',
    "data-testid": "smart-custom-input-option",
    "data-sugg-type": category,
    style: optionStyle,
    onMouseDown: onOptionClick,
    role: "option"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: 'suggestionIcon',
    "data-test": "cbi-icon-search"
  }, /*#__PURE__*/_react.default.createElement(Icon, {
    size: "xs"
  })), /*#__PURE__*/_react.default.createElement(_HighlightedText.default, {
    suggestion: suggestedText,
    query: query
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: 'bool'
  }, boolean), /*#__PURE__*/_react.default.createElement(_HighlightedText.default, {
    className: 'custom-query-extra-info',
    suggestion: extraInfo,
    query: query
  }));
};

var DropdownOption = function DropdownOption(_ref3) {
  var _ref3$type = _ref3.type,
      type = _ref3$type === void 0 ? 'condensed' : _ref3$type,
      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
  return type === 'condensed' ? /*#__PURE__*/_react.default.createElement(CondensedDropdownOption, props) : /*#__PURE__*/_react.default.createElement(DetailedDropdownOption, props);
};

var _default = DropdownOption;
exports.default = _default;