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

Lonely Planet's Components

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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 _providerLogo = require("../providerLogo");

var _providerLogo2 = _interopRequireDefault(_providerLogo);

var _schema = require("../../utils/schema");

var _schema2 = _interopRequireDefault(_schema);

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

var _icon = require("../../utils/icon");

var _icon2 = _interopRequireDefault(_icon);

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

function Rating(_ref) {
  var amount = _ref.amount,
      max = _ref.max,
      description = _ref.description,
      provider = _ref.provider,
      icon = _ref.icon;

  var styles = {
    container: {
      base: {
        fontFamily: (0, _font2.default)("benton"),
        fontSize: "11px",
        lineHeight: 1.5
      }
    }
  };

  var ratingMap = {
    0: "RatingZero",
    0.5: "RatingHalf",
    1: "RatingOne",
    1.5: "RatingOneHalf",
    2: "RatingTwo",
    2.5: "RatingTwoHalf",
    3: "RatingThree",
    3.5: "RatingThreeHalf",
    4: "RatingFour",
    4.5: "RatingFourHalf",
    5: "RatingFive"
  };

  var label = amount ? amount + " rating" : "";

  var schemaProps = (0, _schema2.default)({
    itemProp: "aggregateRating",
    itemType: "AggregateRating"
  });

  var RatingIcon = (0, _icon2.default)(ratingMap[amount], {
    height: "12px",
    label: label,
    width: "100px"
  });

  return _react2.default.createElement(
    "div",
    (0, _extends3.default)({
      className: "Rating",
      title: label,
      style: styles.container.base
    }, schemaProps),
    amount && icon && ratingMap[amount] && _react2.default.createElement("meta", { itemProp: "ratingValue", content: amount }),
    amount && icon && RatingIcon,
    (amount && icon && !ratingMap[amount] || amount && !icon) && _react2.default.createElement(
      "div",
      { style: { display: "inline-block" } },
      description && description + " ",
      _react2.default.createElement(
        "span",
        { itemProp: "ratingValue" },
        amount
      ),
      max && " out of " + max
    ),
    provider && _react2.default.createElement(_providerLogo2.default, {
      provider: provider,
      style: {
        float: "right",
        height: "21px",
        marginTop: "-4px"
      }
    })
  );
}

Rating.propTypes = {
  /**
   * A numeric value, 0-5
   */
  amount: _propTypes2.default.number,

  /**
   * A number that defines the maximum rating value
   */
  max: _propTypes2.default.number,

  /**
   * A word that describes the rating, i.e., excellent, great, poor, etc.
   */
  description: _propTypes2.default.string,

  /**
   * If the rating comes from a third-party
   */
  provider: _propTypes2.default.oneOf(["", "bdc", "hostelworld", "opentable", "gadventures", "viator"]),

  /**
   * Should the rating use an icon instead of text to describe the rating
   */
  icon: _propTypes2.default.bool
};

Rating.defaultProps = {
  amount: "",

  max: 5,

  text: "",

  provider: "",

  icon: false
};

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