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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("motion/react");
var _element = require("../../hooks/element");
var _Masonry = require("./Masonry.context");
var _Masonry2 = require("./Masonry.styles");
var _Masonry3 = require("./Masonry.hooks");
var _Masonry4 = require("./Masonry.utils");
var _MasonryItem = _interopRequireWildcard(require("./masonry-item/MasonryItem"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const MasonryBase = ({
  children,
  gap = 8,
  columnWidth = 80,
  rowHeight = 80
}) => {
  const ref = (0, _react.useRef)(null);
  const size = (0, _element.useElementSize)(ref);
  const containerWidth = (size === null || size === void 0 ? void 0 : size.width) ?? 0;
  const [itemHeights, setItemHeights] = (0, _react.useState)({});
  const items = (0, _Masonry3.useMasonryItems)({
    children
  });
  const columnCount = (0, _Masonry3.useMasonryColumnCount)({
    containerWidth,
    columnWidth,
    gap
  });
  const layout = (0, _Masonry3.useMasonryLayout)({
    items,
    itemHeights,
    columnCount,
    columnWidth,
    rowHeight,
    gap
  });
  const registerItem = (0, _react.useCallback)((key, height) => {
    setItemHeights(currentHeights => {
      if (currentHeights[key] === height) {
        return currentHeights;
      }
      return {
        ...currentHeights,
        [key]: height
      };
    });
  }, []);
  const contextValue = (0, _react.useMemo)(() => ({
    registerItem
  }), [registerItem]);
  return /*#__PURE__*/_react.default.createElement(_Masonry.MasonryContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/_react.default.createElement(_Masonry2.StyledMasonry, {
    ref: ref,
    $height: layout.height
  }, /*#__PURE__*/_react.default.createElement(_react2.AnimatePresence, null, items.map((item, index) => {
    const key = (0, _Masonry4.getMasonryItemKey)(item, index);
    const packedItem = layout.items[key];
    if (!packedItem) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement(_MasonryItem.InternalMasonryItem, {
      key: key,
      itemKey: key,
      x: packedItem.x,
      y: packedItem.y,
      width: packedItem.width
    }, item.props.children);
  }))));
};
MasonryBase.displayName = 'Masonry';
const Masonry = Object.assign(MasonryBase, {
  Item: _MasonryItem.default
});
var _default = exports.default = Masonry;
//# sourceMappingURL=Masonry.js.map