@onesy/ui-react/useScroll/useScroll.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
const useScroll = props => {
  const {
    offset,
    direction,
    element,
    target
  } = props;
  const [response, setResponse] = _react.default.useState(false);
  const [root, setRoot] = _react.default.useState();
  const refs = {
    root: _react.default.useRef(root),
    previous: _react.default.useRef(0),
    offset: _react.default.useRef(null),
    direction: _react.default.useRef(null),
    response: _react.default.useRef(response)
  };
  refs.root.current = root;
  refs.offset.current = offset;
  refs.direction.current = direction;
  refs.response.current = response;

  // Root
  _react.default.useEffect(() => {
    var _element$ownerDocumen;
    const rootNew = target || (element === null || element === void 0 || (_element$ownerDocumen = element.ownerDocument) === null || _element$ownerDocumen === void 0 ? void 0 : _element$ownerDocumen.defaultView) || window;
    setRoot(rootNew);
    refs.root.current = rootNew;
  }, [target, element]);
  const method = () => {
    var _refs$root$current, _refs$root$current2;
    if (!refs.root.current) return;
    const value = ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.scrollTop) !== undefined ? refs.root.current.scrollTop : (_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.scrollY;
    let responseNew = true;

    // Direction
    if (refs.direction.current !== undefined) responseNew = responseNew && (refs.direction.current === 'down' && value > refs.previous.current || refs.direction.current === 'up' && value < refs.previous.current);

    // Offset
    if (refs.offset.current !== undefined) responseNew = responseNew && value > refs.offset.current;
    if (refs.response.current !== responseNew) setResponse(responseNew);

    // Previous
    refs.previous.current = value;
  };
  _react.default.useEffect(() => {
    // Add new event listener
    if (root) root.addEventListener('scroll', method);
    method();
    return () => {
      // Remove previous event listener
      if (root) root.removeEventListener('scroll', method);
    };
  }, [root]);
  return response;
};
useScroll.displayName = 'onesy-UseScroll';
var _default = exports.default = useScroll;