@gpa-gemstone/react-table
Version:
Table for GPA web applications
119 lines (118 loc) • 7.27 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// ******************************************************************************************************
// Paging.tsx - Gbtc
//
// Copyright © 2023, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 08/01/2023 - C. Lackner
// Generated original version of source code.
//
// ******************************************************************************************************
const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
const helper_functions_1 = require("@gpa-gemstone/helper-functions");
const React = require("react");
const defaultMaxPagesToShow = 7;
const Paging = (props) => {
const containerRef = React.useRef(null);
const { scrollWidth, width } = (0, helper_functions_1.useGetContainerPosition)(containerRef);
const [pagesToShow, setPagesToShow] = React.useState([]);
const [maxPagesToShow, setMaxPagesToShow] = React.useState(defaultMaxPagesToShow);
const minPageToShow = React.useMemo(() => {
const min = Math.min(...pagesToShow);
if (!isFinite(min) || isNaN(min))
return 0;
return min;
}, [pagesToShow]);
const maxPageToShow = React.useMemo(() => {
const max = Math.max(...pagesToShow);
if (!isFinite(max) || isNaN(max))
return 0;
return max;
}, [pagesToShow]);
React.useEffect(() => {
const newPagesToShow = [];
let startPage = Math.max(props.Current - Math.floor(maxPagesToShow / 2), 1);
if (props.Total - startPage < maxPagesToShow)
startPage = Math.max(props.Total - maxPagesToShow + 1, 1);
while (startPage <= props.Total && newPagesToShow.length < maxPagesToShow) {
newPagesToShow.push(startPage);
startPage = startPage + 1;
}
setPagesToShow(newPagesToShow);
}, [props.Total, props.Current, width, scrollWidth, maxPagesToShow]);
//Effect to decrement maxPagesToShow if we are overflowing
React.useLayoutEffect(() => {
if (scrollWidth > width)
setMaxPagesToShow(prev => Math.max(prev - 1, 1));
}, [width, scrollWidth]);
//Effect to increment maxPagesToShow if we have enough space
React.useLayoutEffect(() => {
if (maxPagesToShow >= defaultMaxPagesToShow || containerRef.current == null)
return;
const childArray = Array.from(containerRef.current.children);
// Sum widths of all <li> elements
const trueWidth = childArray.reduce((sum, child) => sum + child.offsetWidth, 0);
const availableWidth = width - trueWidth;
const estimatedButtonWidthWithTolerance = 50;
if (availableWidth >= estimatedButtonWidthWithTolerance)
setMaxPagesToShow(prev => Math.min(defaultMaxPagesToShow, prev + 1));
}, [width, maxPagesToShow]);
const showLeftBlock = maxPagesToShow < defaultMaxPagesToShow
? minPageToShow !== 1
: minPageToShow > 2;
const showRightBlock = maxPagesToShow < defaultMaxPagesToShow
? maxPageToShow !== props.Total
: maxPageToShow + 2 <= props.Total;
return (React.createElement("ul", { className: "pagination justify-content-center", ref: containerRef },
React.createElement("li", { className: "page-item" + (minPageToShow <= 1 ? ' disabled' : ""), key: "previous", style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => {
if (minPageToShow > 1)
props.SetPage(Math.max(props.Current - defaultMaxPagesToShow, 1));
} },
React.createElement(gpa_symbols_1.ReactIcons.DoubleChevronLeft, { Size: 15 }))),
React.createElement("li", { className: "page-item" + (props.Current <= 1 ? ' disabled' : ""), key: "step-previous", style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => {
if (props.Current > 1)
props.SetPage(props.Current - 1);
} },
React.createElement(gpa_symbols_1.ReactIcons.ChevronLeft, { Size: 15 }))),
showLeftBlock ? React.createElement(React.Fragment, null,
React.createElement("li", { className: "page-item", key: "1", style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => props.SetPage(1) }, "1")),
React.createElement("li", { className: "page-item disabled", key: "skip-1" },
React.createElement("a", { className: "page-link" }, "..."))) : null,
pagesToShow.map((p) => React.createElement("li", { className: "page-item" + (p == props.Current ? " active" : ""), key: p, style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => props.SetPage(p) }, p))),
showRightBlock ? React.createElement(React.Fragment, null,
React.createElement("li", { className: "page-item disabled", key: "skip-2" },
React.createElement("a", { className: "page-link" }, "...")),
React.createElement("li", { className: "page-item", key: props.Total, style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => props.SetPage(props.Total) }, props.Total))) : null,
React.createElement("li", { className: "page-item" + (props.Current >= props.Total ? ' disabled' : ""), key: "step-next", style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => {
if (props.Current < props.Total)
props.SetPage(props.Current + 1);
} },
React.createElement(gpa_symbols_1.ReactIcons.ChevronRight, { Size: 15 }))),
React.createElement("li", { className: "page-item" + (maxPageToShow == props.Total ? ' disabled' : ""), key: 'next', style: { cursor: 'pointer' } },
React.createElement("a", { className: "page-link", onClick: () => {
if (maxPageToShow < props.Total)
props.SetPage(Math.min(props.Current + defaultMaxPagesToShow, props.Total));
} },
React.createElement(gpa_symbols_1.ReactIcons.DoubleChevronRight, { Size: 15 })))));
};
exports.default = Paging;