@helpscout/hsds-react/components/ScrollLock/ScrollLock.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.ScrollLock = 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 _reactDom = _interopRequireDefault(require("react-dom"));

var _ScrollLock = require("./ScrollLock.utils");

function isSafari() {
  if (!navigator) return false;
  var ua = navigator.userAgent.toLowerCase();
  return !ua.includes('chrome') && ua.includes('safari');
}

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

  function ScrollLock() {
    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.handleWheelEvent = function (event) {
      var _this$props = _this.props,
          direction = _this$props.direction,
          isDisabled = _this$props.isDisabled,
          onWheel = _this$props.onWheel,
          stopPropagation = _this$props.stopPropagation;
      onWheel(event);
      if (isDisabled) return;
      (0, _ScrollLock.handleWheelEvent)(event, direction, stopPropagation);
    };

    return _this;
  }

  var _proto = ScrollLock.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (isSafari() && this.canRender()) {
      this.node = _reactDom.default.findDOMNode(this);

      if (this.node) {
        this.node.addEventListener('wheel', this.handleWheelEvent);
      }
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (isSafari() && this.node) {
      this.node.removeEventListener('wheel', this.handleWheelEvent);
    }
  };

  _proto.canRender = function canRender() {
    return !!this.props.children;
  };

  _proto.render = function render() {
    if (!this.canRender()) return null;
    var _this$props2 = this.props,
        direction = _this$props2.direction,
        isDisabled = _this$props2.isDisabled;

    var child = _react.default.Children.only(this.props.children);

    if (child && !isDisabled) {
      var style = child.props.style || {};
      var overscrollStyles = {
        overscrollBehaviorY: direction === 'y' ? 'contain' : 'auto',
        overscrollBehaviorX: direction === 'x' ? 'contain' : 'auto'
      };
      return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(this.props.children), {
        style: (0, _extends2.default)({}, overscrollStyles, style)
      });
    }

    return child;
  };

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

exports.ScrollLock = ScrollLock;

function noop() {}

ScrollLock.defaultProps = {
  isDisabled: false,
  direction: 'y',
  stopPropagation: false,
  onWheel: noop
};
ScrollLock.propTypes = {
  children: _propTypes.default.any,

  /** Disable the scroll locking behaviour, making the component a no-op. */
  isDisabled: _propTypes.default.bool,

  /** Determines the scroll lock direction. */
  direction: _propTypes.default.oneOf(['x', 'y']),

  /** Fires `event.stopPropagation()`. */
  stopPropagation: _propTypes.default.bool,

  /** Callback function when component is scrolled */
  onWheel: _propTypes.default.func
};
var _default = ScrollLock;
exports.default = _default;