flex-area-grid
Version:
108 lines • 4.63 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTableCol = exports.getTableRows = void 0;
var react_1 = __importDefault(require("react"));
var lodash_es_1 = require("lodash-es");
var flexGris_styles_1 = require("./flexGris.styles");
var utils_1 = require("./utils");
/**
* Generates the table rows.
* @param {TMatrix[][]} matrix - Generated grid matrix.
* @param {FunctionComponentElement<TFlexGridItem>[]} children - The grid elements.
* @param {number} gridRowGap
* @param {TFlexAlign} cellAlign
* @param {TFlexJustify} cellJustify
* @param {number | undefined} cellHeight
* @return {JSX.Element[]} - Returns table rows.
*/
function getTableRows(matrix, children, gridRowGap, cellAlign, cellJustify, cellHeight) {
var rows = [];
for (var row = 0; row < matrix.length; row++) {
var rowItems = [];
for (var column = 0; column < matrix[0].length; column++) {
var item = matrix[row][column];
if (item) {
var child = children[item.itemIndex];
var props = {
align: cellAlign,
justify: cellJustify,
};
if (!lodash_es_1.isNil(cellHeight)) {
props.height = cellHeight;
}
if (!lodash_es_1.isNil(cellHeight) &&
utils_1.hasArea(child.props.startRow, child.props.startColumn, child.props.endRow, child.props.endColumn)) {
props.height =
(child.props.endRow -
child.props.startRow +
1) *
cellHeight +
(child.props.endRow -
child.props.startRow) *
gridRowGap;
}
var clonedChild = react_1.default.cloneElement(child, props);
rowItems.push(react_1.default.createElement("td", { key: "element_" + row + "_" + column, rowSpan: item.rows, colSpan: item.columns }, clonedChild));
}
else if (item === undefined) {
rowItems.push(react_1.default.createElement(flexGris_styles_1.TableDataFillHeightStyled, { key: "empty_cell_" + row + "_" + column },
react_1.default.createElement(flexGris_styles_1.EmptyBlockStyled, { height: cellHeight })));
}
}
rows.push(react_1.default.createElement("tr", { key: "row_" + row }, rowItems));
}
return rows;
}
exports.getTableRows = getTableRows;
/**
* Generates the table col.
* @param {number} columnsNumber - The number of grid columns.
* @param {number[] | undefined } columnsWidth - Width of each column.
* @return {JSX.Element[]} - Returns table cl.
*/
function getTableCol(columnsNumber, columnsWidth) {
var align = [];
var widthOfColumn = 100 / columnsNumber;
var totalWidth = 0;
var numberOfUndefined = 0;
var localColumnsWidth = null;
if (columnsWidth) {
localColumnsWidth = __spreadArray([], columnsWidth);
localColumnsWidth.length = columnsNumber;
for (var index = 0; index < localColumnsWidth.length; index++) {
var columnWidth = localColumnsWidth[index];
if (columnWidth === undefined ||
columnWidth < 0 ||
totalWidth + columnWidth > 100) {
localColumnsWidth[index] = undefined;
numberOfUndefined++;
continue;
}
totalWidth += columnWidth;
}
}
Array(columnsNumber)
.fill(0)
.forEach(function (value, index) {
var width = widthOfColumn;
if (localColumnsWidth) {
var columnWidth = localColumnsWidth[index];
width =
columnWidth === undefined
? (100 - totalWidth) / numberOfUndefined
: columnWidth;
}
align.push(react_1.default.createElement(flexGris_styles_1.ColStyled, { key: "col_" + index, width: width }));
});
return align;
}
exports.getTableCol = getTableCol;
//# sourceMappingURL=drawUtilities.js.map