@eccenca/gui-elements/dist/esm/components/Pagination/Pagination.js

GUI elements based on other libraries, usable in React application, written in Typescript.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useState } from "react";
import { Pagination as CarbonPagination } from "@carbon/react";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
export var Pagination = function (_a) {
    var className = _a.className, _b = _a.hidePageSizeConfiguration, hidePageSizeConfiguration = _b === void 0 ? false : _b, _c = _a.hideInfoText, hideInfoText = _c === void 0 ? false : _c, _d = _a.hidePageSelect, hidePageSelect = _d === void 0 ? false : _d, _e = _a.hideNavigationArrows, hideNavigationArrows = _e === void 0 ? false : _e, _f = _a.hideBorders, hideBorders = _f === void 0 ? false : _f, otherProps = __rest(_a, ["className", "hidePageSizeConfiguration", "hideInfoText", "hidePageSelect", "hideNavigationArrows", "hideBorders"]);
    return (React.createElement(CarbonPagination, __assign({}, otherProps, { className: "".concat(eccgui, "-pagination") +
            (className ? " " + className : "") +
            (hidePageSizeConfiguration ? " ".concat(eccgui, "-pagination--hidepagesize") : "") +
            (hideInfoText ? " ".concat(eccgui, "-pagination--hideinfotext") : "") +
            (hidePageSelect ? " ".concat(eccgui, "-pagination--hidepageselect") : "") +
            (hideNavigationArrows ? " ".concat(eccgui, "-pagination--hidenavigation") : "") +
            (hideBorders ? " ".concat(eccgui, "-pagination--hideborders") : "") })));
};
// Custom hook to add pagination. Currently only use-cases are supported where paging has no further side effects, e.g. REST calls.
export var usePagination = function (_a) {
    var _b = _a.pageSizes, pageSizes = _b === void 0 ? [5, 10, 25, 50] : _b, _c = _a.presentation, presentation = _c === void 0 ? {} : _c, initialPageSize = _a.initialPageSize;
    var minSize = Math.min.apply(Math, __spreadArray([], __read(pageSizes), false));
    var _pagination = React.useRef({
        total: 0,
        current: 1,
        limit: initialPageSize ? initialPageSize : minSize,
        minPageSize: minSize,
    });
    var _d = __read(useState(_pagination.current), 2), pagination = _d[0], _setPagination = _d[1];
    var setPagination = React.useCallback(function (newPagination) {
        // Check if pagination has actually changed
        var current = _pagination.current;
        if (newPagination.current !== current.current ||
            newPagination.minPageSize !== current.minPageSize ||
            newPagination.limit !== current.limit ||
            newPagination.total !== current.total) {
            _pagination.current = newPagination;
            _setPagination(newPagination);
        }
    }, []);
    var onPaginationChange = React.useCallback(function (_a) {
        var page = _a.page, pageSize = _a.pageSize;
        setPagination(__assign(__assign({}, _pagination.current), { current: page, limit: pageSize }));
    }, [setPagination]);
    // When the total number of pageable items changes, this function must be called
    var onTotalChange = React.useCallback(function (total) {
        if (_pagination.current.total !== total) {
            setPagination(__assign(__assign({}, _pagination.current), { total: total, current: 1 }));
        }
    }, [setPagination]);
    var paginationElement = (React.createElement(Pagination, __assign({ onChange: onPaginationChange, totalItems: pagination.total, pageSizes: pageSizes, page: pagination.current, pageSize: pagination.limit }, presentation)));
    return [pagination, paginationElement, onTotalChange];
};
export default Pagination;
//# sourceMappingURL=Pagination.js.map