@chayns-components/core/lib/cjs/components/masonry/Masonry.hooks.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useMasonryLayout = exports.useMasonryItems = exports.useMasonryColumnCount = void 0;
var _react = require("react");
var _Masonry = require("./Masonry.utils");
const useMasonryItems = ({
  children
}) => (0, _react.useMemo)(() => _react.Children.toArray(children), [children]);
exports.useMasonryItems = useMasonryItems;
const useMasonryLayout = ({
  items,
  itemHeights,
  columnCount,
  columnWidth,
  rowHeight,
  gap
}) => (0, _react.useMemo)(() => {
  const layoutItems = items.map((item, index) => {
    const key = (0, _Masonry.getMasonryItemKey)(item, index);
    const height = itemHeights[key] ?? rowHeight;
    return {
      key,
      columns: item.props.columns ?? 1,
      rows: (0, _Masonry.calculateRowSpan)({
        height,
        rowHeight,
        gap
      })
    };
  });
  return (0, _Masonry.packMasonryGrid)({
    items: layoutItems,
    columnCount,
    columnWidth,
    rowHeight,
    gap
  });
}, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);
exports.useMasonryLayout = useMasonryLayout;
const useMasonryColumnCount = ({
  containerWidth,
  columnWidth,
  gap
}) => (0, _react.useMemo)(() => (0, _Masonry.calculateColumnCount)({
  containerWidth,
  columnWidth,
  gap
}), [containerWidth, columnWidth, gap]);
exports.useMasonryColumnCount = useMasonryColumnCount;
//# sourceMappingURL=Masonry.hooks.js.map