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 _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _color = require("../../utils/color");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var styles = {
  container: {
    base: {
      backgroundColor: _colors2.default.bgPrimary,
      borderRadius: "4px",
      display: "inline-block",
      lineHeight: 1,
      padding: 10 / 13 + "em " + 16 / 13 + "em " + 8 / 13 + "em",
      position: "relative",
      zIndex: _zIndex2.default.popup
    },

    shadow: {
      small: {
        boxShadow: "0 " + 2 / 13 + "em " + 13 / 13 + "em " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.2)
      },

      large: {
        boxShadow: "0 " + 36 / 13 + "em " + 57 / 13 + "em " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.3)
      }
    },

    removePadding: {
      padding: 0
    },

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

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

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

  arrow: {
    base: {
      color: _colors2.default.bgPrimary,
      position: "absolute"
    },

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

      down: {
        bottom: -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 " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.05),
          transform: "scaleX(2)"
        },

        down: {
          left: "50%",
          marginLeft: -4.5 / 13 + "em",
          textShadow: "0 " + 1 / 13 + "em " + 1 / 13 + "em " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.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 " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.05),
          transform: "scaleY(2)"
        },

        right: {
          marginTop: -4 / 13 + "em",
          right: -1 / 13 + "em",
          top: "50%",
          textShadow: 1 / 13 + "em 0 " + 1 / 13 + "em " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.05),
          transform: "scaleY(2)"
        }
      }
    },

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

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

    position: {
      right: {
        left: "auto",
        marginLeft: 0,
        marginRight: 0,
        right: "16px",
        width: "auto"
      },

      left: {
        left: "16px",
        marginLeft: 0,
        marginRight: 0,
        right: "auto",
        width: "auto"
      }
    }
  },

  type: {
    dropdown: {
      container: {
        boxShadow: "0 " + 30 / 18 + "em " + 90 / 18 + "em " + (0, _color.rgba)(_colors2.default.shadowPrimary, 0.36),
        fontSize: "18px",
        padding: 20 / 18 + "em " + 40 / 18 + "em"
      },

      arrow: {}
    },

    mapPopup: {
      container: {
        borderRadius: 0,
        boxShadow: "0 " + 17 / 11 + "em " + 27 / 11 + "em " + (0, _color.rgba)(_colors2.default.textPrimary, 0.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,
      arrow = _ref.arrow,
      arrowPosition = _ref.arrowPosition,
      fill = _ref.fill,
      children = _ref.children,
      displayType = _ref.displayType,
      shadow = _ref.shadow,
      removePadding = _ref.removePadding,
      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, (arrow === "up" || arrow === "down") && arrowPosition === "left" && styles.arrow.position.left, (arrow === "up" || arrow === "down") && arrowPosition === "right" && styles.arrow.position.right, displayType && styles.type[displayType].arrow, style && style.backgroundColor && { color: style.backgroundColor }]
      },
      _react2.default.createElement("span", {
        style: [styles.arrow.text.base, arrow && styles.arrow.text.direction[arrow]],
        dangerouslySetInnerHTML: markup()
      })
    )
  );
}

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

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

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

  /**
   * Used with up and down arrows; allows for the arrow to be offset to
   * the left or right
   */
  arrowPosition: _propTypes2.default.oneOf(["", "left", "right"]),

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

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

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

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

  /**
   * Styles for positioning, etc.
   */
  style: _propTypes4.default.style
};

Flyout.defaultProps = {
  size: "small",
  arrow: "down",
  arrowPosition: "",
  fill: false,
  displayType: "",
  shadow: "small",
  removePadding: false,
  style: null
};

Flyout.styles = styles;

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