rc-hooks/es/useLimitList/index.js

React Hooks Library.

import { __read } from "tslib";
import { useEffect, useMemo, useRef, useState } from 'react';
import { isArray } from 'ut2';
/**
 * 管理列表展示数量的 Hook。
 *
 * @param {Array} list 列表数据。
 * @param {Object} [options] 配置项。
 * @param {number} [options.count=3] 默认限制列表数量。默认 `3`。
 * @param {boolean} [options.defaultLimited=true] 默认是否限制列表数据。默认 `true`。
 * @returns
 * @example
 * const { data, limited, canLimit, toggle } = useLimitList(list);
 */
function useLimitList(list, options) {
    if (list === void 0) { list = []; }
    if (options === void 0) { options = {}; }
    var _a = options || {}, _b = _a.count, count = _b === void 0 ? 3 : _b, _c = _a.defaultLimited, defaultLimited = _c === void 0 ? true : _c;
    var limitedRef = useRef(defaultLimited);
    var safeList = useMemo(function () { return (isArray(list) ? list : []); }, [list]);
    var safeCount = useMemo(function () { return (count > 0 ? Math.ceil(count) : 0); }, [count]);
    // 是否可以限制数量
    var canLimit = useMemo(function () { return safeList.length > safeCount; }, [safeCount, safeList.length]);
    // 限制后的值
    var _d = __read(useState(function () {
        if (canLimit && defaultLimited) {
            return safeList.slice(0, safeCount);
        }
        return safeList;
    }), 2), data = _d[0], setData = _d[1];
    // 切换限制/不限制数量
    var toggle = function () {
        if (canLimit) {
            limitedRef.current = !limitedRef.current;
        }
        setData(limitedRef.current ? safeList.slice(0, safeCount) : safeList);
    };
    // 修改 list 或 count 后，触发更新
    useEffect(function () {
        setData(limitedRef.current ? safeList.slice(0, safeCount) : safeList);
    }, [safeCount, safeList]);
    return {
        /**
         * 是否可以限制列表数量。当列表数量小于等于 `count` 时，为 `false`。
         */
        canLimit: canLimit,
        /**
         * 当前是否限制列表数据。
         */
        limited: limitedRef.current,
        /**
         * 列表数据。
         */
        data: data,
        /**
         * 切换限制列表数据。
         */
        toggle: toggle
    };
}
export default useLimitList;