backpack-ui/dist/components/dropdown/index.js

Lonely Planet's Components

"use strict";

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

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 _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _mixins = require("../../utils/mixins");

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var icons = {
  chevron: {
    base: encodeURIComponent("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" fill=\"" + _colors2.default.textPrimary + "\"><path d=\"M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z\"></path></svg>")
  }
};

var hoverStyles = {
  opacity: 0.7
};

var styles = {
  container: {
    base: {
      backgroundColor: _colors2.default.bgPrimary,
      backgroundRepeat: "no-repeat",
      backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.chevron.base + "\")",
      backgroundSize: 7 / 13 + "em",
      backgroundPosition: "calc(100% - " + 1 / 13 + "em) 50%",
      border: 0,
      color: _colors2.default.textPrimary,
      cursor: "pointer",
      fontSize: "13px",
      lineHeight: 1,
      padding: 10 / 13 + "em " + 10 / 13 + "em " + 7 / 13 + "em " + 1 / 13 + "em",
      transition: "opacity " + _timing2.default.fast,
      WebkitAppearance: "none",

      ":hover": hoverStyles,
      ":active": hoverStyles,
      ":focus": (0, _objectAssign2.default)({}, hoverStyles, (0, _mixins.outline)())
    },

    size: {
      small: {
        fontSize: "11px",
        fontWeight: 600
      }
    }
  }
};

function Dropdown(_ref) {
  var options = _ref.options,
      defaultValue = _ref.defaultValue,
      onChange = _ref.onChange,
      size = _ref.size,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "select",
    {
      style: [styles.container.base, size && styles.container.size[size]],
      defaultValue: defaultValue,
      onChange: onChange,
      "data-testid": qaHook ? (0, _createQAHook2.default)(defaultValue, "select", "select") : null
    },
    options.map(function (option, i) {
      return _react2.default.createElement(
        "option",
        { value: option, key: i, "data-testid": qaHook ? (0, _createQAHook2.default)(option, "" + i, "option") : null },
        option
      );
    })
  );
}

Dropdown.propTypes = {
  /**
   * An array of options for the select element
   */
  options: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,

  /**
   * A value from the options array that will be selected initially
   */
  defaultValue: _propTypes2.default.string,

  /**
   * A function to run when the value changes
   */
  onChange: _propTypes2.default.func,

  /**
   * A keyword to adjust the font size and padding
   */
  size: _propTypes2.default.oneOf(["", "small"]),

  /**
   * A custom data attribute to adjust for automation testing
   */
  qaHook: _propTypes2.default.bool
};

Dropdown.defaultProps = {
  options: [],
  defaultValue: "",
  onChange: null,
  size: "",
  qaHook: false
};

Dropdown.styles = styles;

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