@vnmfify/core/list/list.js

```shell npm i @vnmfify/core -S ```

var _excluded = ["className", "loading", "hasMore", "direction", "offset", "children", "scrollTop", "onLoad", "onLoading"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { useGetter, useToRef } from "@vnmfify/hooks";
import { View } from "@vnxjs/components";
import { nextTick } from "@vnxjs/vnmf";
import classNames from "classnames";
import * as React from "react";
import { useCallback, useEffect, useMemo, useRef } from "react";
import { useMounted } from "../hooks";
import { prefixClassname } from "../styles";
import { getRect } from "../utils/dom/rect";
import { getScrollParent } from "../utils/dom/scroll";

function useAssignLoading(state) {
  var getState = useGetter(state);
  var value = getState();
  var valueRef = useRef();

  if (valueRef.current !== value) {
    valueRef.current = value;
  }

  var isLoading = useCallback(() => valueRef.current, []);
  var setLoading = useCallback(newValue => valueRef.current = newValue, []);
  return useMemo(() => ({
    isLoading,
    setLoading
  }), [isLoading, setLoading]);
}

function List(props) {
  var {
    className,
    loading: loadingProp = false,
    hasMore: hasMoreProp = true,
    direction = "down",
    offset = 300,
    children,
    scrollTop,
    onLoad,
    onLoading
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var rootRef = useRef();
  var edgeRef = useRef();
  var onLoadingRef = useToRef(onLoading);
  var onLoadRef = useToRef(onLoad);
  var {
    isLoading,
    setLoading
  } = useAssignLoading(loadingProp);
  var isHasMore = useGetter(hasMoreProp);
  var loadCheck = useCallback(() => nextTick( /*#__PURE__*/_asyncToGenerator(function* () {
    if (isLoading() || !isHasMore()) {
      return;
    }

    var scrollParent = yield getScrollParent(rootRef);
    var scrollParentRect = yield getRect(scrollParent);

    if (!scrollParentRect.height) {
      return;
    }

    var isReachEdge;
    var edgeRect = yield getRect(edgeRef);

    if (direction === "up") {
      isReachEdge = scrollParentRect.top - edgeRect.top <= offset;
    } else {
      isReachEdge = edgeRect.bottom - scrollParentRect.bottom <= offset;
    }

    if (isReachEdge && !isLoading()) {
      var _onLoadingRef$current, _onLoadRef$current;

      setLoading(true);
      (_onLoadingRef$current = onLoadingRef.current) === null || _onLoadingRef$current === void 0 ? void 0 : _onLoadingRef$current.call(onLoadingRef, true);
      (_onLoadRef$current = onLoadRef.current) === null || _onLoadRef$current === void 0 ? void 0 : _onLoadRef$current.call(onLoadRef);
    }
  })), [direction, isHasMore, isLoading, offset, onLoadRef, onLoadingRef, setLoading]);
  useMounted(loadCheck);
  useEffect(loadCheck, [isLoading(), isHasMore(), loadCheck, scrollTop, children]);
  var listEdge = useMemo(() => /*#__PURE__*/React.createElement(View, {
    ref: edgeRef,
    className: prefixClassname("list__edge")
  }), []);
  return /*#__PURE__*/React.createElement(View, _objectSpread({
    ref: rootRef,
    className: classNames(prefixClassname("list"), className)
  }, restProps), direction === "down" ? children : listEdge, direction === "up" ? children : listEdge);
}

export default List;
//# sourceMappingURL=list.js.map