backpack-ui/dist/components/flyout/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 _color = require("../../utils/color");

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

var styles = {
  container: {
    base: {
      backgroundColor: _settings.color.white,
      borderRadius: "4px",
      display: "inline-block",
      lineHeight: 1,
      padding: 10 / 13 + "em " + 16 / 13 + "em " + 8 / 13 + "em",
      position: "relative",
      zIndex: _settings.zIndex.globalHeader
    },

    shadow: {
      small: {
        boxShadow: "0 " + 2 / 13 + "em " + 13 / 13 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .2)"
      },

      large: {
        boxShadow: "0 " + 36 / 13 + "em " + 57 / 13 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .3)"
      }
    },

    removePadding: {
      padding: 0
    },

    size: {
      small: {
        fontSize: "13px"
      },

      medium: {
        fontSize: "18px"
      }
    },

    fill: {
      display: "block",
      width: "100%"
    }
  },

  arrow: {
    base: {
      color: _settings.color.white,
      position: "absolute"
    },

    direction: {
      up: {
        height: 6 / 13 + "em",
        top: -5.5 / 13 + "em",
        width: "100%"
      },

      down: {
        bottom: -5.5 / 13 + "em",
        height: 6 / 13 + "em",
        width: "100%"
      },

      left: {
        height: "100%",
        left: -6 / 13 + "em",
        width: 6 / 13 + "em"
      },

      right: {
        height: "100%",
        right: -6 / 13 + "em",
        width: 6 / 13 + "em"
      }
    },

    text: {
      base: {
        display: "block",
        fontSize: 9 / 13 + "em",
        lineHeight: 1,
        position: "absolute"
      },

      direction: {
        up: {
          bottom: -2 / 13 + "em",
          left: "50%",
          marginLeft: -4.5 / 13 + "em",
          textShadow: "0 " + -1 / 13 + "em " + 1 / 13 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .05)",
          transform: "scaleX(2)"
        },

        down: {
          left: "50%",
          marginLeft: -4.5 / 13 + "em",
          textShadow: "0 " + 1 / 13 + "em " + 1 / 13 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .05)",
          top: -1 / 13 + "em",
          transform: "scaleX(2)"
        },

        left: {
          left: -1 / 13 + "em",
          marginTop: -4 / 13 + "em",
          top: "50%",
          textShadow: -1 / 13 + "em 0 " + 1 / 13 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .05)",
          transform: "scaleY(2)"
        },

        right: {
          marginTop: -4 / 13 + "em",
          right: -1 / 13 + "em",
          top: "50%",
          textShadow: 1 / 13 + "em 0 " + 1 / 13 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .05)",
          transform: "scaleY(2)"
        }
      }
    },

    center: {
      horizontal: {
        left: 0,
        marginLeft: "auto",
        marginRight: "auto",
        right: 0
      },

      vertical: {
        bottom: 0,
        marginBottom: "auto",
        marginTop: "auto",
        top: 0
      }
    }
  },

  type: {
    dropdown: {
      container: {
        boxShadow: "0 " + 30 / 18 + "em " + 90 / 18 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .36)",
        fontSize: "18px",
        padding: 20 / 18 + "em " + 40 / 18 + "em"
      },

      arrow: {}
    },

    mapPopup: {
      container: {
        borderRadius: 0,
        boxShadow: "0 " + 17 / 11 + "em " + 27 / 11 + "em rgba(" + (0, _color.rgb)(_settings.color.titleGray) + ", .36)",
        display: "inline-block",
        fontSize: "11px",
        fontWeight: 600,
        lineHeight: 14 / 11,
        padding: 7 / 11 + "em " + 10 / 11 + "em " + 7 / 11 + "em",
        position: "relative"
      },

      arrow: {
        boxShadow: "none",
        marginTop: -15 / 11 + "em",
        padding: 0
      }
    }
  }
};

function Flyout(_ref) {
  var size = _ref.size;
  var arrow = _ref.arrow;
  var fill = _ref.fill;
  var children = _ref.children;
  var displayType = _ref.displayType;
  var shadow = _ref.shadow;
  var removePadding = _ref.removePadding;
  var style = _ref.style;

  var arrows = {
    up: "▲",
    down: "▼",
    left: "◄",
    right: "►"
  };

  function markup() {
    return {
      __html: arrows[arrow]
    };
  }

  return _react2.default.createElement(
    "div",
    {
      className: "Flyout",
      style: [styles.container.base, size && styles.container.size[size], fill && styles.container.fill, shadow && styles.container.shadow[shadow], removePadding && styles.container.removePadding, displayType && styles.type[displayType].container, style]
    },
    _react2.default.createElement(
      "div",
      { className: "Flyout-content" },
      children
    ),
    _react2.default.createElement(
      "div",
      {
        className: "Flyout-arrow",
        style: [styles.arrow.base, arrow && styles.arrow.direction[arrow], (arrow === "up" || arrow === "down") && styles.arrow.center.horizontal, (arrow === "left" || arrow === "right") && styles.arrow.center.vertical, displayType && styles.type[displayType].arrow]
      },
      _react2.default.createElement("span", {
        style: [styles.arrow.text.base, arrow && styles.arrow.text.direction[arrow]],
        dangerouslySetInnerHTML: markup()
      })
    )
  );
}

Flyout.propTypes = {
  /**
   * Content for the flyout
   */
  children: _react2.default.PropTypes.node.isRequired,

  /**
   * Size of the flyout
   */
  size: _react2.default.PropTypes.oneOf(["small", "medium"]),

  /**
   * Position of the flyout arrow
   */
  arrow: _react2.default.PropTypes.oneOf(["up", "down", "left", "right"]),

  /**
   * Whether or not the flyout should fill its parent's width
   */
  fill: _react2.default.PropTypes.bool,

  /**
   * Size of the shadow
   */
  shadow: _react2.default.PropTypes.oneOf(["small", "large"]),

  /**
   * Determine display type
   */
  displayType: _react2.default.PropTypes.oneOf(["", "dropdown", "mapPopup"]),

  /**
   * Remove padding from container and let content touch the edges
   */
  removePadding: _react2.default.PropTypes.bool,

  /**
   * Styles for positioning, etc.
   */
  style: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string, _react2.default.PropTypes.number)
};

Flyout.defaultProps = {
  children: null,

  size: "small",

  arrow: "down",

  fill: false,

  displayType: "",

  shadow: "small",

  removePadding: false,

  style: {}
};

Flyout.styles = styles;

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