react-honeycomb/lib/ResponsiveHoneycomb.js

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

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const resize_observer_polyfill_1 = require("resize-observer-polyfill");
const Honeycomb_1 = require("./Honeycomb");
const helpers_1 = require("./helpers");
const ResponsiveHoneycomb = (_a) => {
    var { children, size, defaultWidth } = _a, restProps = __rest(_a, ["children", "size", "defaultWidth"]);
    const containerRef = React.useRef(null);
    const [columns, setColumns] = React.useState(helpers_1.getGridColumnsCount(size, defaultWidth));
    React.useEffect(() => {
        var _a, _b;
        const observer = new resize_observer_polyfill_1.default((entries) => {
            for (let entry of entries) {
                setColumns(helpers_1.getGridColumnsCount(size, entry.contentRect.width));
            }
        });
        setColumns(helpers_1.getGridColumnsCount(size, (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : defaultWidth));
        if (containerRef.current == null)
            return;
        const target = containerRef.current;
        observer.observe(target);
        return () => observer.unobserve(target);
    }, [size]);
    return (React.createElement(Honeycomb_1.default, Object.assign({ ref: containerRef, size: size }, restProps, { columns: columns })));
};
exports.default = ResponsiveHoneycomb;