@vtex/styleguide/lib/AutocompleteInput/Option.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getTermFromOption = exports.autocompleteOptionShape = undefined;

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** Structured Autocomplete option shape */
var structuredAutocompleteOptionShape = _propTypes2.default.shape({
  value: _propTypes2.default.any,
  label: _propTypes2.default.string.isRequired
});

/** Autocomplete option shape */
var autocompleteOptionShape = exports.autocompleteOptionShape = _propTypes2.default.oneOfType([_propTypes2.default.string, structuredAutocompleteOptionShape]);

var getTermFromOption = exports.getTermFromOption = function getTermFromOption(option) {
  return typeof option === 'string' ? option : option.label;
};

var propTypes = {
  /** Determine if the option should have a rounded bottom */
  roundedBottom: _propTypes2.default.bool,

  /** Option icon */
  icon: _propTypes2.default.node,

  /** Search term used to highlight it into the label */
  searchTerm: _propTypes2.default.string.isRequired,

  /** Option title */
  value: autocompleteOptionShape.isRequired,

  /** Determine if an option is selected and should be highlighted */
  selected: _propTypes2.default.bool.isRequired,

  /** Click handler */
  onClick: _propTypes2.default.func.isRequired
};

var Option = function Option(props) {
  var icon = props.icon,
      selected = props.selected,
      roundedBottom = props.roundedBottom,
      searchTerm = props.searchTerm,
      onClick = props.onClick;

  var _useState = (0, _react.useState)(false),
      highlightOption = _useState[0],
      setHighlightOption = _useState[1];

  var value = getTermFromOption(props.value);

  var renderOptionValue = function renderOptionValue() {
    var index = value.toLowerCase().indexOf(searchTerm.toLowerCase());

    if (index === -1) {
      return value;
    }

    var prefix = value.substring(0, index);
    var match = value.substr(index, searchTerm.length);
    var suffix = value.substring(index + match.length);
    return _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement("span", {
      className: "fw7"
    }, prefix), match, _react2.default.createElement("span", {
      className: "fw7"
    }, suffix));
  };

  var buttonClasses = (0, _classnames2.default)('bn w-100 tl pointer pa4 f6', {
    'br2 br--bottom': roundedBottom,
    'bg-muted-5': highlightOption || selected,
    'bg-base': !highlightOption && !selected
  });
  return _react2.default.createElement("button", {
    className: buttonClasses,
    onFocus: function onFocus() {
      return setHighlightOption(true);
    },
    onMouseEnter: function onMouseEnter() {
      return setHighlightOption(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setHighlightOption(false);
    },
    onClick: onClick
  }, _react2.default.createElement("span", {
    className: "h1 flex items-center"
  }, _react2.default.createElement("span", {
    className: "mr3 c-muted-2 flex pt1"
  }, icon), _react2.default.createElement("span", {
    className: "truncate"
  }, renderOptionValue())));
};

Option.propTypes = propTypes;
exports.default = Option;