@brizy/ui
Version:
React elements in Brizy style
20 lines (19 loc) • 1.24 kB
JavaScript
import React, { useCallback } from "react";
import { classNames } from "../classNamesFn";
import { getColumnGap, getItemGap } from "./utils";
export const Masonry = ({ columns = 3, gap = 20, children }) => {
const className = classNames()("masonry");
const columnClassName = classNames()("masonry-column");
const itemClassName = classNames()("masonry-item");
const columnStyle = useCallback((columnIndex) => (columnIndex > 0 ? getColumnGap(gap) : {}), [gap]);
const getColumns = useCallback(children => (Array.isArray(children) ? children : [children]).reduce((acc, child, index) => {
const columnIndex = index % columns;
if (!acc[columnIndex])
acc[columnIndex] = [];
acc[columnIndex].push(child);
return acc;
}, []), [columns]);
if (!children)
return null;
return (React.createElement("div", { className: className }, getColumns(children).map((columnChildren, columnIndex) => (React.createElement("div", { className: columnClassName, key: `column-${columnIndex}`, style: columnStyle(columnIndex) }, columnChildren.map((child, index) => (React.createElement("div", { className: itemClassName, key: `item-${index}`, style: getItemGap(gap) }, child))))))));
};