@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
27 lines (26 loc) • 1.27 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import tkns from '@wonderflow/tokens/platforms/web/tokens.json';
import clsx from 'clsx';
import { Children, cloneElement, isValidElement, } from 'react';
import MasonryLayout from 'react-masonry-css';
import * as styles from './masonry.module.css';
export const Masonry = ({ className, children, columns = 3, gutter = 16, style, ...otherProps }) => {
const breakpoints = {
'extra-small': 480,
small: 768,
medium: 960,
large: 1280,
'extra-large': 1600,
};
const dynamicStyle = {
'--gutter': gutter && tkns.space[gutter],
};
const computedColumns = typeof columns === 'object' && Object.keys(columns).reduce((prev, current) => current !== 'default' && ({
...prev,
default: columns.default,
[breakpoints[current]]: columns[current],
}), {});
return (_jsx(MasonryLayout, { role: "list", className: clsx(styles.Masonry, className), columnClassName: styles.Column, breakpointCols: typeof columns === 'number' ? columns : computedColumns, style: { ...dynamicStyle, ...style }, ...otherProps, children: Children.map(children, child => isValidElement(child) && cloneElement(child, {
role: 'listitem',
})) }));
};