@retailmenot/anchor/esm/popover.js

A React UI Library by RetailMeNot

import { f as _classCallCheck, g as _createClass, h as _inherits, i as _createSuper, a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { a as get } from './anchor-chunk-6ebffda8.js';
import { a as PositionContainer } from './anchor-chunk-9ff4257f.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled from '@xstyled/styled-components';
import { display } from '@xstyled/system';

function _templateObject() {
  var data = _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('div')(_templateObject(), display);
var PopOver = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(PopOver, _React$PureComponent);

  var _super = _createSuper(PopOver);

  function PopOver() {
    var _this;

    _classCallCheck(this, PopOver);

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


  _createClass(PopOver, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var popOver = this.popOverRef.current;
      var popOverContainer = this.popOverContainerRef.current;
      this.setState({
        height: get(popOver, 'clientHeight', 0),
        width: get(popOver, 'clientWidth', 0),
        containerHeight: get(popOverContainer, 'clientHeight', 0),
        containerWidth: 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: get(popOver, 'clientHeight', 0),
          width: get(popOver, 'clientWidth', 0),
          containerHeight: get(popOverContainer, 'clientHeight', 0),
          containerWidth: 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$$1 = _a$display === void 0 ? 'inline-block' : _a$display,
          active = _a.active,
          props = __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 createElement(StyledPopOver, Object.assign({
        className: classNames('anchor-pop-over', className),
        display: display$$1
      }, props, {
        ref: this.popOverRef
      }), children, createElement(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;
}(PureComponent);

export { PopOver };
//# sourceMappingURL=popover.js.map