react-honeycomb/lib/Honeycomb.js

A library for displaying lists as honeycombs with hexagonal cells in React applications

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const helpers_1 = require("./helpers");
const HoneycombCell_1 = require("./HoneycombCell");
const Honeycomb = React.forwardRef(({ items, renderItem, size, columns, className, gap = 4 }, ref) => {
    const rowSize = helpers_1.getRowSize(size);
    const columnSize = helpers_1.getColumnSize(size);
    return (React.createElement(helpers_1.HoneycombContext.Provider, { value: { gap } },
        React.createElement("ul", { ref: ref, className: className, style: {
                display: "grid",
                gridTemplateColumns: `repeat(${columns * 4}, ${columnSize}px)`,
                justifyContent: "center",
                gridAutoRows: `${rowSize}px`,
                padding: `0 ${columnSize}px`,
                listStyle: "none",
            } }, items.map((item, index) => {
            const row = 1 + Math.floor(index / columns) * 3;
            const column = 1 + (index % columns) * 4;
            const renderedItem = renderItem(item, index);
            return (React.createElement(HoneycombCell_1.default, { key: index, row: row, column: column }, renderedItem));
        }))));
});
exports.default = Honeycomb;