rc-hooks/es/useLimitList/index.js

React Hooks Library.

import { __read } from "tslib";
import { useMemo, 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 (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 _d = __read(useState(defaultLimited), 2), limited = _d[0], setLimited = _d[1];
    var data = useMemo(function () {
        if (isArray(list) && list.length > count) {
            return limited ? list.slice(0, count) : list;
        }
        return list || [];
    }, [limited, list, count]);
    var toggle = function () {
        setLimited(!limited);
    };
    return {
        /**
         * 当前是否限制列表数据。
         */
        limited: limited,
        /**
         * 是否可以限制列表数量。当列表数量小于等于 `count` 时，为 `false`。
         */
        canLimit: isArray(list) && list.length > count,
        /**
         * 限制列表后的数据。
         */
        data: data,
        /**
         * 切换限制列表数据。
         */
        toggle: toggle
    };
}
export default useLimitList;