backpack-ui/dist/components/typeahead/typeaheadDropdown.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _typeaheadOption = require("./typeaheadOption");

var _typeaheadOption2 = _interopRequireDefault(_typeaheadOption);

var _createClassList = require("./utils/createClassList");

var _createClassList2 = _interopRequireDefault(_createClassList);

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

/**
 * Container for the options rendered as part of the autocompletion process
 * of the typeahead
 */
var TypeaheadDropdown = function (_Component) {
  (0, _inherits3.default)(TypeaheadDropdown, _Component);

  function TypeaheadDropdown(props) {
    (0, _classCallCheck3.default)(this, TypeaheadDropdown);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TypeaheadDropdown.__proto__ || (0, _getPrototypeOf2.default)(TypeaheadDropdown)).call(this, props));

    _this.onClick = _this.onClick.bind(_this);
    _this.onMouseOver = _this.onMouseOver.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(TypeaheadDropdown, [{
    key: "onClick",
    value: function onClick(event, result) {
      return this.props.onOptionSelected(event, result);
    }
  }, {
    key: "onMouseOver",
    value: function onMouseOver(event, index) {
      return this.props.onMouseOver(event, index);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          options = _props.options,
          allowCustomValues = _props.allowCustomValues,
          disableDefaultClassNames = _props.disableDefaultClassNames,
          customClasses = _props.customClasses,
          areResultsTruncated = _props.areResultsTruncated,
          resultsTruncatedMessage = _props.resultsTruncatedMessage,
          selectionIndex = _props.selectionIndex,
          displayOption = _props.displayOption,
          id = _props.id,
          activeDescendantId = _props.activeDescendantId,
          isVisible = _props.isVisible;

      // Don't render if there are no options to display

      if (!options.length && allowCustomValues <= 0) {
        return false;
      }

      var dropdownClassList = (0, _createClassList2.default)(customClasses.results, "results", disableDefaultClassNames);

      // CustomValue should be added to top of
      // results list with different class name
      var customValue = null;
      var customValueOffset = 0;

      if (this.props.customValue !== null) {
        customValueOffset += 1;
        customValue = _react2.default.createElement(
          _typeaheadOption2.default,
          {
            ref: this.props.customValue,
            key: this.props.customValue,
            hover: selectionIndex === 0,
            customClasses: customClasses,
            customValue: this.props.customValue,
            onClick: function onClick(event) {
              _this2.onClick(event, _this2.props.customValue);
            },
            onMouseOver: function onMouseOver(event) {
              _this2.onMouseOver(event, 0);
            },
            activeDescendantId: activeDescendantId,
            disableDefaultClassNames: disableDefaultClassNames
          },
          this.props.customValue
        );
      }

      var results = options.map(function (result, index) {
        var displayString = displayOption(result, index);

        return _react2.default.createElement(
          _typeaheadOption2.default,
          {
            key: displayString,
            hover: selectionIndex === index + customValueOffset,
            customClasses: customClasses,
            onClick: function onClick(event) {
              _this2.onClick(event, result);
            },
            onMouseOver: function onMouseOver(event) {
              _this2.onMouseOver(event, index);
            },
            activeDescendantId: activeDescendantId,
            disableDefaultClassNames: disableDefaultClassNames
          },
          displayString
        );
      });

      if (areResultsTruncated && resultsTruncatedMessage) {
        var resultsTruncatedClassList = (0, _createClassList2.default)(customClasses.resultsTruncated, "resultsTruncated", disableDefaultClassNames);

        results.push(_react2.default.createElement(
          "li",
          {
            className: resultsTruncatedClassList,
            key: "results-truncated"
          },
          resultsTruncatedMessage
        ));
      }

      return _react2.default.createElement(
        "ul",
        {
          id: id,
          className: dropdownClassList,
          role: "listbox",
          "aria-hidden": !isVisible,
          style: {
            display: isVisible ? "block" : "none"
          }
        },
        customValue,
        results
      );
    }
  }]);
  return TypeaheadDropdown;
}(_react.Component);

TypeaheadDropdown.propTypes = {
  displayOption: _propTypes2.default.func.isRequired,
  options: _propTypes2.default.arrayOf(_propTypes2.default.string),
  allowCustomValues: _propTypes2.default.number,
  customClasses: _propTypes2.default.shape({
    results: _propTypes2.default.string,
    resultsTruncated: _propTypes2.default.string
  }),
  customValue: _propTypes2.default.string,
  selectionIndex: _propTypes2.default.number,
  onOptionSelected: _propTypes2.default.func,
  onMouseOver: _propTypes2.default.func,
  disableDefaultClassNames: _propTypes2.default.bool,
  areResultsTruncated: _propTypes2.default.bool,
  resultsTruncatedMessage: _propTypes2.default.string,
  id: _propTypes2.default.string,
  activeDescendantId: _propTypes2.default.string,
  isVisible: _propTypes2.default.bool
};

TypeaheadDropdown.defaultProps = {
  options: [],
  allowCustomValues: 0,
  customClasses: {},
  customValue: null,
  selectionIndex: null,
  onOptionSelected: function onOptionSelected() {},
  onMouseOver: function onMouseOver() {},
  disableDefaultClassNames: false,
  areResultsTruncated: false,
  resultsTruncatedMessage: null,
  id: "",
  activeDescendantId: "",
  isVisible: false
};

exports.default = TypeaheadDropdown;