backpack-ui/dist/components/placeholder/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 _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

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

var styles = {
  container: {
    base: {
      backgroundColor: "#e3e5e9",
      color: "#c4c7cc",
      fontFamily: (0, _font2.default)("miller"),
      lineHeight: 1,
      textAlign: "center",
      textTransform: "uppercase"
    }
  }
};

function Placeholder(_ref) {
  var title = _ref.title;
  var width = _ref.width;
  var height = _ref.height;
  var aspectRatio = _ref.aspectRatio;
  var fontSize = _ref.fontSize;
  var style = _ref.style;

  var createLetter = function createLetter() {
    var letter = "";
    var matches = title.split(/\b/);

    if (matches.length > 0) {
      if (matches[0] === "The") {
        letter = title.slice(4, 5);
      } else if (matches[0] === "A") {
        letter = title.slice(2, 3);
      } else {
        letter = title.slice(0, 1);
      }
    }

    return letter;
  };

  return _react2.default.createElement(
    "div",
    {
      className: "Placeholder",
      style: [styles.container.base, {
        fontSize: fontSize + "px"
      }, width && height && {
        height: height + "px",
        lineHeight: "" + (height + 1) / fontSize,
        width: width + "px"
      }, aspectRatio && {
        paddingBottom: aspectRatio * 100 + "%",
        width: "100%"
      }, style],
      "aria-hidden": "true"
    },
    width && height && createLetter(),
    aspectRatio && _react2.default.createElement(
      "div",
      {
        style: {
          position: "absolute",
          top: "50%",
          transform: "translateY(-50%)",
          width: "100%"
        }
      },
      createLetter()
    )
  );
}

Placeholder.propTypes = {
  /**
   * Title of placeholder; will be truncated to first letter
   */
  title: _react2.default.PropTypes.string.isRequired,

  /**
   * Width in pixels
   */
  width: _react2.default.PropTypes.number,

  /**
   * Height in pixels
   */
  height: _react2.default.PropTypes.number,

  /**
   * Should be written in the form of `16 / 9`
   */
  aspectRatio: _react2.default.PropTypes.number,

  /**
   * Font size in pixels
   */
  fontSize: _react2.default.PropTypes.number,

  /**
   * Style object
   */
  style: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.object), _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string, _react2.default.PropTypes.number)])
};

Placeholder.defaultProps = {
  title: "",

  width: null,

  height: null,

  aspectRatio: null,

  fontSize: 26,

  style: {}
};

Placeholder.styles = styles;

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