react-misc-toolbox/dist/DetectCollision.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDetectCollision = undefined;

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var element = void 0;

var useDetectCollision = function useDetectCollision(props) {
  var debugOn = props.debugOn,
      containerRef = props.containerRef,
      containerElement = props.containerElement,
      _props$onEntered = props.onEntered,
      onEntered = _props$onEntered === undefined ? function () {
    return null;
  } : _props$onEntered,
      _props$onExited = props.onExited,
      onExited = _props$onExited === undefined ? function () {
    return null;
  } : _props$onExited,
      _props$isLocked = props.isLocked,
      isLocked = _props$isLocked === undefined ? false : _props$isLocked,
      _props$leeway = props.leeway,
      leeway = _props$leeway === undefined ? 200 : _props$leeway;

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    hasHitBottom: false
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var hasHitBottom = state.hasHitBottom;

  var prevHasHitBottom = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    prevHasHitBottom.current = hasHitBottom;
  });

  var handleScroll = function handleScroll() {
    if (!element) {
      element = containerRef ? containerRef.current : containerElement;
    }
    var scrollHeight = document.body.scrollHeight;

    var _element$getBoundingC = element.getBoundingClientRect(),
        rectTop = _element$getBoundingC.top,
        rectHeight = _element$getBoundingC.height;

    debugOn && console.log(props, state, prevHasHitBottom.current, 'scrollHeight: ' + scrollHeight, 'rectTop: ' + rectTop, 'rectHeight: ' + rectHeight, 'window.scrollY: ' + window.scrollY, 'leeway: ' + leeway, 'isLocked: ' + isLocked, 'sum: ' + (rectTop + rectHeight + window.scrollY));

    if (!isLocked) {
      if (scrollHeight >= rectTop + window.scrollY + rectHeight + leeway) {
        prevHasHitBottom.current === true && onExited && onExited();
        setState({ hasHitBottom: false });
      } else {
        setState({ hasHitBottom: true });
        prevHasHitBottom.current === false && onEntered && onEntered();
      }
    }
  };
  (0, _react.useEffect)(function () {
    typeof window !== 'undefined' && window.addEventListener('scroll', handleScroll);

    return function () {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return state;
};

var DetectCollision = function DetectCollision(_ref) {
  var children = _ref.children,
      props = (0, _objectWithoutProperties3.default)(_ref, ['children']);
  return children(useDetectCollision(props));
};

DetectCollision.propTypes = {
  debugOn: _propTypes2.default.bool,
  onEntered: _propTypes2.default.func,
  onExited: _propTypes2.default.func,
  isLocked: _propTypes2.default.bool,
  leeway: _propTypes2.default.number
};

exports.useDetectCollision = useDetectCollision;
exports.default = DetectCollision;