backpack-ui/dist/components/amenities/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 _grid = require("../../utils/grid");

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

var _font2 = _interopRequireDefault(_font);

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

var baseFontSize = 13;

var styles = {
  container: {
    base: {
      fontFamily: (0, _font2.default)("benton"),
      fontSize: baseFontSize + "px",
      lineHeight: 24 / baseFontSize
    }
  },

  list: {
    base: {
      listStyle: "none",
      marginTop: 0,
      marginRight: 0,
      marginBottom: 0,
      marginLeft: 0,
      padding: 0
    },

    single: {
      marginTop: -5 / baseFontSize + "em" },

    grouped: {
      marginBottom: -23 / baseFontSize + "em" }
  },

  item: {
    base: {
      color: _settings.color.darkGray
    },

    grouped: {
      base: {
        WebkitColumnBreakInside: "avoid",
        pageBreakInside: "avoid",
        breakInside: "avoid",
        display: "inline-block",
        marginBottom: 23 / baseFontSize + "em",
        width: "100%"
      }
    }
  },

  heading: {
    base: {
      color: _settings.color.titleGray,
      fontSize: 14 / baseFontSize + "em",
      fontWeight: 600,
      lineHeight: 24 / 14,
      margin: 0
    }
  }
};

function markup(htmlContent) {
  return {
    __html: htmlContent
  };
}
var getListItems = function getListItems(items, capitalize) {
  var ListItems = items.map(function (item, index) {
    return _react2.default.createElement("li", {
      key: index,
      dangerouslySetInnerHTML: markup(item),
      style: [styles.item.base, capitalize && { textTransform: "capitalize" }]
    });
  });

  return ListItems;
};

var getGroupedItems = function getGroupedItems(items) {
  var GroupedItems = items.map(function (group, index) {
    var groupedItemStyle = [styles.item.grouped.base];

    return _react2.default.createElement(
      "div",
      {
        style: groupedItemStyle,
        key: index
      },
      _react2.default.createElement(
        "h5",
        { style: styles.heading.base },
        group.title
      ),
      _react2.default.createElement(
        "ul",
        { style: styles.list.base },
        getListItems(group.items, group.capitalize, "grouped")
      )
    );
  });

  return GroupedItems;
};

/**
 * Amenities list component
 */
function Amenities(_ref) {
  var columns = _ref.columns;
  var _ref$items = _ref.items;
  var items = _ref$items === undefined ? [] : _ref$items;
  var listType = _ref.listType;

  var columnWidth = (0, _grid.span)(6 / columns + " of 6", "static");

  var style = {
    list: {
      single: [styles.list.base, styles.list.single],
      grouped: [styles.list.base, styles.list.single, styles.list.grouped]
    }
  };

  if (columns !== 1) {
    style.list[listType].push({
      columns: columnWidth + " " + columns,
      columnGap: 24 / 13 + "em"
    });
  }

  var ListComponent = listType === "single" ? _react2.default.createElement(
    "ul",
    {
      className: "Amenities-list",
      style: style.list.single
    },
    getListItems(items)
  ) : _react2.default.createElement(
    "div",
    {
      className: "Amenities-list",
      style: style.list.grouped
    },
    getGroupedItems(items)
  );

  return _react2.default.createElement(
    "div",
    {
      className: "Amenities",
      style: styles.container.base
    },
    ListComponent
  );
}

Amenities.propTypes = {
  /**
   * Data
   */
  items: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
    title: _react2.default.PropTypes.string
  })).isRequired,

  /**
   * Number of columns to span
   */
  columns: _react2.default.PropTypes.oneOf([1, 2, 3]),

  /**
   * Type of list
   */
  listType: _react2.default.PropTypes.oneOf(["single", "grouped"])
};

Amenities.defaultProps = {
  items: [],

  columns: 1,

  listType: "single"
};

Amenities.styles = styles;

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