@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
75 lines (74 loc) • 4.65 kB
JavaScript
;
//******************************************************************************************************
// LayoutGrid.tsx - Gbtc
//
// Copyright (c) 2020, 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:
// ----------------------------------------------------------------------------------------------------
// 06/10/2024 - Collins Self
// Generated original version of source code.
//
//******************************************************************************************************
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var LayoutGrid = function (props) {
var _a = react_1.default.useState([]), rows = _a[0], setRows = _a[1];
var totalNumOfItems = react_1.default.Children.count(props.children);
react_1.default.useEffect(function () {
var rowsOnGrid = [];
var lowestSquare = Math.floor(Math.sqrt(totalNumOfItems));
var numOfRows = lowestSquare; // Default values assumes a perfect square grid
var rowsNeedingExtraItems = totalNumOfItems - Math.pow(lowestSquare, 2); // Will add these overflow items to beginning rows 1:1
if (props.ColMax !== undefined && props.ColMax <= lowestSquare) {
rowsNeedingExtraItems = 0;
var itemsInRow = props.ColMax;
numOfRows = Math.ceil(totalNumOfItems / itemsInRow);
}
// Checks if items would overfill the perfect square grid plus another row, then adds that row if needed
if (totalNumOfItems >= Math.pow(lowestSquare, 2) + lowestSquare) {
rowsNeedingExtraItems -= lowestSquare; // "extra" items taken from final cols
numOfRows = lowestSquare + 1; // moving "extras" to another row
}
// Create rows, balanced with extra items
var numOfItemsRemaining = totalNumOfItems;
for (var i = 0; i < rowsNeedingExtraItems && numOfItemsRemaining >= 0; ++i) {
var itemsInRow = lowestSquare + 1; // adding "extras" to another col
var row = { StartIndex: totalNumOfItems - numOfItemsRemaining, NumOfCols: itemsInRow };
numOfItemsRemaining -= itemsInRow;
rowsOnGrid.push(row); // push a row onto array with appropriate number of items
}
for (var i = 0; i < numOfRows - rowsNeedingExtraItems && numOfItemsRemaining >= 0; ++i) {
var itemsInRow = lowestSquare === props.ColMax ? props.ColMax : lowestSquare;
var row = { StartIndex: totalNumOfItems - numOfItemsRemaining, NumOfCols: Math.min(numOfItemsRemaining, itemsInRow) };
numOfItemsRemaining -= itemsInRow;
rowsOnGrid.push(row); // push a row onto array with appropriate number of items
}
setRows(rowsOnGrid);
}, [totalNumOfItems, props.ColMax]);
function generateColumns(currentRow) {
var ItemDivs = [];
for (var i = 0; i < currentRow.NumOfCols; ++i) {
var padding = i === 0 ? 'pl-1 pr-1' : 'pr-1 pl-0';
var ItemDiv = react_1.default.createElement("div", { key: i, className: 'col ' + padding, style: { height: '100%', width: "".concat(100 / currentRow.NumOfCols, "%") } }, react_1.default.Children.toArray(props.children)[currentRow.StartIndex + i]);
ItemDivs.push(ItemDiv);
}
return ItemDivs;
}
return (react_1.default.createElement("div", { className: 'container-fluid p-0 h-100', style: { overflowY: 'auto' } }, rows.map(function (row, i) { return (react_1.default.createElement("div", { key: i, className: 'row pb-1 m-0', style: { height: "".concat(100 / Math.min(rows.length, props.RowsPerPage), "%") } }, generateColumns(row))); })));
};
exports.default = LayoutGrid;