backpack-ui/dist/components/tagList/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 _tag = require("../tag");

var _tag2 = _interopRequireDefault(_tag);

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

/**
 * TagList component
 * @usage
 * <TagList tags={[
 *   { label: "The Americas", slug: "/americas" },
 *   { label: "World", slug: "/world" },
 *   { label: "Europe", slug: "/europe" },
 * ]} />
 */
function TagList(_ref) {
  var tags = _ref.tags;
  var rows = _ref.rows;

  var rowHeight = 40;

  var styles = {
    container: {
      base: {
        maxHeight: rowHeight * rows + "px",
        overflow: "hidden"
      }
    },
    tag: {
      base: {
        marginBottom: "8px",
        marginRight: "8px"
      }
    }
  };

  var Tags = tags.map(function (tag, i) {
    return _react2.default.createElement(_tag2.default, {
      label: tag.label,
      slug: tag.slug,
      style: styles.tag.base,
      selected: tag.selected,
      key: i
    });
  });

  return _react2.default.createElement(
    "div",
    {
      className: "TagList",
      style: styles.container.base
    },
    _react2.default.createElement(_tag2.default, {
      label: "All",
      slug: "/",
      style: styles.tag.base,
      selected: true
    }),
    Tags
  );
}

TagList.propTypes = {
  /**
   * An array of tags to display
   */
  tags: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string).isRequired,

  /**
   * Maximum number of rows of tags to display
   */
  rows: _react2.default.PropTypes.number
};

TagList.defaultProps = {
  tags: [],

  rows: 3
};

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