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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _settings = require("../../../settings.json");

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

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=\"" + _settings.color.darkGray + "\"><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: _settings.color.white,
      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: _settings.color.darkGray,
      cursor: "pointer",
      fontSize: "13px",
      lineHeight: 1,
      padding: 10 / 13 + "em " + 10 / 13 + "em " + 7 / 13 + "em " + 1 / 13 + "em",
      transition: "opacity " + _settings.timing.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;
  var defaultValue = _ref.defaultValue;
  var onChange = _ref.onChange;
  var size = _ref.size;

  return _react2.default.createElement(
    "select",
    {
      style: [styles.container.base, size && styles.container.size[size]],
      defaultValue: defaultValue,
      onChange: onChange
    },
    options.map(function (option, i) {
      return _react2.default.createElement(
        "option",
        { value: option, key: i },
        option
      );
    })
  );
}

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

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

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

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

Dropdown.defaultProps = {
  options: [],

  defaultValue: "",

  onChange: null,

  size: ""
};

Dropdown.styles = styles;

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