rc-hooks/lib/useLimitList/index.js

React Hooks Library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var ut2_1 = require("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 = tslib_1.__read((0, react_1.useState)(defaultLimited), 2), limited = _d[0], setLimited = _d[1];
    var data = (0, react_1.useMemo)(function () {
        if ((0, ut2_1.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: (0, ut2_1.isArray)(list) && list.length > count,
        /**
         * 限制列表后的数据。
         */
        data: data,
        /**
         * 切换限制列表数据。
         */
        toggle: toggle
    };
}
exports.default = useLimitList;