@resourge/react-fetch/dist/components/refreshControl/RefreshControl.js

[](LICENSE)

/**
 * react-fetch v1.43.1
 *
 * Copyright (c) resourge.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */
import { useRef, useEffect } from 'react';
import { useEffectEvent } from '../../hooks/useEffectEvent';
import { jsx } from 'react/jsx-runtime';

function getOverflowParent(element) {
  while (element && element !== document.body) {
    const overflowY = window.getComputedStyle(element).overflowY;
    const overflowX = window.getComputedStyle(element).overflowX;
    if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') && element.scrollHeight > element.clientHeight || (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'hidden') && element.scrollWidth > element.clientWidth) {
      return element;
    }
    element = element.parentElement;
  }
  return null;
}
function RefreshControl({
  context,
  root = null,
  detectionMargin,
  renderComponent,
  preload,
  containerStyle
}) {
  const ref = useRef(null);
  const contextLoadMore = useEffectEvent(context.loadMore);
  const contextPreload = useEffectEvent(context.preload);
  useEffect(() => {
    if (ref.current) {
      var _ref;
      const _root = (_ref = root && root.current ? root.current : root) != null ? _ref : getOverflowParent(ref.current);
      const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
          if (preload) {
            contextPreload();
          } else {
            contextLoadMore();
          }
        }
      }, {
        root: _root,
        rootMargin: detectionMargin,
        threshold: 0
      });
      observer.observe(ref.current);
      return () => {
        observer.disconnect();
      };
    }
  }, [detectionMargin, context.data.length]);
  return jsx("div", {
    ref: ref,
    style: {
      ...containerStyle,
      height: (containerStyle == null ? void 0 : containerStyle.height) || '10px'
    },
    children: renderComponent && renderComponent({
      isLastIncomplete: context.isLastIncomplete,
      onClick: () => {
        contextLoadMore();
      }
    })
  });
}

export { RefreshControl as default };
//# sourceMappingURL=RefreshControl.js.map