@retailmenot/anchor/commonjs/popover.js

A React UI Library by RetailMeNot

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var __chunk_9 = require('./anchor-chunk-f296150d.js');
var __chunk_11 = require('./anchor-chunk-044b0898.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    ", "\n    position: relative;\n    display: inline-flex;\n    box-sizing: border-box;\n    justify-content: center;\n    align-items: center;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var StyledPopOver = styled__default('div')(_templateObject(), system.display);
var PopOver = /*#__PURE__*/function (_React$PureComponent) {
  __chunk_1._inherits(PopOver, _React$PureComponent);

  var _super = __chunk_1._createSuper(PopOver);

  function PopOver() {
    var _this;

    __chunk_1._classCallCheck(this, PopOver);

    _this = _super.apply(this, arguments);
    _this.state = {
      width: 0,
      height: 0,
      containerHeight: 0,
      containerWidth: 0
    };
    _this.popOverContainerRef = React.createRef();
    _this.popOverRef = React.createRef();
    return _this;
  } // TODO: why the fuck not just use the code in the dropdown/abstract that out and inject it into two instances?


  __chunk_1._createClass(PopOver, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var popOver = this.popOverRef.current;
      var popOverContainer = this.popOverContainerRef.current;
      this.setState({
        height: __chunk_9.get(popOver, 'clientHeight', 0),
        width: __chunk_9.get(popOver, 'clientWidth', 0),
        containerHeight: __chunk_9.get(popOverContainer, 'clientHeight', 0),
        containerWidth: __chunk_9.get(popOverContainer, 'clientWidth', 0)
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var prevShowArrow = prevProps.showArrow,
          prevPosition = prevProps.position,
          prevSpacing = prevProps.spacing,
          prevActive = prevProps.active;
      var _this$props = this.props,
          showArrow = _this$props.showArrow,
          position = _this$props.position,
          spacing = _this$props.spacing,
          active = _this$props.active;

      if (active && !prevActive || showArrow !== prevShowArrow || position !== prevPosition || spacing !== prevSpacing) {
        var popOver = this.popOverRef.current;
        var popOverContainer = this.popOverContainerRef.current;
        this.setState({
          height: __chunk_9.get(popOver, 'clientHeight', 0),
          width: __chunk_9.get(popOver, 'clientWidth', 0),
          containerHeight: __chunk_9.get(popOverContainer, 'clientHeight', 0),
          containerWidth: __chunk_9.get(popOverContainer, 'clientWidth', 0)
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _a = this.props,
          arrowIndent = _a.arrowIndent,
          arrowSize = _a.arrowSize,
          _a$background = _a.background,
          background = _a$background === void 0 ? '#000000' : _a$background,
          children = _a.children,
          className = _a.className,
          border = _a.border,
          borderRadius = _a.borderRadius,
          _a$color = _a.color,
          color = _a$color === void 0 ? '#ffffff' : _a$color,
          content = _a.content,
          delay = _a.delay,
          debug = _a.debug,
          shadow = _a.shadow,
          _a$spacing = _a.spacing,
          spacing = _a$spacing === void 0 ? 8 : _a$spacing,
          maxWidth = _a.maxWidth,
          _a$position = _a.position,
          position = _a$position === void 0 ? 'bottomStart' : _a$position,
          showArrow = _a.showArrow,
          _a$display = _a.display,
          display = _a$display === void 0 ? 'inline-block' : _a$display,
          active = _a.active,
          props = __chunk_2.__rest(_a, ["arrowIndent", "arrowSize", "background", "children", "className", "border", "borderRadius", "color", "content", "delay", "debug", "shadow", "spacing", "maxWidth", "position", "showArrow", "display", "active"]);

      var _this$state = this.state,
          height = _this$state.height,
          containerHeight = _this$state.containerHeight,
          containerWidth = _this$state.containerWidth,
          width = _this$state.width;
      return React.createElement(StyledPopOver, Object.assign({
        className: classNames('anchor-pop-over', className),
        display: display
      }, props, {
        ref: this.popOverRef
      }), children, React.createElement(__chunk_11.PositionContainer, {
        ref: this.popOverContainerRef,
        active: active,
        arrowIndent: arrowIndent,
        arrowSize: arrowSize,
        background: background,
        border: border,
        borderRadius: borderRadius,
        children: content,
        className: "anchor-pop-over-element",
        color: color,
        containerHeight: containerHeight,
        containerWidth: containerWidth,
        height: height,
        width: width,
        delay: delay,
        debug: debug,
        shadow: shadow,
        spacing: spacing,
        maxWidth: maxWidth,
        position: position,
        showArrow: showArrow
      }));
    }
  }]);

  return PopOver;
}(React.PureComponent);

exports.PopOver = PopOver;
//# sourceMappingURL=popover.js.map