@helpscout/hsds-react/components/Drop/Drop.Positioner.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _EventListener = _interopRequireDefault(require("../EventListener"));

var _classnames = _interopRequireDefault(require("classnames"));

var _node = require("../../utilities/node");

var _Drop = require("./Drop.utils");

var _Drop2 = require("./Drop.css");

var _jsxRuntime = require("react/jsx-runtime");

/* istanbul ignore file */

/**
 ***DEPRECATED COMPONENT***
 ***DEPRECATED COMPONENT***
 ***DEPRECATED COMPONENT***

  Use Pop instead
 */
var DropPositioner = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(DropPositioner, _React$PureComponent);

  function DropPositioner(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.position = void 0;
    _this.node = void 0;
    _this.triggerNode = void 0;
    _this.contentNode = void 0;
    _this.state = {
      direction: props.direction ? (0, _Drop.getDirections)(props.direction) : (0, _Drop.getDirections)()
    };
    _this.position = null;
    _this.node = null;
    _this.contentNode = null;
    _this.updatePosition = _this.updatePosition.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  var _proto = DropPositioner.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.setTriggerNode();
    this.updatePosition();
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.position !== this.position) {
      this.updatePosition(nextProps.position);
    }
  };

  _proto.setTriggerNode = function setTriggerNode() {
    var trigger = this.props.trigger;

    if (!this.triggerNode) {
      this.triggerNode = (0, _node.isNodeElement)(trigger) ? trigger : _reactDom.default.findDOMNode(trigger);
    }
  };

  _proto.getPosition = function getPosition() {
    var _this$props = this.props,
        direction = _this$props.direction,
        offset = _this$props.offset;
    if (!this.triggerNode || !this.contentNode) return false; // the getOptimalViewportPosition method is tested.
    // However, I'm unable to test it with this component due to the difficulty
    // of setting up Enzyme to recognize the triggerNode

    return (0, _Drop.getViewportPosition)({
      triggerNode: this.triggerNode,
      contentNode: this.contentNode,
      offset: offset,
      direction: (0, _Drop.getDirections)(direction)
    });
  };

  _proto.updatePosition = function updatePosition(newPosition) {
    var _this$props2 = this.props,
        autoPosition = _this$props2.autoPosition,
        onUpdatePosition = _this$props2.onUpdatePosition,
        position = _this$props2.position,
        zIndex = _this$props2.zIndex;
    if (!autoPosition) return;
    var pos = newPosition || position || this.getPosition();
    if (!pos) return; // Cannot test transform style in JSDOM :'(
    // https://github.com/chad3814/CSSStyleDeclaration/pull/49

    var nodeStyles = {
      display: pos.offsetTop !== undefined ? 'block' : 'none',
      transform: "translate(" + pos.left + "px, " + pos.top + "px)",
      zIndex: zIndex
    };

    if (this.direction !== pos.direction) {
      this.setState({
        direction: pos.direction
      });
    }

    this.position = pos;
    (0, _Drop.applyStylesToNode)(this.node, nodeStyles);
    onUpdatePosition(pos);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props3 = this.props,
        autoPosition = _this$props3.autoPosition,
        className = _this$props3.className,
        children = _this$props3.children,
        offset = _this$props3.offset,
        onUpdatePosition = _this$props3.onUpdatePosition,
        position = _this$props3.position,
        trigger = _this$props3.trigger,
        zIndex = _this$props3.zIndex,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["autoPosition", "className", "children", "offset", "onUpdatePosition", "position", "trigger", "zIndex"]);
    var direction = this.state.direction;
    var componentClassName = (0, _classnames.default)('c-DropPositioner', // Tested, but istanbul is not picking it up
    direction.x && "is-" + direction.x, direction.y && "is-" + direction.y, className);
    var updatePosition = this.updatePosition;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Drop2.DropUI, (0, _extends2.default)({
      className: componentClassName,
      ref: function ref(node) {
        _this2.node = node;
      }
    }, (0, _getValidProps.default)(rest), {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EventListener.default, {
        event: "resize",
        handler: function handler() {
          return updatePosition();
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drop2.DropContentUI, {
        className: "c-DropPositioner__content",
        ref: function ref(node) {
          _this2.contentNode = node;
        },
        children: children
      })]
    }));
  };

  return DropPositioner;
}(_react.default.PureComponent);

DropPositioner.propTypes = {
  className: _propTypes.default.string,
  autoPosition: _propTypes.default.bool,
  direction: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  offset: _propTypes.default.number,
  onUpdatePosition: _propTypes.default.func,
  position: _propTypes.default.shape({
    direction: _propTypes.default.shape({
      x: _propTypes.default.oneOf(['left', 'right', '']),
      y: _propTypes.default.oneOf(['up', 'down'])
    }),
    left: _propTypes.default.number,
    offsetTop: _propTypes.default.number,
    top: _propTypes.default.number
  }),
  trigger: _propTypes.default.any,
  zIndex: _propTypes.default.number
};

function noop() {}

DropPositioner.defaultProps = {
  autoPosition: true,
  'data-cy': 'DropPositioner',
  direction: 'down',
  offset: 8,
  onUpdatePosition: noop,
  zIndex: 1000
};
var _default = DropPositioner;
exports.default = _default;