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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _styled = require("./styled");
var _hooks = require("../../hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 = (0, _hooks.useTrackVisibility)({
      rootMargin: rootMargin
    }),
    _useTrackVisibility2 = (0, _slicedToArray2["default"])(_useTrackVisibility, 2),
    _ref3 = _useTrackVisibility2[0],
    isVisible = _useTrackVisibility2[1].isVisible;
  var innerRef = (0, _react.useRef)(null);
  var shouldLoadMore = _react["default"].useMemo(function () {
    return !disabled && !loading && isVisible && hasNextPage;
  }, [isVisible, hasNextPage, loading, disabled]);
  var onFinalVisible = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
    var r, pe, st, sh, ch;
    return _regenerator["default"].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
  (0, _react.useEffect)(function () {
    if (shouldLoadMore) {
      var timer = setTimeout(function () {
        onFinalVisible();
      }, delayInMs);
      return function () {
        clearTimeout(timer);
      };
    }
  }, [shouldLoadMore, delayInMs, onFinalVisible]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.EntryRoot, {
    ref: function ref(node) {
      _ref3(node);
      innerRef.current = node;
    },
    variant: variant,
    children: children
  });
};
var Entry = function Entry(props) {
  return props.hasNextPage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(EntryBase, Object.assign({}, props)) : null;
};
var _default = exports["default"] = Entry;