backpack-ui/dist/components/form/select.js

Lonely Planet's Components

"use strict";

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

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _typeof2 = require("babel-runtime/helpers/typeof");

var _typeof3 = _interopRequireDefault(_typeof2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _styles = require("./styles");

var _styles2 = _interopRequireDefault(_styles);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

function Select(_ref) {
  var id = _ref.id,
      className = _ref.className,
      options = _ref.options,
      label = _ref.label,
      name = _ref.name,
      defaultValue = _ref.defaultValue,
      required = _ref.required,
      size = _ref.size,
      theme = _ref.theme,
      noBorder = _ref.noBorder,
      style = _ref.style,
      onChange = _ref.onChange,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "select",
    {
      style: [_styles2.default.base, _styles2.default.element.select.base, size && _styles2.default.size[size], size && _styles2.default.element.select.size[size], theme && _styles2.default.theme[theme], theme && _styles2.default.element.select.theme[theme], noBorder && _styles2.default.noBorder, style],
      "data-testid": qaHook ? (0, _createQAHook2.default)(name, id, "select") : null,
      className: (0, _classnames2.default)("Select", className),
      id: id,
      name: name || id,
      defaultValue: defaultValue,
      required: required,
      "aria-label": label,
      title: label,
      onChange: onChange
    },
    options.map(function (option, index) {
      if ((typeof option === "undefined" ? "undefined" : (0, _typeof3.default)(option)) === "object") {
        var isMissingLabel = (0, _keys2.default)(option).indexOf("label") === -1;
        var isMissingValue = (0, _keys2.default)(option).indexOf("value") === -1;

        if (isMissingLabel || isMissingValue) {
          return false;
        }

        return _react2.default.createElement(
          "option",
          {
            value: option.value,
            key: option.value,
            "data-testid": qaHook ? (0, _createQAHook2.default)(option.value, "" + index, "option") : null
          },
          option.label
        );
      }

      return _react2.default.createElement(
        "option",
        {
          value: option,
          key: option,
          "data-testid": qaHook ? (0, _createQAHook2.default)(option.value, "" + index, "option") : null
        },
        option
      );
    })
  );
}

Select.propTypes = {
  id: _propTypes2.default.string.isRequired,

  className: _propTypes2.default.string,

  options: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
    label: _propTypes2.default.string.isRequired,
    value: _propTypes2.default.string.isRequired
  })]).isRequired),

  label: _propTypes2.default.string.isRequired,

  name: _propTypes2.default.string,

  defaultValue: _propTypes2.default.string,

  required: _propTypes2.default.bool,

  size: _propTypes2.default.oneOf(["tiny", "small", "medium", "large", "huge"]),

  theme: _propTypes2.default.oneOf(["base", "light", "dark", "inputGroup"]),

  /**
   * Remove border
   */
  noBorder: _propTypes2.default.bool,

  style: _propTypes2.default.objectOf(_propTypes2.default.string, _propTypes2.default.number),

  /**
   * onChange function for the select element
   */
  onChange: _propTypes2.default.func,

  /**
   * Boolean value to handle qa hooks being on
   */
  qaHook: _propTypes2.default.bool
};

Select.defaultProps = {
  id: "",

  options: [],

  label: "",

  name: "",

  defaultValue: "",

  required: false,

  size: "medium",

  theme: "base",

  noBorder: false,

  style: {},

  qaHook: false
};

Select.styles = _styles2.default;

exports.default = (0, _radium2.default)(Select);