@helpscout/hsds-react/components/Page/Page.StickyActions.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 _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 _Page = require("./Page.utils");

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

function noop() {}

var PageStickyActions = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(PageStickyActions, _React$PureComponent);

  function PageStickyActions() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.node = null;
    _this.observer = null;
    _this.state = {
      isSticky: true
    };

    _this.handleOnIntersect = function (changes) {
      var intersectionRatio = changes[0].intersectionRatio;
      var isSticky = intersectionRatio !== 1;

      _this.updateSticky(isSticky);
    };

    _this.updateSticky = function (isSticky) {
      var _this$props = _this.props,
          onStickyStart = _this$props.onStickyStart,
          onStickyEnd = _this$props.onStickyEnd;

      if (_this.state.isSticky !== isSticky) {
        _this.setState({
          isSticky: isSticky
        });

        isSticky ? onStickyStart(_this.node) : onStickyEnd(_this.node);
      }
    };

    _this.setNodeRef = function (node) {
      _this.node = node;

      _this.props.innerRef(node);
    };

    return _this;
  }

  var _proto = PageStickyActions.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.observerStart();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.observerStop();
  };

  _proto.observerStart = function observerStart() {
    if (!(0, _Page.isIntersectionObserverSupported)()) return;
    var offset = this.props.offset;
    var observerOptions = {
      root: null,
      rootMargin: "0px 0px " + offset * -1 + "px 0px",
      threshold: 1.0
    };
    this.observer = new IntersectionObserver(this.handleOnIntersect, observerOptions);
    this.observer.observe(this.node);
  };

  _proto.observerStop = function observerStop() {
    if (!(0, _Page.isIntersectionObserverSupported)()) return;
    this.observer.unobserve(this.node);
    this.observer.disconnect();
  };

  _proto.render = function render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, (0, _getValidProps.default)(this.props), {
      ref: this.setNodeRef,
      children: this.props.children
    }));
  };

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

PageStickyActions.className = 'c-PageStickyActions';
PageStickyActions.defaultProps = {
  'data-cy': 'PageStickyActions',
  innerRef: noop,
  offset: 10,
  onStickyStart: noop,
  onStickyEnd: noop
};
PageStickyActions.propTypes = {
  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Node of the component */
  innerRef: _propTypes.default.func,

  /** The amount of pixels the stickyness should start */
  offset: _propTypes.default.number,

  /** Callback when the sticky behaviour starts */
  onStickyStart: _propTypes.default.func,

  /** Callback when the sticky behaviour ends */
  onStickyEnd: _propTypes.default.func
};
var _default = PageStickyActions;
exports.default = _default;