import * as React from "react";
import ReactResizeDetector from "react-resize-detector";
const DEFAULT_GAP = 32;
export class Masonry extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            containerWidth: this.props.containerWidth
        };
    }
    render() {
        const { gap = DEFAULT_GAP, items, minColumnWidth } = this.props;
        const { containerWidth } = this.state;
        const margin = gap / 2;
        const count = containerWidth !== undefined ? columnCount(containerWidth, gap, minColumnWidth) : null;
        let content = null;
        if (count !== null && items.length > 0) {
            const columns = sort(count, items);
            content = (React.createElement("div", { style: { display: "flex", margin: -margin } }, columns.map((c, i) => (React.createElement("div", { key: i, style: { flex: `1 1 ${100 / columns.length}%` } }, c.map(i => (React.createElement("div", { key: i.key, style: { padding: margin } }, i.node))))))));
        }
        return (React.createElement(React.Fragment, null,
            content,
            process.env.NODE_ENV === "test" ? null : (React.createElement(ReactResizeDetector, { handleWidth: true, onResize: width => this.setState({ containerWidth: width }) }))));
    }
}
function sort(count, items) {
    let columns = Array.apply([], Array(count));
    columns = columns.map(() => []);
    let curr = 0;
    for (const i in items) {
        columns[curr].push(items[i]);
        curr = curr < count - 1 ? curr + 1 : 0;
    }
    return columns;
}
function columnCount(containerWidth, gap, minColumnWidth) {
    const columns = Math.floor((containerWidth + gap) / (minColumnWidth + gap));
    return Math.max(columns, 1);
}
//# sourceMappingURL=index.js.map