react-broken-layouter
Version:
Layouter is a lightweight React utility for creating responsive masonry-style layouts.
103 lines (102 loc) • 4.78 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Layouter;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
// Recursive function to estimate the total text length in an item
function estimateTextLengthFromItem(item) {
let length = 0;
if (typeof item === "string")
return item.length;
if (Array.isArray(item)) {
return item.reduce((acc, val) => acc + estimateTextLengthFromItem(val), 0);
}
if (typeof item === "object" && item !== null) {
for (const key in item) {
length += estimateTextLengthFromItem(item[key]);
}
}
return length;
}
// Estimate height from text length and optional media
function estimateHeightFromItem(item, mediaHeight) {
const textLength = estimateTextLengthFromItem(item);
const baseHeight = 40 + textLength * 0.35;
return mediaHeight ? baseHeight + mediaHeight : baseHeight;
}
function Layouter({ cols, items, render: RenderItem, gap = 16, getId, getHeight, estimateHeight, mediaHeight, breakpoints, }) {
const [currentCols, setCurrentCols] = React.useState(cols);
React.useEffect(() => {
function handleResize() {
if (!breakpoints)
return setCurrentCols(cols);
const width = window.innerWidth;
const matchingBreakpoint = Object.keys(breakpoints)
.map(Number)
.sort((a, b) => a - b)
.reverse()
.find((bp) => width >= bp);
if (matchingBreakpoint) {
setCurrentCols(breakpoints[matchingBreakpoint].cols);
}
else {
setCurrentCols(cols);
}
}
if (typeof window !== "undefined") {
handleResize();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}
// Return a noop function in case it's running in a non-window env (like SSR)
return () => { };
}, [breakpoints, cols]);
const colItems = Array.from({ length: currentCols }, () => []);
const colHeights = Array.from({ length: currentCols }, () => 0);
items.forEach((item) => {
var _a, _b;
const height = (_b = (_a = getHeight === null || getHeight === void 0 ? void 0 : getHeight(item)) !== null && _a !== void 0 ? _a : estimateHeight === null || estimateHeight === void 0 ? void 0 : estimateHeight(item)) !== null && _b !== void 0 ? _b : estimateHeightFromItem(item, mediaHeight);
const shortestColIndex = colHeights.indexOf(Math.min(...colHeights));
colItems[shortestColIndex].push(item);
colHeights[shortestColIndex] += height;
});
return ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", gap }, children: colItems.map((column, colIndex) => ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap }, children: column.map((item, i) => {
var _a, _b;
return ((0, jsx_runtime_1.jsx)(RenderItem, { item: item }, `col-${colIndex}id-${(_b = (_a = getId === null || getId === void 0 ? void 0 : getId(item)) !== null && _a !== void 0 ? _a : item.id) !== null && _b !== void 0 ? _b : `index-${i}`}`));
}) }, `col-${colIndex}`))) }));
}