@wulperstudio/cms/modern/components/Entry/Entry.js

Wulper Studio Library Components CMS

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useCallback, useEffect, useRef } from 'react';
import { EntryRoot } from './styled';
import { useTrackVisibility } from '../../hooks';
import { jsx as _jsx } from "react/jsx-runtime";
var DEFAULT_DELAY_IN_MS = 250;
var EntryBase = function EntryBase(_ref) {
  var rootMargin = _ref.rootMargin,
    loading = _ref.loading,
    hasNextPage = _ref.hasNextPage,
    disabled = _ref.disabled,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'list' : _ref$variant,
    _ref$delayInMs = _ref.delayInMs,
    delayInMs = _ref$delayInMs === void 0 ? DEFAULT_DELAY_IN_MS : _ref$delayInMs,
    onVisible = _ref.onVisible,
    children = _ref.children;
  var _useTrackVisibility = useTrackVisibility({
      rootMargin: rootMargin
    }),
    _useTrackVisibility2 = _slicedToArray(_useTrackVisibility, 2),
    _ref3 = _useTrackVisibility2[0],
    isVisible = _useTrackVisibility2[1].isVisible;
  var innerRef = useRef(null);
  var shouldLoadMore = React.useMemo(function () {
    return !disabled && !loading && isVisible && hasNextPage;
  }, [isVisible, hasNextPage, loading, disabled]);
  var onFinalVisible = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var r, pe, st, sh, ch;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          onVisible == null || onVisible();

          // prevent scroll to top
          r = innerRef == null ? void 0 : innerRef.current;
          pe = r == null ? void 0 : r.parentElement;
          st = pe == null ? void 0 : pe.scrollTop;
          sh = pe == null ? void 0 : pe.scrollHeight;
          ch = pe == null ? void 0 : pe.clientHeight;
          if (r && pe && sh && ch && st) {
            pe.scroll({
              top: st * 0.8,
              behavior: 'smooth'
            });
          }
        case 7:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })), [onVisible]);

  // eslint-disable-next-line consistent-return
  useEffect(function () {
    if (shouldLoadMore) {
      var timer = setTimeout(function () {
        onFinalVisible();
      }, delayInMs);
      return function () {
        clearTimeout(timer);
      };
    }
  }, [shouldLoadMore, delayInMs, onFinalVisible]);
  return /*#__PURE__*/_jsx(EntryRoot, {
    ref: function ref(node) {
      _ref3(node);
      innerRef.current = node;
    },
    variant: variant,
    children: children
  });
};
var Entry = function Entry(props) {
  return props.hasNextPage ? /*#__PURE__*/_jsx(EntryBase, Object.assign({}, props)) : null;
};
export default Entry;