vtils/react/useLoadMore.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

import { useCallback, useEffect, useRef, useState } from 'react';
import { useLatest } from 'react-use';

/**
 * 加载服务载荷。
 *
 * @public
 */

/**
 * 加载服务结果。
 *
 * @public
 */

/**
 * 加载服务。
 *
 * @public
 */

/**
 * 加载更多结果。
 *
 * @public
 */

/**
 * 数据加载。
 *
 * @public
 * @param service 数据加载服务
 * @param deps 依赖若发生变化则从首页重新加载数据
 * @returns 返回结果
 */
export function useLoadMore(service, deps) {
  var _useState = useState([]),
    data = _useState[0],
    setData = _useState[1];
  var _useState2 = useState(1),
    pageNumber = _useState2[0],
    setPageNumber = _useState2[1];
  var _useState3 = useState(true),
    initialLoading = _useState3[0],
    setInitialLoading = _useState3[1];
  var _useState4 = useState(false),
    incrementalLoading = _useState4[0],
    setIncrementalLoading = _useState4[1];
  var loading = initialLoading || incrementalLoading;
  var _useState5 = useState(false),
    noMore = _useState5[0],
    setNoMore = _useState5[1];
  var _useState6 = useState(0),
    total = _useState6[0],
    setTotal = _useState6[1];
  var firstRef = useRef(true);
  var latest = useLatest({
    service: service,
    data: data,
    loading: loading,
    pageNumber: pageNumber,
    noMore: noMore
  });
  var load = useCallback(function (nextPageNumber) {
    return new Promise(function (resolve, reject) {
      var _latest$current = latest.current,
        data = _latest$current.data,
        service = _latest$current.service;
      var isFirstPage = nextPageNumber === 1;
      if (isFirstPage) {
        setData([]);
      }
      setInitialLoading(isFirstPage);
      setIncrementalLoading(!isFirstPage);
      setPageNumber(nextPageNumber);
      service({
        offset: data.length,
        pageNumber: nextPageNumber
      }).then(function (res) {
        setInitialLoading(false);
        setIncrementalLoading(false);
        if (Array.isArray(res)) {
          setNoMore(res.length === 0);
          setData(isFirstPage ? res : [].concat(data, res));
        } else {
          setTotal(res.total);
          var pageData = res.data || res.list || [];
          setNoMore((isFirstPage ? 0 : data.length) + pageData.length >= res.total);
          setData(isFirstPage ? pageData : [].concat(data, pageData));
        }
        resolve();
      }).catch(reject);
    });
  }, []);
  var loadMore = useCallback(function () {
    var _latest$current2 = latest.current,
      noMore = _latest$current2.noMore,
      loading = _latest$current2.loading,
      pageNumber = _latest$current2.pageNumber;
    if (!noMore && !loading) {
      return load(pageNumber + 1);
    }
    return Promise.resolve();
  }, []);
  var reload = useCallback(function () {
    var loading = latest.current.loading;
    if (firstRef.current || !loading) {
      firstRef.current = false;
      return load(1);
    }
    return Promise.resolve();
  }, []);
  useEffect(function () {
    reload();
  }, deps);
  return {
    pageNumber: pageNumber,
    data: data,
    total: total,
    loading: loading,
    initialLoading: initialLoading,
    incrementalLoading: incrementalLoading,
    noMore: noMore,
    loadMore: loadMore,
    reload: reload,
    setData: setData
  };
}