backpack-ui/dist/components/poiPaginator/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 _settings = require("../../../settings.json");

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

var _strapline = require("../strapline");

var _strapline2 = _interopRequireDefault(_strapline);

var _paginatorButton = require("../paginatorButton");

var _paginatorButton2 = _interopRequireDefault(_paginatorButton);

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

var styles = {
  container: {
    base: {
      marginLeft: "auto",
      marginRight: "auto",
      textAlign: "center"
    }
  },

  title: {
    base: {
      color: _settings.color.blue,
      fontWeight: "inherit"
    }
  },

  strapline: {
    base: {
      marginTop: ".7rem"
    }
  },

  button: {
    base: {
      marginTop: "2.7rem"
    }
  }
};

/**
 * PoiPaginator component
 */
function PoiPaginator(_ref) {
  var title = _ref.title;
  var topChoice = _ref.topChoice;
  var type = _ref.type;
  var neighborhood = _ref.neighborhood;
  var place = _ref.place;
  var onClick = _ref.onClick;

  var TopChoiceText = void 0;
  var PlaceText = void 0;

  if (topChoice) {
    TopChoiceText = _react2.default.createElement(
      "em",
      { style: styles.topChoice },
      "Top choice ",
      type.toLowerCase()
    );
  } else {
    TopChoiceText = "" + type.toLowerCase();
  }

  if (neighborhood) {
    PlaceText = "located in the " + neighborhood + " neighbourhood";
  } else if (place) {
    PlaceText = "located in " + place;
  }

  return _react2.default.createElement(
    "div",
    {
      className: "PoiPaginator",
      style: [styles.container.base, onClick && { cursor: "pointer" }],
      onClick: onClick
    },
    _react2.default.createElement(
      _heading2.default,
      {
        level: 4,
        size: "medium",
        weight: "thin",
        importance: "high",
        override: {
          lineHeight: 34 / 26
        }
      },
      "You might also like ",
      _react2.default.createElement(
        "strong",
        { style: styles.title.base },
        title
      )
    ),
    type && _react2.default.createElement(
      "div",
      {
        className: "PoiPaginator-strapline",
        style: styles.strapline.base
      },
      _react2.default.createElement(
        _strapline2.default,
        {
          size: "tiny",
          color: "gray"
        },
        TopChoiceText,
        " ",
        PlaceText
      )
    ),
    _react2.default.createElement(
      "div",
      {
        className: "PoiPaginator-button",
        style: styles.button.base
      },
      _react2.default.createElement(_paginatorButton2.default, {
        direction: "down",
        color: "blue",
        shadow: "tight",
        size: "small",
        arrow: "triangle",
        onClick: onClick
      })
    )
  );
}

PoiPaginator.propTypes = {
  /**
   * Name of the POI
   */
  title: _react2.default.PropTypes.string.isRequired,

  /**
   * Show the top choice text
   */
  topChoice: _react2.default.PropTypes.bool,

  /**
   * Type of POI
   */
  type: _react2.default.PropTypes.string,

  /**
   * Neighborhood where the POI is located
   */
  neighborhood: _react2.default.PropTypes.string,

  /**
   * Where the POI is located, if neighborhood is null
   */
  place: _react2.default.PropTypes.string,

  /**
   * Function to run on button click
   */
  onClick: _react2.default.PropTypes.func
};

PoiPaginator.defaultProps = {
  title: "",

  topChoice: false,

  type: "",

  neighborhood: "",

  place: "",

  onClick: null
};

PoiPaginator.styles = styles;

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